JQuery kullanarak kaydırma çubukları olmadan tarayıcı görünüm alanının yüksekliğini ve genişliğini alın.

JQuery kullanarak kaydırma çubukları olmadan tarayıcı görünüm alanının yüksekliğini ve genişliğini nasıl elde ederim?

İşte şimdiye kadar denediğim şey:

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

Bu çözüm, tarayıcının kaydırma çubuklarını hesaba katmaz.

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

Daha fazla bilgi

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

Bununla birlikte, bu değerleri elde etmek için jQuery kullanmak şart değildir. Kullanım

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

kaydırma çubukları hariç boyutları almak için veya

window.innerHeight;
window.innerWidth;

kaydırma çubukları dahil tüm görüntü alanını elde etmek için.

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

JQuery kullanmayın, sadece doğru sonuç için javascript kullanın:

Buna kaydırma çubuğu genişliği / yüksekliği dahildir:

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

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

Kaydırma çubuğu genişliği / yüksekliği buna dahil değildir:

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

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

İşte çoğu tarayıcıda (FF, Cr, IE6 +) çalışması gereken genel bir JS:

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

Yanlış yöntem çağrılarını kullanıyorsunuz. Görüntü alanı, belgede açık olan "pencere" dir: ne kadarını ve nerede görebilirsiniz.

Kullanmak $(window).height()size görüntü alanı boyutunu vermez, size tüm pencerenin boyutunu verir, bu genellikle tüm belgenin boyutudur, ancak belge daha da büyük olabilir.

Gerçek görüntü alanı kullanımının boyutunu almak için window.innerHeightve window.innerWidth.

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

JQuery yöntemlerini kullanmayın, örneğin $(window).innerHeight()bunlar yanlış numaralar verir. Size pencerenin yüksekliğini veriyorlar, değil innerHeight.

Açıklama

Aşağıdakiler size tarayıcının görüntü alanının boyutunu verecektir.

Örneklem

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

Daha fazla bilgi

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

Kyle'ın önerdiği gibi, bu şekilde kaydırma çubuklarının boyutunu hesaba katmadan istemci tarayıcısı görüntü alanı boyutunu ölçebilirsiniz.

Örnek (Kaydırma çubukları OLMADAN Görüntü alanı boyutları)

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

Alternatif olarak, kaydırma çubuklarının boyutunu dikkate alarak müşteri görünüm alanının boyutlarını bulmak isterseniz, bu örnek aşağıda size en uygunudur.

Öncelikle, ölçümün doğru olduğundan emin olmak için body etiketinizi% 100 genişlik ve yüksekliğe ayarlamayı unutmayın.

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

Örnek (Kaydırma çubuklu görüntü alanı boyutları)

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

Komut dosyası $(window).height()iyi çalışıyor (kaydırma yüksekliği olan belgeyi değil görünüm alanının yüksekliğini gösteriyor), ANCAK belgenize doctype etiketini doğru şekilde yerleştirmeniz gerekiyor, örneğin şu belge türleri:

Html5 için: <!doctype html>

geçiş html4 için: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Muhtemelen bazı tarayıcılar tarafından varsayılan belge türü $(window).height(), tarayıcının yüksekliğini değil, belgenin yüksekliğini alacak şekildedir. Doctype spesifikasyonuyla, tatmin edici bir şekilde çözüldü ve eminim ki, peps "kaydırma taşmasını gizli olarak değiştirip sonra geri döndürmekten" kaçınacaktır, bu da üzgünüm, biraz kirli bir numara, özellikle de yapmazsanız t gelecekteki programcıların kullanımı için kod üzerinde belgeleyin.

Ayrıca, bir betik yapıyorsanız, kitaplıklarınızdaki programcılara yardımcı olmak için testler icat edebilirsiniz, bir çift icat etmeme izin verin:

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

});

JQuery kullanma ...

$ (document) .height () & $ (window) .height () aynı değerleri döndürecektir ... Anahtar, kaydırma yapmamanız için gövdenin dolgusunu ve kenar boşluğunu sıfırlamaktır.

<!--

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

-->

Bu yardımcı olur umarım.

Geniş ekran ve küçük ekran için web sitemin farklı bir görünümünü istedim. 2 CSS dosyası yaptım. Java'da ekran genişliğine bağlı olarak 2 CSS dosyasından hangisinin kullanılacağını seçiyorum. PHP işlevini kullanın echoiçinde olan echo-Fonksiyon bazı javascript.

<header>PHP dosyamın bölümündeki kodum :

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