การใช้ jQuery เพื่อรับขนาดวิวพอร์ต

308

ฉันจะใช้ jQuery เพื่อกำหนดขนาดของวิวพอร์ตของเบราว์เซอร์ได้อย่างไรและจะตรวจสอบสิ่งนี้อีกครั้งหากมีการปรับขนาดหน้า? ฉันต้องทำให้ขนาด IFRAME เป็นพื้นที่นี้ (มาเล็กน้อยในแต่ละระยะขอบ)

สำหรับผู้ที่ไม่ทราบเบราว์เซอร์ viewport ไม่ใช่ขนาดของเอกสาร / หน้า มันเป็นขนาดที่มองเห็นได้ของหน้าต่างของคุณก่อนที่จะเลื่อน

— Volomike
แหล่งที่มา

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

— Frank Schwieterman

appelsiini.net/projects/viewportสิ่งนี้ควรทำ! :)

— Mackelito

1

นี่ไม่ใช่คำตอบสำหรับคำถามโดยตรง แต่อาจเป็นประโยชน์สำหรับผู้ที่ต้องการปรับเปลี่ยน selectors ตามตำแหน่งและการมองเห็นที่สัมพันธ์กับวิวพอร์ต: appelsiini.net/projects/viewport (plugin)

— Wallace Sidhrée

484

วิธีรับความกว้างและความสูงของวิวพอร์ต:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

ปรับขนาดเหตุการณ์ของหน้า:

$(window).resize(function() {

});

— SimaWB
แหล่งที่มา

18

ฉันทดสอบสิ่งนี้บน Windows IE6, IE8, FF3.6.3, Google Chrome 5.0.375.70, Opera 10.53 และ Safari 5.0 (7533.16) สิ่งนี้ใช้ได้อย่างต่อเนื่องในทุกสิ่งเหล่านี้ ฉันยังทดสอบ FF3.6.3 บน Ubuntu และใช้งานได้เช่นกัน ฉันคิดว่าฉันใช้ jQuery 1.3 กับ WordPress 2.9.2 ซึ่งฉันต้องการให้มันใช้งานได้

— Volomike

48

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

— Frank Schwieterman

9

ที่จริงแล้วinnerWidth/ innerHeightถูกต้องกว่าที่จะใช้ (ครอบคลุมการซูม)

18

@FrankSchwieterman บางทีเบราว์เซอร์ของคุณไม่ได้พฤติกรรมวิธีการที่คุณต้องการให้: บางทีคุณอาจจะวิ่งเข้าไปในปัญหานี้: stackoverflow.com/q/12103208/923560 ตรวจสอบให้แน่ใจไฟล์ HTML ของคุณรวมถึงการที่เหมาะสมการประกาศเช่นDOCTYPE <!DOCTYPE html>

— Abdull

21

นี่เป็นสิ่งที่ผิดอย่างสิ้นเชิง สิ่งนี้ทำให้คุณมีขนาดของเอกสารไม่ใช่วิวพอร์ต (ขนาดของหน้าต่างลงบนเอกสาร)

— Mike Bethany

39

คุณสามารถลองใช้หน่วย viewport (CSS3):

div { 
  height: 95vh; 
  width: 95vw; 
}

รองรับเบราว์เซอร์

— Vitalii Fedorenko
แหล่งที่มา

26

1. ตอบคำถามหลัก

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

สำหรับ HTML 5:

<!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()เป็นความสูงของเอกสารไม่ใช่ความสูงของเบราว์เซอร์ ด้วยสเปคของ doctype มันได้รับการแก้ไขอย่างน่าพอใจและฉันค่อนข้างมั่นใจว่าคุณ peps จะหลีกเลี่ยง "การเปลี่ยน scroll-overflow เป็น hidden แล้วกลับมา" ซึ่งก็คือฉันขอโทษด้วยเล่ห์เหลี่ยมสกปรกโดยเฉพาะถ้าคุณไม่ ' อย่าบันทึกไว้ในรหัสเพื่อการใช้งานของโปรแกรมเมอร์ในอนาคต

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

~~$ (เอกสาร) .ready (function () {~~

      if(typeof $=='undefined') {
        alert("PROGRAMMER'S Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER'S Error: you haven't installed the UI 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");
      }

~~});~~

แก้ไข: เกี่ยวกับส่วนที่ 2 "คำแนะนำเพิ่มเติมโปรดทราบ": @Machiel ในความคิดเห็นของเมื่อวาน (2014-09-04) ถูกต้องมากที่สุด: การตรวจสอบของ $ ไม่สามารถอยู่ในเหตุการณ์ที่พร้อมของ Jquery เพราะ เราเป็นเขาชี้ให้เห็นว่าสมมติ $ ได้กำหนดไว้แล้ว ขอบคุณสำหรับการชี้ให้เห็นและโปรดทำให้ผู้อ่านที่เหลือของคุณแก้ไขสิ่งนี้หากคุณใช้ในสคริปต์ของคุณ ข้อเสนอแนะของฉันคือ: ในห้องสมุดของคุณใส่ฟังก์ชั่น "install_script ()" ที่เริ่มต้นห้องสมุด (ใส่การอ้างอิงใด ๆ กับ $ ในฟังก์ชั่น init ดังกล่าวรวมถึงการประกาศพร้อม ()) และ AT การเริ่มต้นของ ตรวจสอบว่ามีการกำหนด $ แต่ทำให้ทุกอย่างเป็นอิสระจาก JQuery เพื่อให้ห้องสมุดของคุณสามารถ "วินิจฉัยตัวเอง" เมื่อยังไม่ได้กำหนด JQuery ฉันชอบวิธีนี้มากกว่าบังคับให้สร้าง JQuery โดยอัตโนมัติจาก CDN สิ่งเหล่านี้คือโน้ตเล็ก ๆ สำหรับช่วยโปรแกรมเมอร์อื่น ๆ ฉันคิดว่าคนที่สร้างห้องสมุดจะต้องตอบสนองต่อข้อผิดพลาดของโปรแกรมเมอร์มากขึ้น ตัวอย่างเช่น Google Apis ต้องการคู่มือแยกต่างหากเพื่อทำความเข้าใจข้อความแสดงข้อผิดพลาด นั่นเป็นเรื่องไร้สาระที่จะต้องมีเอกสารภายนอกสำหรับข้อผิดพลาดเล็ก ๆ น้อย ๆ ที่ไม่ต้องการให้คุณไปและค้นหาคู่มือหรือสเปค ห้องสมุดจะต้องเป็นเอกสารด้วยตนเอง ฉันเขียนโค้ดแม้กระทั่งดูแลข้อผิดพลาดที่ฉันอาจทำแม้กระทั่งหกเดือนนับจากนี้และมันก็ยังคงพยายามที่จะเป็นรหัสที่สะอาดและไม่ซ้ำซากซ้ำแล้วซ้ำอีก ฉันคิดว่าคนที่สร้างห้องสมุดจะต้องตอบสนองต่อข้อผิดพลาดของโปรแกรมเมอร์มากขึ้น ตัวอย่างเช่น Google Apis ต้องการคู่มือแยกต่างหากเพื่อทำความเข้าใจข้อความแสดงข้อผิดพลาด นั่นเป็นเรื่องไร้สาระที่จะต้องมีเอกสารภายนอกสำหรับข้อผิดพลาดเล็ก ๆ น้อย ๆ ที่ไม่ต้องการให้คุณไปและค้นหาคู่มือหรือสเปค ห้องสมุดจะต้องเป็นเอกสารด้วยตนเอง ฉันเขียนโค้ดแม้กระทั่งดูแลข้อผิดพลาดที่ฉันอาจทำแม้กระทั่งหกเดือนนับจากนี้และมันก็ยังคงพยายามที่จะเป็นรหัสที่สะอาดและไม่ซ้ำซากซ้ำแล้วซ้ำอีก ฉันคิดว่าคนที่สร้างห้องสมุดจะต้องตอบสนองต่อข้อผิดพลาดของโปรแกรมเมอร์มากขึ้น ตัวอย่างเช่น Google Apis ต้องการคู่มือแยกต่างหากเพื่อทำความเข้าใจข้อความแสดงข้อผิดพลาด นั่นเป็นเรื่องไร้สาระที่จะต้องมีเอกสารภายนอกสำหรับข้อผิดพลาดเล็ก ๆ น้อย ๆ ที่ไม่ต้องการให้คุณไปและค้นหาคู่มือหรือสเปค ห้องสมุดจะต้องเป็นเอกสารด้วยตนเอง ฉันเขียนโค้ดแม้กระทั่งดูแลข้อผิดพลาดที่ฉันอาจทำแม้กระทั่งหกเดือนนับจากนี้และมันก็ยังคงพยายามที่จะเป็นรหัสที่สะอาดและไม่ซ้ำซากซ้ำแล้วซ้ำอีก ไม่ต้องการให้คุณไปและค้นหาคู่มือหรือสเปค ห้องสมุดจะต้องเป็นเอกสารด้วยตนเอง ฉันเขียนโค้ดแม้กระทั่งดูแลข้อผิดพลาดที่ฉันอาจทำแม้กระทั่งหกเดือนนับจากนี้และมันก็ยังคงพยายามที่จะเป็นรหัสที่สะอาดและไม่ซ้ำซากซ้ำแล้วซ้ำอีก ไม่ต้องการให้คุณไปและค้นหาคู่มือหรือสเปค ห้องสมุดจะต้องเป็นเอกสารด้วยตนเอง ฉันเขียนโค้ดแม้กระทั่งดูแลข้อผิดพลาดที่ฉันอาจทำแม้กระทั่งหกเดือนนับจากนี้และมันก็ยังคงพยายามที่จะเป็นรหัสที่สะอาดและไม่ซ้ำซากซ้ำแล้วซ้ำอีก

— เดวิดแอล
แหล่งที่มา

2

มันยากมากที่จะอ่านโพสต์ของคุณ โปรดทำซ้ำโพสต์ของคุณเพื่อให้คุณคุ้นเคยกับMarkExchangeเช่นเดียวกับคนอื่น มีเหตุผลว่าทำไมเว็บไซต์ StackExchange ไม่ได้ใช้ TinyMCEแต่ถ้าคุณมีจับกับมันได้รับการมีส่วนร่วมในMeta

— Volomike

มันค่อนข้างแปลกที่คุณตรวจสอบความพร้อมของ$หลังจากที่คุณใช้การ$โทร$(document).ready(function() { } );แล้ว จะดีถ้าคุณตรวจสอบว่า jQuery พร้อมใช้งาน แต่ ณ จุดนี้มันสายเกินไปแล้ว

— Machiel

@Machiel คุณมีสิทธิ์อย่างเต็มที่ โชคดีที่ฉันเพิ่งไปตรวจสอบสคริปต์ของฉันและพวกเขาไม่ได้ใช้เหตุการณ์ที่พร้อม ใช่ขอบคุณฉันรู้สึกงี่เง่าเมื่อคุณพูดสิ่งนี้ แต่โชคดีที่ฉันเพิ่งตรวจสอบว่าในสคริปต์ของฉันการตรวจสอบอยู่ในฟังก์ชั่นที่เรียกว่า "install_this_script ()" และในการติดตั้งเช่นนี้ฉันเรียกใช้ฟังก์ชัน init ของห้องสมุด ก่อนหน้านั้นฉันจะตรวจสอบ (ข้างนอก JQUERY) ว่า $ object ถูกกำหนดหรือไม่ ขอบคุณมาก ๆ ท่านทำให้ฉันเป็นบ้าจริง ๆ ! ฉันเกรงว่าโพสต์นี้จะอยู่ที่นี่นานเกินไปฉันหวังว่าข้อผิดพลาดนี้จะไม่เป็นอันตรายต่อผู้อ่านรายอื่น ฉันแก้ไขโพสต์

— David L

นี่ควรเป็นคำตอบที่แท้จริง! ขอบคุณ!

— Justin T. Watts

6

คุณสามารถใช้ $ (หน้าต่าง). resize () เพื่อตรวจสอบว่า viewport ถูกปรับขนาด

jQuery ไม่มีฟังก์ชั่นใด ๆ ในการตรวจสอบความกว้างและความสูงอย่างถูกต้องของวิวพอร์ต [1] เมื่อมีแถบเลื่อนอยู่

ฉันพบวิธีแก้ปัญหาที่ใช้ไลบรารี Modernizr และเฉพาะฟังก์ชั่น mq ซึ่งเปิดการสืบค้นสื่อสำหรับจาวาสคริปต์

นี่คือทางออกของฉัน:

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

คำตอบของฉันอาจจะไม่ช่วยปรับขนาด iframe ให้เป็นความกว้างวิวพอร์ต 100% โดยมีระยะขอบในแต่ละด้าน แต่ฉันหวังว่าจะช่วยปลอบใจสำหรับนักพัฒนาเว็บที่ผิดหวังด้วยการเชื่อมโยงเบราว์เซอร์ของ JavaScript

บางทีนี่อาจช่วยได้เกี่ยวกับ iframe:

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] คุณสามารถใช้ $ (หน้าต่าง) .width () และ $ (หน้าต่าง) .height () เพื่อรับตัวเลขซึ่งจะถูกต้องในเบราว์เซอร์บางตัว แต่ไม่ถูกต้องในเบราว์เซอร์อื่น ๆ ในเบราว์เซอร์เหล่านั้นคุณสามารถลองใช้ window.innerWidth และ window.innerHeight เพื่อให้ได้ความกว้างและความสูงที่ถูกต้อง แต่ฉันอยากจะแนะนำวิธีการนี้เพราะมันต้องอาศัยการดมกลิ่นตัวแทนผู้ใช้

โดยทั่วไปแล้วเบราว์เซอร์ที่แตกต่างกันจะไม่สอดคล้องกันหรือไม่รวมแถบเลื่อนที่เป็นส่วนหนึ่งของความกว้างและความสูงของหน้าต่าง

หมายเหตุ: ทั้ง $ (หน้าต่าง) .width () และ window.innerWidth นั้นแตกต่างกันไปตามระบบปฏิบัติการโดยใช้เบราว์เซอร์เดียวกัน ดู: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

— forsvunnet
แหล่งที่มา

4

function showViewPortSize(display) {
    if (display) {
        var height = window.innerHeight;
        var width = window.innerWidth;
        jQuery('body')
            .prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: ' + height + '<br>Width: ' + width + '</div>');
        jQuery(window)
            .resize(function() {
                height = window.innerHeight;
                width = window.innerWidth;
                jQuery('#viewportsize')
                    .html('Height: ' + height + '<br>Width: ' + width);
            });
    }
}
$(document)
    .ready(function() {
        showViewPortSize(true);
    });

— AnuRaj
แหล่งที่มา

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

— AnuRaj

เหมาะสำหรับความกว้าง!

— Marc

2

ในการรับขนาดของวิวพอร์ตในการโหลดและการปรับขนาด (ขึ้นอยู่กับการตอบสนอง SimaWB):

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});

— SandroMarques
แหล่งที่มา

1

โปรดทราบว่า CSS3 viewport units (vh, vw) จะไม่เล่นได้ดีบน iOS เมื่อคุณเลื่อนหน้าเว็บขนาดวิวพอร์ตจะคำนวณใหม่และขนาดขององค์ประกอบที่ใช้วิวพอร์ตก็เพิ่มขึ้นเช่นกัน ดังนั้นจริงๆแล้วจาวาสคริปต์บางอย่างจำเป็นต้องมี

— DAH
แหล่งที่มา