Dapatkan tinggi dan lebar viewport browser tanpa scrollbar menggunakan jquery?

Bagaimana cara mendapatkan tinggi dan lebar viewport browser tanpa scrollbar menggunakan jQuery?

Inilah yang telah saya coba sejauh ini:

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

Solusi ini tidak memperhitungkan scrollbar browser.

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

Info lebih lanjut

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

Namun, menggunakan jQuery tidak penting untuk mendapatkan nilai-nilai itu. Menggunakan

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

untuk mendapatkan ukuran tidak termasuk scrollbar, atau

window.innerHeight;
window.innerWidth;

untuk mendapatkan seluruh area pandang, termasuk bilah gulir.

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

Jangan gunakan jQuery, cukup gunakan javascript untuk hasil yang benar:

Ini termasuk lebar / tinggi scrollbar:

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

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

Ini tidak termasuk lebar / tinggi scrollbar:

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

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

Berikut adalah JS umum yang seharusnya berfungsi di sebagian besar 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;
}

Anda menggunakan panggilan metode yang salah. Area pandang adalah "jendela" yang terbuka di dokumen: seberapa banyak yang dapat Anda lihat dan di mana.

Menggunakan $(window).height()tidak akan memberi Anda ukuran area pandang, ini akan memberi Anda ukuran seluruh jendela, yang biasanya merupakan ukuran seluruh dokumen meskipun dokumen bisa lebih besar.

Untuk mendapatkan ukuran viewport yang sebenarnya, gunakan window.innerHeightdan window.innerWidth.

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

Jangan gunakan metode jQuery, misalnya $(window).innerHeight(), karena metode ini memberikan angka yang salah. Mereka memberi Anda tinggi jendela, bukan innerHeight.

Deskripsi

Berikut ini adalah ukuran viewport browser.

Sampel

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

Informasi Lebih Lanjut

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

Seperti yang disarankan Kyle, Anda dapat mengukur ukuran area pandang browser klien tanpa memperhitungkan ukuran bilah gulir dengan cara ini.

Contoh (Dimensi area pandang TANPA bilah gulir)

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

Atau jika Anda ingin menemukan dimensi area pandang klien sambil mempertimbangkan ukuran bilah gulir, contoh di bawah ini paling cocok untuk Anda.

Pertama jangan lupa untuk mengatur body tag Anda menjadi 100% lebar dan tinggi hanya untuk memastikan pengukurannya akurat.

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

Sampel (Dimensi area pandang DENGAN bilah gulir)

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

Skrip $(window).height()berfungsi dengan baik (menunjukkan tinggi viewport dan bukan dokumen dengan tinggi scrolling), TETAPI Anda perlu meletakkan tag doctype dengan benar di dokumen Anda, misalnya doctypes ini:

Untuk html5: <!doctype html>

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

Mungkin doctype default yang diasumsikan oleh beberapa browser adalah seperti itu, yang $(window).height()mengambil tinggi dokumen dan bukan tinggi browser. Dengan spesifikasi doctype, ini diselesaikan dengan memuaskan, dan saya cukup yakin Anda akan menghindari "mengubah scroll-overflow menjadi tersembunyi dan kemudian kembali", yang, maaf, trik yang agak kotor, terutama jika Anda tidak ' t mendokumentasikannya pada kode untuk penggunaan programmer di masa depan.

Selain itu, jika Anda membuat skrip, Anda dapat menciptakan tes untuk membantu pemrogram di perpustakaan Anda, izinkan saya menemukan beberapa:

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

});

Menggunakan jQuery ...

$ (document) .height () & $ (window) .height () akan mengembalikan nilai yang sama ... kuncinya adalah mengatur ulang padding dan margin body sehingga Anda tidak mendapatkan scrolling.

<!--

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

-->

Semoga ini membantu.

Saya ingin tampilan situs saya yang berbeda untuk layar lebar dan layar kecil. Saya telah membuat 2 file CSS. Di Java saya memilih mana dari 2 file CSS yang digunakan tergantung pada lebar layar. Saya menggunakan fungsi PHP echodengan di echo-fungsi beberapa javascript.

kode saya di <header>bagian file PHP saya:

<?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>
"; 
?>