Ottieni le dimensioni dello schermo, della pagina Web corrente e della finestra del browser


2018

Come posso ottenere windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY, che funziona in tutti i principali browser?

screenshot che descrive quali valori sono desiderati


9
pageHeight (in una foto) è possibile ottenere con: document.body.scrollHeight
befzz l'


Potrebbe essere rilevante anche questo? developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
MEM


Risposte:


1389

Puoi ottenere le dimensioni della finestra o del documento con jQuery:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

Per le dimensioni dello schermo è possibile utilizzare l' screenoggetto:

window.screen.height;
window.screen.width;

2
Il metodo jQuery height () sembra funzionare per tutti gli elementi e restituisce un numero ( 46) anziché una stringa come css ('height') ( "46px").
Chris,

6
Quando si ha a che fare con Safari mobile, purtroppo jQuery non è la soluzione perfetta a questa domanda. Vedi la nota sulla linea 13 su github.com/jquery/jquery/blob/master/src/dimensions.js
Joshua,

8
@ 웃 웃웃 웃웃 cosa hai modificato nella risposta? secondo le revisioni, non hai modificato nulla
Daniel W.

14
@Marco Kerwitz La cosa peggiore è che ho digitato "javascript get window width" e il contenuto di questa risposta era su Google. Un grande meno uno da parte mia.
Maciej Krawczyk,

2
L'OP HA CHIEDITO che jquery è un'opzione. Chiunque ninja abbia modificato la domanda originale per escluderla è un errore qui, non le persone che danno risposte legittime usando una libreria javascript accettata dal mondo.
IncredibleHat

963

Questo ha tutto ciò che devi sapere: ottieni dimensioni finestra / finestra

ma in breve:

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

Violino

Si prega di interrompere la modifica di questa risposta. È stato modificato 22 volte da persone diverse in base alla preferenza del formato del codice. È stato anche sottolineato che ciò non è necessario se si desidera targetizzare solo i browser moderni, in tal caso è necessario solo quanto segue:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);

58
Perché no g = document.body?
un secchione pagato

51
@apaidnerd: gli standard che sfidano i browser come IE8 non supportano document.body. IE9, tuttavia, lo fa.
Michael Mikowski,

46
@MichaelMikowski Non è vero! Anche IE5 supporta document.body.
Nux,

32
@nux Sono corretto e ho confermato il supporto in IE8. So però che almeno un browser che stavamo prendendo di mira di recente non supportava document.body e abbiamo dovuto cambiare per usare l'approccio getElementsByTagName. Ma credo di aver sbagliato a ricordare il browser. Scusate!
Michael Mikowski,

32
Vorrei solo sottolineare molto tranquillamente che i nomi delle variabili di una lettera non sono mai utili.
wybe,

480

Ecco una soluzione cross-browser con JavaScript puro ( sorgente ):

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

9
Questo è meglio perché se sei in grado di chiamare lo script abbastanza presto nel processo di caricamento (spesso l'idea), allora body elementrestituirà un valore di undefinedcome il dom non è ancora caricato.
DGO

16
HA! Vecchio thread ma grazie per quello! Immagino di essere uno di quei vecchi "idioti" che cercano di supportare almeno IE8 quando possibile, a beneficio del sorprendente numero di utenti domestici più anziani che non smetteranno mai di usare XP fino a quando le loro macchine non prendono fuoco. Mi stanco di fare domande e invece di ottenere una risposta, sono votato verso il basso solo con "STOP SUPPORTING IE8 !!" come commento. Ancora grazie! Ciò ha risolto un problema per me in un puro zoom fotografico javascript che avevo fatto. È un po 'lento su IE8, ma ora almeno funziona !!! :-)
Randy,

1
fantastico è molto meglio del riposo.
Vinayak Shahdeo,

95

Un modo non jQuery per ottenere la dimensione dello schermo disponibile. window.screen.width/heightè già stato installato, ma per webdesign reattivo e completezza penso che valga la pena menzionare quegli attributi:

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10 :

avvalWidth e utilHeight - La larghezza e l'altezza disponibili sullo schermo (escluse le barre delle applicazioni del sistema operativo e simili).


uguale a larghezza screen.height - sul browser Chrome Android mostra diviso per il rapporto dei pixel :(
Darius.V

2
window.screen.availHeightsembra assumere la modalità a schermo intero in modo che la normale modalità a schermo imponga lo scorrimento (testato in Firefox e Chrome).
Suzana,

@Suzana_K quindi utilizzare window.screen.heightinvece.
Vallentin,

@vallentin window.screen.height non funzionerà, ma window.innerHeight lo farà
Sam

67

Ma quando parliamo di schermi reattivi e se vogliamo gestirlo usando jQuery per qualche motivo,

window.innerWidth, window.innerHeight

dà la misura corretta. Anche rimuove lo spazio extra della barra di scorrimento e non dobbiamo preoccuparci di regolare quello spazio :)


2
Questa dovrebbe essere la risposta accettata con un sacco di voti. Una risposta molto più utile della risposta attualmente accettata e non dipende da jQuery.
Developerbmw,

5
Sfortunatamente, window.innerWidthe window.innerHeightnon riesco a prendere in considerazione la dimensione della barra di scorrimento. Se sono presenti barre di scorrimento, questi metodi restituiscono risultati errati per le dimensioni della finestra in quasi tutti i browser desktop. Vedere stackoverflow.com/a/31655549/508355
hashchange

20

Puoi anche ottenere la larghezza e l'altezza della FINESTRA, evitando le barre degli strumenti del browser e altre cose. È la vera area utilizzabile nella finestra del browser .

Per fare ciò, usa: window.innerWidth and window.innerHeightproperties ( vedi doc su w3schools ).

Nella maggior parte dei casi sarà il modo migliore, ad esempio, di visualizzare una finestra di dialogo modale mobile perfettamente centrata. Ti consente di calcolare le posizioni sulla finestra, indipendentemente dall'orientamento della risoluzione o dalle dimensioni della finestra che utilizza il browser.


2
Questo non è supportato in ie8 né ie7, secondo w3schools. Inoltre, devi fare attenzione quando ti colleghi a w3schools. Vedi meta.stackexchange.com/questions/87678/…
thecarpy

20
function wndsize(){
  var w = 0;var h = 0;
  //IE
  if(!window.innerWidth){
    if(!(document.documentElement.clientWidth == 0)){
      //strict mode
      w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
    } else{
      //quirks mode
      w = document.body.clientWidth;h = document.body.clientHeight;
    }
  } else {
    //w3c
    w = window.innerWidth;h = window.innerHeight;
  }
  return {width:w,height:h};
}
function wndcent(){
  var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
  var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
  //IE
  if(!window.pageYOffset){
    //strict mode
    if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
    //quirks mode
    else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
    //w3c
    else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
    return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');

20

Per controllare l'altezza e la larghezza della pagina attualmente caricata di qualsiasi sito Web utilizzando "console" o dopo aver fatto clic su "Ispeziona" .

passaggio 1 : fare clic con il tasto destro del mouse e fare clic su "Ispeziona", quindi su "console"

passaggio 2 : assicurarsi che lo schermo del browser non sia in modalità "massimizza". Se lo schermo del browser è in modalità 'massimizza', devi prima fare clic sul pulsante di ingrandimento (presente nell'angolo in alto a destra o a sinistra) e annullare la massimizzazione.

passo 3 : Ora, scrivi quanto segue dopo il segno maggiore di ('>') cioè

       > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)

1
Perché questa non è la risposta selezionata?
Iulian Onofrei,

1
@IulianOnofrei perché non risponde completamente alla serie di domande originale. Scherzo, è la risposta corretta per me.
rapina il

innerWidth e innerHeight sono accurati solo se la scala del viewport è 1. Questa è l'impostazione predefinita, ma può essere inavvertitamente modificata utilizzando le trasformazioni css.
Victor Stoddard,

"window.innerWidth" invece di "screen.width" ha funzionato per me per determinare la dimensione del browser dell'utente - grazie!
Kevin Pajak,

10

Se hai bisogno di una soluzione veramente a prova di proiettile per la larghezza e l'altezza del documento (la pageWidthe pageHeightnella foto), potresti prendere in considerazione l'uso di un mio plugin, jQuery.documentSize .

Ha solo uno scopo: restituire sempre la dimensione corretta del documento, anche negli scenari in cui jQuery e altri metodi falliscono . Nonostante il suo nome, non devi necessariamente usare jQuery: è scritto in Javascript vanilla e funziona senza jQuery .

Uso:

var w = $.documentWidth(),
    h = $.documentHeight();

per il globale document. Per altri documenti, ad esempio in un iframe incorporato a cui hai accesso, passa il documento come parametro:

var w = $.documentWidth( myIframe.contentDocument ),
    h = $.documentHeight( myIframe.contentDocument );

Aggiornamento: ora anche per le dimensioni della finestra

Dalla versione 1.1.0, jQuery.documentSize gestisce anche le dimensioni della finestra.

Questo è necessario perché

jQuery.documentSize fornisce $.windowWidth()e $.windowHeight(), che risolvono questi problemi. Per ulteriori informazioni, consulta la documentazione .


VM2859: 1 DOMException non rilevata: ha impedito a un frame con origine " localhost: 12999 " di accedere a un frame di origine incrociata. (...) c'è un modo per superare questo ???
fizmhd,

1
Non puoi accedere agli iframe da un dominio diverso, viola la politica della stessa origine . Dai un'occhiata a questa risposta .
Scambio hash

Questo non funziona se si sta incorporando un iframe e si cerca di ottenere l'altezza della porta di visualizzazione. window.innerHeight uguale all'altezza del documento che è buggy. Non è possibile accedere ai frame. da un dominio diverso non è una soluzione fattibile.
M.Abulsoud,

@ M.Abulsoud Se hai accesso all'iframe (nessuna violazione CORS), funziona ed è coperto dalla suite di test. Usa questa sintassi . Funziona anche con più iframe nidificati uno nell'altro - vedi questo esempio su Codepen . Se la tua installazione funziona in generale, ma non riesce in un singolo browser specifico, potrebbe essere un bug di cui non sono a conoscenza. Forse puoi aprire un problema in quel caso? Grazie.
Scambio hash

8

Ho scritto un piccolo bookmarklet javascript che puoi usare per visualizzare le dimensioni. Puoi facilmente aggiungerlo al tuo browser e ogni volta che fai clic su di esso vedrai le dimensioni nell'angolo destro della finestra del browser.

Qui puoi trovare informazioni su come utilizzare un bookmarklet https://en.wikipedia.org/wiki/Bookmarklet

bookmarklet

javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

Codice originale

Il codice originale è nel caffè:

(->
  addWindowSize = ()->
    style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
    $windowSize = $('<div style="' + style + '"></div>')

    getWindowSize = ->
      '<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'

    $windowSize.html getWindowSize()
    $('body').prepend $windowSize
    $(window).resize ->
      $windowSize.html getWindowSize()
      return

  if !($ = window.jQuery)
    # typeof jQuery=='undefined' works too
    script = document.createElement('script')
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
    script.onload = addWindowSize
    document.body.appendChild script
  else
    $ = window.jQuery
    addWindowSize()
)()

Fondamentalmente il codice sta anteponendo un piccolo div che si aggiorna quando si ridimensiona la finestra.


5

In alcuni casi correlati al layout reattivo $(document).height()possono restituire dati errati che visualizzano solo l'altezza della porta di visualizzazione. Ad esempio, quando un wrapper div # ha altezza: 100%, quel wrapper # può essere allungato di qualche blocco al suo interno. Ma l'altezza sarà comunque come l'altezza del viewport. In tale situazione potresti usare

$('#wrapper').get(0).scrollHeight

Ciò rappresenta la dimensione effettiva del wrapper.


Tante risposte con centinaia di voti, ma solo questo è stato utile.
Nakilon,

5

Guida completa relativa alle dimensioni dello schermo

JavaScript

Per altezza:

document.body.clientHeight  // Inner height of the HTML document body, including padding 
                            // but not the horizontal scrollbar height, border, or margin

screen.height               // Device screen height (i.e. all physically visible stuff)
screen.availHeight          // Device screen height minus the operating system taskbar (if present)
window.innerHeight          // The current document's viewport height, minus taskbars, etc.
window.outerHeight          // Height the current window visibly takes up on screen 
                            // (including taskbars, menus, etc.)

Nota: quando la finestra è ingrandita, questo sarà uguale a screen.availHeight

Per larghezza:

document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width                // Device screen width (i.e. all physically visible stuff)
screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth           // The outer window width (including vertical scroll bar,
                            // toolbars, etc., includes padding and border but not margin)

jquery

Per altezza:

$(document).height()    // Full height of the HTML page, including content you have to 
                        // scroll to see

$(window).height()      // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.                         

Per larghezza:

$(document).width()     // The browser viewport width, minus the vertical scroll bar
$(window).width()       // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)

Riferimento: https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints


4

Ho sviluppato una libreria per conoscere le dimensioni reali del viewport per desktop e browser per dispositivi mobili, perché le dimensioni del viewport sono incoerenti tra i dispositivi e non possono fare affidamento su tutte le risposte di quel post (secondo tutte le ricerche che ho fatto al riguardo): https: // github com / pyrsmk / W


3

A volte è necessario vedere le variazioni di larghezza / altezza durante il ridimensionamento della finestra e del contenuto interno.

Per questo ho scritto un piccolo script che aggiunge una casella di registro che monitora in modo dinamico tutti i ridimensionamenti e gli aggiornamenti quasi immediatamente.

Aggiunge un codice HTML valido con posizione fissa e indice z elevato, ma è abbastanza piccolo, quindi puoi :

  • usalo su un sito reale
  • usarlo per testare / mobili reattivi vista


Testato su: Chrome 40, IE11, ma è altamente possibile lavorare anche su altri browser / vecchi ... :)

  function gebID(id){ return document.getElementById(id); }
  function gebTN(tagName, parentEl){ 
     if( typeof parentEl == "undefined" ) var parentEl = document;
     return parentEl.getElementsByTagName(tagName);
  }
  function setStyleToTags(parentEl, tagName, styleString){
    var tags = gebTN(tagName, parentEl);
    for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
  }
  function testSizes(){
    gebID( 'screen.Width' ).innerHTML = screen.width;
    gebID( 'screen.Height' ).innerHTML = screen.height;

    gebID( 'window.Width' ).innerHTML = window.innerWidth;
    gebID( 'window.Height' ).innerHTML = window.innerHeight;

    gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
    gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;

    gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
    gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;  
  }

  var table = document.createElement('table');
  table.innerHTML = 
       "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
      +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
      +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
      +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
      +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
  ;

  gebTN("body")[0].appendChild( table );

  table.setAttribute(
     'style',
     "border: 2px solid black !important; position: fixed !important;"
     +"left: 50% !important; top: 0px !important; padding:10px !important;"
     +"width: 150px !important; font-size:18px; !important"
     +"white-space: pre !important; font-family: monospace !important;"
     +"z-index: 9999 !important;background: white !important;"
  );
  setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
  setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");

  table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );

  setInterval( testSizes, 200 );

EDIT: ora gli stili vengono applicati solo all'elemento tabella logger - non a tutte le tabelle - anche questa è una soluzione priva di jQuery :)


3

Con l'introduzione di globalThisin ES2020 è possibile utilizzare immobili come.

Per le dimensioni dello schermo:

globalThis.screen.availWidth 
globalThis.screen.availHeight

Per le dimensioni della finestra

globalThis.outerWidth
globalThis.outerHeight

Per offset:

globalThis.pageXOffset
globalThis.pageYOffset

...& presto.

alert("Screen Width: "+ globalThis.screen.availWidth +"\nScreen Height: "+ globalThis.screen.availHeight)


2

Puoi usare lo schermo oggetto per ottenere questo.

Di seguito è riportato un esempio di cosa restituirebbe:

Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

Per ottenere la tua screenWidthvariabile, basta usare screen.width, lo stesso con screenHeight, useresti semplicemente screen.height.

Per ottenere la larghezza e l'altezza della finestra, sarebbe screen.availWidtho screen.availHeightrispettivamente.

Per le variabili pageXe pageY, utilizzare window.screenX or Y. Nota che questo è MOLTO SINISTRO / IN ALTO DELLA TUA SCHERMATA SINISTRA / IN ALTO . Quindi, se hai due schermi di larghezza, 1920una finestra di 500 px dalla sinistra dello schermo di destra avrebbe un valore X di 2420(1920 + 500).screen.width/height, tuttavia, visualizza la larghezza o l'altezza della schermata CORRENTE.

Per ottenere la larghezza e l'altezza della tua pagina, usa jQuery $(window).height()o$(window).width() .

Sempre usando jQuery, usa $("html").offset().tope $("html").offset().leftper i tuoi pageXe pageYvalori.


screenX / Y è relativo allo schermo principale, non relativo allo schermo più a sinistra / in alto. Ecco perché il valore è negativo se sei attualmente su uno schermo a sinistra dello schermo principale.
Tom

0

ecco la mia soluzione!

// innerWidth
const screen_viewport_inner = () => {
    let w = window,
        i = `inner`;
    if (!(`innerWidth` in window)) {
        i = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${i}Width`],
        height: w[`${i}Height`]
    }
};


// outerWidth
const screen_viewport_outer = () => {
    let w = window,
        o = `outer`;
    if (!(`outerWidth` in window)) {
        o = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${o}Width`],
        height: w[`${o}Height`]
    }
};

// style
const console_color = `
    color: rgba(0,255,0,0.7);
    font-size: 1.5rem;
    border: 1px solid red;
`;



// testing
const test = () => {
    let i_obj = screen_viewport_inner();
    console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
    let o_obj = screen_viewport_outer();
    console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};

// IIFE
(() => {
    test();
})();



0

In questo modo sono riuscito a ottenere la larghezza dello schermo in React JS Project:

Se la larghezza è uguale a 1680, restituisce 570 altrimenti restituisce 200

var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

Screen.availWidth

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.