Uzyskać wysokość i szerokość widoku przeglądarki bez pasków przewijania za pomocą jQuery?

Jak uzyskać wysokość i szerokość widoku przeglądarki bez pasków przewijania za pomocą jQuery?

Oto, czego próbowałem do tej pory:

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

To rozwiązanie nie uwzględnia pasków przewijania przeglądarki.

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

Więcej informacji

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

Jednak użycie jQuery nie jest niezbędne do uzyskania tych wartości. Posługiwać się

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

aby uzyskać rozmiary bez pasków przewijania lub

window.innerHeight;
window.innerWidth;

aby uzyskać całą rzutnię, w tym paski przewijania.

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

Nie używaj jQuery, po prostu użyj javascript, aby uzyskać poprawny wynik:

Obejmuje to szerokość / wysokość paska przewijania:

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

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

Nie obejmuje to szerokości / wysokości paska przewijania:

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

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

Oto ogólny kod JS, który powinien działać w większości przeglądarek (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;
}

Używasz złych wywołań metod. Rzutnia to „okno” otwarte w dokumencie: ile go możesz zobaczyć i gdzie.

Użycie $(window).height()nie da ci rozmiaru rzutni, ale da ci rozmiar całego okna, który zwykle jest rozmiarem całego dokumentu, chociaż dokument może być jeszcze większy.

Aby uzyskać rozmiar rzeczywistego wykorzystania rzutni window.innerHeighti window.innerWidth.

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

Nie używaj metod jQuery, np. $(window).innerHeight()Ponieważ dają one błędne liczby. Podają wysokość okna, a nie innerHeight.

Opis

Poniżej przedstawiono rozmiar obszaru roboczego przeglądarek.

Próba

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

Więcej informacji

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

Jak zasugerował Kyle, możesz w ten sposób zmierzyć rozmiar okna przeglądarki klienta bez uwzględniania rozmiaru pasków przewijania.

Przykład (wymiary rzutni BEZ pasków przewijania)

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

Alternatywnie, jeśli chcesz znaleźć wymiary rzutni klienta, biorąc pod uwagę rozmiar pasków przewijania, to ta próbka poniżej najlepiej Ci odpowiada.

Najpierw nie zapomnij ustawić tagu body na 100% szerokości i wysokości, aby upewnić się, że pomiar jest dokładny.

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.
}

Przykład (wymiary rzutni Z paskami przewijania)

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

Skrypt $(window).height()działa dobrze (pokazuje wysokość widoku, a nie dokument z przewijaną wysokością), ALE wymaga poprawnego umieszczenia tagu doctype w dokumencie, na przykład te typy dokumentów:

W przypadku html5: <!doctype html>

dla przejściowego html4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Prawdopodobnie domyślny typ dokumentu przyjmowany przez niektóre przeglądarki jest taki, że $(window).height()przyjmuje wysokość dokumentu, a nie wysokość przeglądarki. Ze specyfikacją doctype jest to rozwiązane w zadowalający sposób i jestem prawie pewien, że unikniecie "zmiany przepełnienia przewijania na ukryty, a następnie z powrotem", co jest, przepraszam, trochę brudną sztuczką, szczególnie jeśli tego nie zrobisz Udokumentuj to w kodzie do wykorzystania w przyszłości przez programistów.

Co więcej, jeśli robisz skrypt, możesz wymyślić testy, które pomogą programistom w twoich bibliotekach, pozwól mi wymyślić kilka:

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

});

Korzystanie z jQuery ...

$ (document) .height () & $ (window) .height () zwrócą te same wartości ... kluczem jest zresetowanie dopełnienia i marginesów treści, aby nie było przewijania.

<!--

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

-->

Mam nadzieję że to pomoże.

Chciałem mieć inny wygląd mojej witryny dla szerokiego ekranu i małego ekranu. Zrobiłem 2 pliki CSS. W Javie wybieram, który z 2 plików CSS jest używany w zależności od szerokości ekranu. Używam funkcji PHP echoz echojakimś javascriptem w -funkcji.

mój kod w <header>sekcji mojego pliku 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>
"; 
?>