使用jQuery获取视口大小

Question

如何使用jQuery来确定浏览器视口的大小，并在页面调整大小时重新检测？ 我需要在这个空间中建立一个IFRAME大小（每个边缘都有一点）。

对于那些不知道的人，浏览器视口不是文档/页面的大小。 它是滚动前窗口的可见大小。

Answer 1

要获取视口的宽度和高度，请执行以下操作：

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

调整页面的大小：

$(window).resize(function() {

});

Answer 2

您可以尝试视口单元（CSS3）：

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

浏览器支持

Answer 3

1.对主要问题的回应

脚本$(window).height()确实运行良好（显示视口的高度而不是滚动高度的文档），但它需要您在文档中正确放置doctype标记，例如这些doctypes：

对于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">

某些浏览器假定的默认doctype可能是这样的， $(window).height()取文档的高度而不是浏览器的高度。 有了doctype规范，它已经圆满解决了，我很确定你会避免“将滚动溢出更改为隐藏然后返回”，也就是说，对不起，有点肮脏的伎俩，特别是如果你不这样做将其记录在代码上以供将来程序员使用。

2.另外一个提示，请注意：此外，如果您正在编写脚本，您可以创建测试以帮助程序员使用您的库，让我发明一些：

~~$（document）.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函数中放入任何对$的引用，包括ready（）的声明）和这样的“install_script（）”函数的开始，检查是否定义了$，但是使所有内容都独立于JQuery，因此当JQuery尚未定义时，您的库可以“自我诊断”。 我更喜欢这种方法而不是强制自动创建一个从CDN引入它的JQuery。 除了帮助其他程序员外，这些都是微小的笔记。 我认为制作图书馆的人必须更富有反馈给潜在程序员的错误。 例如，Google Apis需要另外的手册才能理解错误消息。 这是荒谬的，需要外部文档来解决一些不需要你去搜索手册或规范的小错误。 该库必须是自我文档的。 我编写代码甚至可以处理我可能在六个月后犯下的错误，它仍然试图成为一个干净且不重复的代码，已经编写为防止未来的开发人员错误。

Answer 4

您可以使用$（window）.resize（）来检测视口是否已调整大小。

当存在滚动条时，jQuery没有任何功能可以始终如一地检测视口[1]的正确宽度和高度。

我发现了一个使用Modernizr库的解决方案，特别是用于打开javascript媒体查询的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％视口宽度，每边都有一个边距，但我希望它能为web开发者提供安慰，因为javascript视口宽度和高度计算的浏览器不连贯感到沮丧。

也许这可以帮助关于iframe：

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

[1]您可以使用$（window）.width（）和$（window）.height（）来获取在某些浏览器中正确的数字，但在其他浏览器中则不正确。 在这些浏览器中，您可以尝试使用window.innerWidth和window.innerHeight来获取正确的宽度和高度，但我建议不要使用此方法，因为它依赖于用户代理嗅探。

通常，不同的浏览器不确定它们是否包含滚动条作为窗口宽度和高度的一部分。

注意：$（window）.width（）和window.innerWidth在使用相同浏览器的操作系统之间有所不同。 请参阅： https ： //github.com/eddiemachado/bones/issues/468#issuecomment-23626238

Answer 5

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

Answer 6

请注意，CSS3视口单元（vh，vw）在iOS上无法正常播放当您滚动页面时，视口大小会以某种方式重新计算，并且使用视口单元的元素大小也会增加。 所以，实际上需要一些JavaScript。

Answer 7

要在加载和调整大小时获取视口大小（基于SimaWB响应）：

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

getViewport();

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

使用jQuery获取视口大小

问题描述

7 个解决方案

解决方案1
479 已采纳 2010-06-15 11:17:35

解决方案2
39 2013-05-27 00:26:40

解决方案3
25 2014-03-06 16:10:39

解决方案4
5 2013-08-26 07:02:45

解决方案5
2 2016-06-10 09:43:32

解决方案6
1 2013-09-19 23:19:09

解决方案7
1 2016-06-08 08:50:09

使用jQuery获取视口大小

问题描述

7 个解决方案

解决方案1 479 已采纳 2010-06-15 11:17:35

解决方案2 39 2013-05-27 00:26:40

解决方案3 25 2014-03-06 16:10:39

解决方案4 5 2013-08-26 07:02:45

解决方案5 2 2016-06-10 09:43:32

解决方案6 1 2013-09-19 23:19:09

解决方案7 1 2016-06-08 08:50:09

解决方案1
479 已采纳 2010-06-15 11:17:35

解决方案2
39 2013-05-27 00:26:40

解决方案3
25 2014-03-06 16:10:39

解决方案4
5 2013-08-26 07:02:45

解决方案5
2 2016-06-10 09:43:32

解决方案6
1 2013-09-19 23:19:09

解决方案7
1 2016-06-08 08:50:09