Ottieni l'altezza e la larghezza della finestra del browser senza barre di scorrimento usando jquery?

Come ottengo l'altezza e la larghezza della visualizzazione del browser senza barre di scorrimento utilizzando jQuery?

Ecco cosa ho provato finora:

       var viewportWidth = $("body").innerWidth();
       var viewportHeight = $("body").innerHeight();

Questa soluzione non tiene conto delle barre di scorrimento del browser.

$(window).height();
$(window).width();

Ulteriori informazioni

• http://api.jquery.com/height/
• http://api.jquery.com/width/

Tuttavia, l'utilizzo di jQuery non è essenziale per ottenere questi valori. Uso

document.documentElement.clientHeight;
document.documentElement.clientWidth;

per ottenere le dimensioni escluse le barre di scorrimento o

window.innerHeight;
window.innerWidth;

per ottenere l'intera visualizzazione, comprese le barre di scorrimento.

document.documentElement.clientHeight <= window.innerHeight;  // is always true

Non usare jQuery, usa solo javascript per il risultato corretto:

Ciò include larghezza / altezza della barra di scorrimento:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);

Ciò esclude larghezza / altezza della barra di scorrimento:

var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;

alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is:' + heightWithoutScrollbar);

Ecco un JS generico che dovrebbe funzionare nella maggior parte dei browser (FF, Cr, IE6 +):

var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
    viewportHeight = document.body.clientHeight;
    viewportWidth = document.body.clientWidth;
} else {
    viewportHeight = document.documentElement.clientHeight;
    viewportWidth = document.documentElement.clientWidth;
}

Stai usando le chiamate di metodo sbagliate. Un viewport è la "finestra" aperta sul documento: quanto di esso puoi vedere e dove.

L'uso $(window).height()non ti darà la dimensione del viewport ma ti darà la dimensione dell'intera finestra, che di solito è la dimensione dell'intero documento anche se il documento potrebbe essere ancora più grande.

Per ottenere le dimensioni della visualizzazione effettiva, utilizzare window.innerHeighte window.innerWidth.

https://gist.github.com/bohman/1351439

Non utilizzare i metodi jQuery, ad esempio $(window).innerHeight(), poiché danno numeri sbagliati. Ti danno l'altezza della finestra, no innerHeight.

Descrizione

Quanto segue ti darà la dimensione della visualizzazione del browser.

Campione

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

Maggiori informazioni

• jQuery.height ()
• jQUery.width ()

Come suggerito da Kyle, puoi misurare la dimensione della finestra del browser del client senza prendere in considerazione la dimensione delle barre di scorrimento in questo modo.

Esempio (dimensioni della finestra SENZA barre di scorrimento)

// First you forcibly request the scroll bars to hidden regardless if they will be needed or not.
$('body').css('overflow', 'hidden');

// Take your measures.
// (These measures WILL NOT take into account scroll bars dimensions)
var heightNoScrollBars = $(window).height();
var widthNoScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

In alternativa, se desideri trovare le dimensioni della finestra del client tenendo conto delle dimensioni delle barre di scorrimento, questo esempio di seguito è più adatto a te.

Per prima cosa non dimenticare di impostare il tag del corpo in modo che sia 100% di larghezza e altezza solo per assicurarti che la misurazione sia accurata.

body { 
width: 100%; // if you wish to measure the width and take into account the horizontal scroll bar.
height: 100%; // if you wish to measure the height while taking into account the vertical scroll bar.
}

Esempio (dimensioni della finestra CON barre di scorrimento)

// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');

// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

Il copione $(window).height() funziona bene (mostra l'altezza del viewport e non il documento con l'altezza di scorrimento), MA è necessario che tu inserisca correttamente il tag doctype nel tuo documento, ad esempio questi doctype:

Per html5: <!doctype html>

per html4 di transizione: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Probabilmente il doctype predefinito assunto da alcuni browser è tale, che $(window).height()prende l'altezza del documento e non quella del browser. Con la specifica doctype, è risolto in modo soddisfacente e sono abbastanza sicuro che i tuoi incoraggiamenti eviteranno il "cambio di scroll-overflow in nascosto e poi indietro", che è, mi dispiace, un trucco un po 'sporco, specialmente se non lo fai t documentarlo sul codice per un utilizzo futuro da parte del programmatore.

Inoltre, se stai facendo uno script, puoi inventare test per aiutare i programmatori nelle tue librerie, fammene inventarne un paio:

$(document).ready(function() {
    if(typeof $=='undefined') {
        alert("Error, you haven't called JQuery library");
    }
    if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
    } 
});

$(document).ready(function() {

  //calculate the window height & add css properties for height 100%

  wh = $( window ).height();

  ww = $( window ).width();

  $(".targeted-div").css({"height": wh, "width": ww});

});

Usare jQuery ...

$ (document) .height () & $ (window) .height () restituiranno gli stessi valori ... la chiave è ripristinare il padding e il margine del corpo in modo da non ottenere alcuno scorrimento.

<!--

body {
    padding: 0px;
    margin: 0px;
    position: relative;
}

-->

Spero che questo ti aiuti.

Volevo un aspetto diverso del mio sito Web per lo schermo largo e lo schermo piccolo. Ho creato 2 file CSS. In Java scelgo quale dei 2 file CSS utilizzare a seconda della larghezza dello schermo. Uso la funzione PHP echocon inecho -del javascript.

il mio codice nella <header>sezione del mio file PHP:

<?php
echo "
<script>
    if ( window.innerWidth > 400)
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018.css\" rel=\"stylesheet\" type=\"text/css\">'); }
    else
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018small.css\" rel=\"stylesheet\" type=\"text/css\">'); }
</script>
"; 
?>