it-swarm.it

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 describing which values are wanted

1815
turtledove

Se si utilizza jQuery, è possibile ottenere la dimensione 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 è possibile utilizzare l'oggetto screen nel seguente modo:

screen.height;
screen.width;
1268
Ankit Jaiswal

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

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

Fiddle

887
sidonaldson

Ecco una soluzione cross browser con pure JavaScript ( Source ):

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

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

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 tali attributi:

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

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

availWidth and availHeight - La larghezza e l'altezza disponibili sullo schermo (escluse le barre delle applicazioni OS e simili).

85
Daniel W.

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 :)

60
Aabha Pandey

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

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

passaggio 2 : assicurarsi che lo schermo del browser non sia in modalità 'Ingrandisci'. Se la schermata del browser è in modalità 'Ingrandisci', è necessario prima fare clic sul pulsante di ingrandimento (presente nell'angolo superiore destro o sinistro) e non massimizzarlo.

passaggio 3 : Ora, scrivi quanto segue dopo il segno maggiore di ('>'), ad es.

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

       > window.innerHeight
            output : your present window height in px (say 359)
18
solanki...
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>');
17
dude

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

Per fare ciò, usa: window.innerWidth e window.innerHeight properties ( vedi 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.

17
serfer2

Se hai bisogno di una soluzione veramente antiproiettile per la larghezza e l'altezza del documento (pageWidth e pageHeight nella figura), 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 quando jQuery e altri metodi fail . 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 es. 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é

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

10
hashchange

Ho scritto un piccolo bookmarklet javascript che puoi usare per visualizzare la dimensione. Puoi aggiungerlo facilmente al tuo browser e ogni volta che lo fai clic 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('<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 prevede un div piccolo che si aggiorna quando ridimensionate la vostra finestra.

8
Andi Giga

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

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

Questo rappresenta la dimensione effettiva del wrapper.

5
Akim Kelar

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

4
pyrsmk

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 :

  • usalo su un actual site
  • usalo per testare viste mobili/reattivi


Testato su: Chrome 40, IE11, ma è anche possibile 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; 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 sono applicati solo all'elemento tabella logger - non a tutti i tavoli - anche questo è un jQuery-free solution :)

3
jave.web

Puoi usare Screen object 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 solo screen.width, lo stesso con screenHeight, dovresti semplicemente usare screen.height.

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

Per le variabili pageX e pageY, utilizzare window.screenX or Y. Nota che questo è dal MOLTO SINISTRA/PARTE SUPERIORE DELLA TUA SCHERMATA SINISTRA/SUPERIORE . Quindi se hai due schermate di larghezza 1920 allora una 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 CURRENT.

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

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

2
Zach Barham

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
user8202629