Ottieni le dimensioni dello schermo, la pagina web corrente e la finestra del browser

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

screenshot che descrive quali valori sono desiderati

Se si utilizza jQuery, è ansible ottenere le dimensioni della finestra o del documento utilizzando i metodi jQuery:

 $(window).height(); // returns height of browser viewport $(document).height(); // returns height of HTML document (same as pageHeight in screenshot) $(window).width(); // returns width of browser viewport $(document).width(); // returns width of HTML document (same as pageWidth in screenshot) 

Per le dimensioni dello schermo è ansible utilizzare l’object screen nel seguente modo:

 screen.height; screen.width; 

Questo è tutto ciò che devi sapere:

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

ma in breve:

 var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight|| e.clientHeight|| g.clientHeight; alert(x + ' × ' + y); 

Violino

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

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

Un modo non jQuery per ottenere la dimensione dello schermo disponibile. window.screen.width/height è già stato pubblicato, ma per il responsive webdesign e completezza, credo che valga la pena menzionare questi attributi:

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

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

availWidth e availHeight : larghezza e altezza disponibili sullo schermo (escluse le barre delle applicazioni del sistema operativo e simili).

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 lo spazio 🙂

 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+';
'); document.write(center.y+';
'); document.write('
');

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

Per fare ciò, utilizzare: proprietà window.innerWidth e window.innerHeight ( consultare doc su w3schools ).

Nella maggior parte dei casi sarà il modo migliore, ad esempio, per visualizzare una finestra di dialogo modale mobile perfettamente centrata. Consente di calcolare le posizioni sulla finestra, indipendentemente dall’orientamento della risoluzione o dalla dimensione della finestra che utilizza il browser.

Per controllare l’altezza e la larghezza della pagina caricata corrente di qualsiasi sito Web utilizzando “console” o dopo aver fatto clic su “Ispeziona” .

passaggio 1 : fai clic con il pulsante destro del mouse e fai clic su “Ispeziona”, quindi fai clic su “console”

passo 2 : assicurati che la schermata del tuo browser non debba essere nella modalità ‘massimizza’. Se la schermata del browser è in modalità ‘Ingrandisci’, è necessario prima fare clic sul pulsante di ingrandimento (presente nell’angolo in alto a destra o a sinistra) e non massimizzarlo.

passo 3 : Ora, scrivi quanto segue dopo il segno maggiore di (‘>’) es

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

Se hai bisogno di una soluzione veramente a prova di proiettile per la larghezza e l’altezza del documento (la pagina pageWidth e pageHeight nella foto), potresti prendere in considerazione l’utilizzo di un mio plug-in, jQuery.documentSize .

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

Uso:

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

per il document globale. 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

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

Questo è necessario perché

  • $( window ).height() è $( window ).height() in iOS , al punto da essere inutile
  • $( window ).width() e $( window ).height() non sono affidabili sui dispositivi mobili perché non gestiscono gli effetti dello zoom mobile.

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

Ho scritto un piccolo bookmarklet javascript che puoi usare per visualizzare la dimensione. Puoi aggiungerlo facilmente al tuo browser e ogni volta che clicchi vedrai le dimensioni nell’angolo destro della finestra del browser.

Qui trovi le 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('
'),e=function(){return'

width: '+i(window).width()+" height: "+i(window).height()+"

"},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 = $('
') getWindowSize = -> '

width: ' + $(window).width() + ' height: ' + $(window).height() + '

' $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 prevede un div piccolo che si aggiorna quando ridimensioni la tua finestra.

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

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

Questo rappresenta la dimensione effettiva del wrapper.

Ho sviluppato una libreria per conoscere la dimensione reale della finestra per desktop e browser mobili, perché le dimensioni della vista non sono coerenti tra i dispositivi e non posso fare affidamento su tutte le risposte di quel post (secondo tutte le ricerche che ho fatto su questo argomento ): https: // github com / pyrsmk / W

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

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

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

  • usarlo su un sito reale
  • utilizzalo per testare le visualizzazioni mobili / reattive

Testato su: Chrome 40, IE11, ma è anche ansible lavorare su altri browser più 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; iscreenx" +"windowx" +"document
.documentElementx" +"document.bodyx" ; 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 sono applicati solo all’elemento tabella logger – non a tutte le tabelle – anche questa è una soluzione jQuery-free 🙂

Puoi usare l’object Screen per ottenere questo.

Quello che segue è 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 variabile screenWidth , usa screen.width , stessa cosa con screenHeight , dovresti semplicemente usare screen.height .

Per ottenere la larghezza e l’altezza della finestra, sarebbero rispettivamente screen.availWidth o screen.availHeight .

Per le variabili pageX e pageY , usa window.screenX or Y Si noti che questo è dal MOLTO SINISTRA / IN ALTO DELLA VOSTRA SCHERMATA SINISTRO / SUPERIORE . Quindi, se hai due schermi di larghezza 1920 una finestra 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 CURRENT.

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

Ancora usando jQuery, usa $("html").offset().top e $("html").offset().left per i valori della pageY pageX e della pagina pageY

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(); })(); 

Ora possiamo tranquillamente usare da soli l’API nativa della javascript in tutti i browser , senza il contesto della finestra.

La syntax è abbastanza chiara!

 n = "px
" /* separator */ dp = devicePixelRatio /* device zoom level */ body = (() => { document.body.innerHTML = /* ready! */ "Device zoom level: " + dp +n+ "Screen width: " + screen.width *dp+n+ "Screen height: "+ screen.height *dp+n+ "Document frame height: " + innerHeight *dp+n+ "Document frame width: " + innerWidth *dp+n+ "Parent document height: "+ outerHeight *dp+n+ "Parent document width: "+ outerWidth *dp+n+ "Window available height: "+ screen.availHeight *dp+n+ "Window available width: "+ screen.availWidth *dp+n+ "Document frame max scrollable X: "+ scrollMaxX *dp+n+ "Document frame max scrollable Y: "+ scrollMaxY *dp+n+ "Distance from left screen to window: "+ screenX *dp+n+ "Distance from top screen to window: "+ screenY *dp+n })()

Ecco la mia soluzione. Prima di tutto, alcuni oggetti di utilità funzionano con i cookie

 /* Simple getter and setter for cookies */ (function(global){ function setCookie(cname, cvalue, exdays) { exdays = typeof exdays === 'undefined' && 365; var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); var expires = "expires="+d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return undefined; } global.Cookie = { get: getCookie, set: setCookie }; })(window); 

Quindi puoi fare qualcosa come ..

 /* Detect screen width and height and save it to a cookie. We are later using it to resize the images accordingly. */ if( !Cookie.get('screen_width') || !Cookie.get('screen_height') || Cookie.get('screen_width') != screen.width || Cookie.get('screen_height') != screen.height ){ Cookie.set('screen_width', screen.width); Cookie.set('screen_height', screen.height); location.reload(); } 

In questo modo è ansible utilizzare una lingua serveride per leggere i cookie e ottenere l'esatta dimensione dell'immagine della schermata utente.