รับความสูงและความกว้างของวิวพอร์ตของเบราว์เซอร์โดยไม่มีแถบเลื่อนโดยใช้ jquery?

ฉันจะรับความสูงและความกว้างของวิวพอร์ตของเบราว์เซอร์โดยไม่ใช้แถบเลื่อนโดยใช้ jQuery ได้อย่างไร

นี่คือสิ่งที่ฉันได้ลองแล้ว:

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

โซลูชันนี้ไม่คำนึงถึงแถบเลื่อนของเบราว์เซอร์

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

ข้อมูลเพิ่มเติม

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

อย่างไรก็ตามการใช้ jQuery ไม่จำเป็นสำหรับการรับค่าเหล่านั้น ใช้

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

เพื่อรับขนาดที่ไม่รวมแถบเลื่อนหรือ

window.innerHeight;
window.innerWidth;

เพื่อรับวิวพอร์ตทั้งหมดรวมถึงแถบเลื่อน

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

อย่าใช้ jQuery เพียงแค่ใช้ javascript เพื่อผลลัพธ์ที่ถูกต้อง:

ซึ่งรวมถึงความกว้าง / ความสูงของแถบเลื่อน:

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

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

สิ่งนี้ไม่รวมความกว้าง / ความสูงของแถบเลื่อน:

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

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

นี่คือ JS ทั่วไปที่ควรใช้กับเบราว์เซอร์ส่วนใหญ่ (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;
}

คุณใช้การโทรผิดวิธี วิวพอร์ตคือ "หน้าต่าง" ที่เปิดอยู่ในเอกสาร: คุณสามารถดูได้มากแค่ไหนและที่ไหน

การใช้ $(window).height()จะไม่ทำให้คุณมีขนาดวิวพอร์ต แต่จะทำให้คุณได้ขนาดของหน้าต่างทั้งหมดซึ่งโดยปกติจะเป็นขนาดของเอกสารทั้งหมดแม้ว่าเอกสารจะใหญ่กว่าก็ตาม

เพื่อให้ได้ขนาดของวิวพอร์ตที่ใช้งานจริงwindow.innerHeightและwindow.innerWidth .

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

อย่าใช้เมธอด jQuery เช่นการ$(window).innerHeight()ให้ตัวเลขผิด innerHeightพวกเขาให้ความสูงของหน้าต่างที่ไม่ได้

คำอธิบาย

ต่อไปนี้จะให้ขนาดของวิวพอร์ตของเบราว์เซอร์

ตัวอย่าง

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

ข้อมูลมากกว่านี้

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

ตามที่ Kyle แนะนำคุณสามารถวัดขนาดวิวพอร์ตของเบราว์เซอร์ไคลเอนต์ได้โดยไม่ต้องคำนึงถึงขนาดของแถบเลื่อนด้วยวิธีนี้

ตัวอย่าง (ขนาดวิวพอร์ตโดยไม่มีแถบเลื่อน)

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

หรือหากคุณต้องการค้นหาขนาดของวิวพอร์ตไคลเอ็นต์โดยคำนึงถึงขนาดของแถบเลื่อนตัวอย่างการร้องนี้เหมาะกับคุณมากที่สุด

ก่อนอื่นอย่าลืมตั้งค่าแท็กร่างกายให้มีความกว้างและความสูง 100% เพื่อให้แน่ใจว่าการวัดถูกต้อง

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

ตัวอย่าง (ขนาดวิวพอร์ตพร้อมแถบเลื่อน)

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

สคริปต์ $(window).height()ทำงานได้ดี (แสดงความสูงของวิวพอร์ตไม่ใช่เอกสารที่มีความสูงในการเลื่อน) แต่จำเป็นต้องใส่แท็กประเภทหลักในเอกสารของคุณอย่างถูกต้องตัวอย่างเช่นประเภทของเอกสารเหล่านี้:

สำหรับ html5: <!doctype html>

สำหรับ html4 เฉพาะกาล: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

อาจเป็นประเภทหลักเริ่มต้นที่เบราว์เซอร์บางตัวสันนิษฐานว่าเป็นเช่นนั้นซึ่ง$(window).height()ใช้ความสูงของเอกสารไม่ใช่ความสูงของเบราว์เซอร์ ด้วยข้อกำหนดประเภทหลักมันได้รับการแก้ไขอย่างน่าพอใจและฉันค่อนข้างมั่นใจว่าคุณ peps จะหลีกเลี่ยง "การเปลี่ยนการเลื่อน - ล้นเป็นซ่อนแล้วย้อนกลับ" ซึ่งก็คือฉันขอโทษเป็นเคล็ดลับที่สกปรกเล็กน้อยโดยเฉพาะอย่างยิ่งถ้าคุณไม่ ' t บันทึกไว้ในรหัสสำหรับการใช้งานของโปรแกรมเมอร์ในอนาคต

ยิ่งไปกว่านั้นหากคุณกำลังทำสคริปต์คุณสามารถคิดค้นการทดสอบเพื่อช่วยโปรแกรมเมอร์ในไลบรารีของคุณได้ขอฉันสร้างสองสามอย่าง:

$(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 ...

$ (document) .height () & $ (window) .height () จะคืนค่าเหมือนเดิม ... กุญแจสำคัญคือการรีเซ็ตช่องว่างภายในและระยะขอบเพื่อไม่ให้คุณเลื่อน

<!--

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

-->

หวังว่านี่จะช่วยได้

ฉันต้องการรูปลักษณ์ที่แตกต่างกันของเว็บไซต์สำหรับหน้าจอความกว้างและหน้าจอขนาดเล็ก ฉันสร้างไฟล์ CSS 2 ไฟล์ ใน Java ฉันเลือกไฟล์ CSS 2 ไฟล์ที่จะใช้ขึ้นอยู่กับความกว้างของหน้าจอ ฉันใช้ฟังก์ชัน PHP echoกับในไฟล์echoจาวาสคริปต์บางตัวฟังก์ชัน

รหัสของฉันใน<header>ส่วนของไฟล์ 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>
"; 
?>