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


Come posso avere windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY che funzionerà con tutti i principali browser?

screenshot describing which values are wanted


1593
2017-08-09 06:28


origine


risposte:


Se si utilizza jQuery, è possibile 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 puoi usare il screen oggetto nel modo seguente:

screen.height;
screen.width;

1137
2017-08-09 06:39



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


815
2017-07-31 15:52



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

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

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

361
2018-01-30 17:44



Un modo non jQuery per ottenere la dimensione dello schermo disponibile. window.screen.width/height è già stato messo in piedi, ma per 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 e availHeight - La larghezza e l'altezza disponibili sul   schermo (escluse le barre delle applicazioni del sistema operativo e simili).


77
2018-06-20 10:06



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


46
2018-04-22 07:29



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
2018-02-11 04:25



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

Per fare questo, utilizzare: window.innerWidth  e window.innerHeight proprietà (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.


15
2017-08-21 10:44



Per controllare l'altezza e la larghezza della tua pagina caricata corrente di qualsiasi sito web utilizzando "Console" o dopo aver cliccato "Ispezionare".

passo 1: Fai clic con il pulsante destro del mouse e fai clic su "Ispeziona", quindi fai clic su "console"

passo 2: Assicurati 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 in alto a destra o a sinistra) 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)

12
2017-07-09 04:22



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

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

Uso:

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

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

  • $( window ).height() è buggy in iOS, al punto di essere inutile
  • $( window ).width() e $( window ).height() siamo inaffidabile sul cellulare perché non gestiscono gli effetti dello zoom mobile.

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


8
2018-03-04 22:30



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('<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 ridimensioni la tua finestra.


8
2018-03-31 09:25