使用jQuery获取视口的大小

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

---

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

要获取视口的宽度和高度：

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

调整页面的事件大小：

$(window).resize(function() {

});

您可以尝试（CSS3）：

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

当存在滚动条时，jQuery没有任何功能来一致地检测视口[1]的正确宽度和高度

我找到了一个使用Modernizer库的解决方案，特别是mq函数，它为javascript打开媒体查询

以下是我的解决方案：

// 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视口宽度和高度计算不一致而感到沮丧的Web开发人员提供安慰

也许这对iframe有帮助：

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

$（'iframe'）.css（'width'，'100%'）.wrap（''；

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

通常，不同的浏览器在是否将滚动条作为窗口宽度和高度的一部分方面是不一致的

注意：$（window）.width（）和window.innerWidth在使用相同浏览器的操作系统之间都有所不同。

---

请注意，当您滚动页面时，CSS3视口单位（vh、vw）在iOS上无法正常运行，视口大小会以某种方式重新计算，使用视口单位的元素大小也会增加。因此，实际上需要一些javascript。对主要问题的答复

脚本

$（window）.height（）

运行良好（显示视口的高度，而不是具有滚动高度的文档），但需要在文档中正确放置doctype标记，例如以下doctype：

对于HTML 5：

对于过渡HTML4：

某些浏览器假定的默认doctype可能是这样的：

$（window）.height（）

获取文档的高度，而不是浏览器的高度。使用doctype规范，它得到了令人满意的解决，我敢肯定您的PEP将避免“将滚动溢出更改为隐藏，然后返回”，这是一个有点肮脏的把戏，很抱歉，特别是如果您不在代码中记录它以供将来的程序员使用

2。附加提示，请注意： 此外，如果您正在编写脚本，您可以发明测试来帮助程序员使用您的库，让我发明几个：

$（文档）.ready（函数（）{

if（typeof$==“未定义”）{
警报（“程序员错误：您没有调用JQuery库”）；
}else if（typeof$.ui=='undefined'）{
警报（“程序员错误：您尚未安装UI Jquery库”）；
}
if（document.doctype==null | | screen.height

}）

---

编辑：关于第2部分“附加提示，请注意”：

---

@Machiel在昨天的评论（2014-09-04）中完全正确：美元的检查不能在Jquery的ready事件中，因为正如他所指出的，我们假设美元已经定义。感谢您指出这一点，如果您在脚本中使用了它，请其他读者纠正这一点。我的建议是：在您的库中放置一个“install_script（）”函数来初始化库（在这样的init函数中放置对$的任何引用，包括ready（）的声明），在这样的“install_script（）”函数的开头，检查$是否已定义，但要使所有内容独立于JQuery，这样您的库就可以“自我诊断“当JQuery尚未定义时。我更喜欢这种方法，而不是强制从CDN自动创建JQuery。这些都是用来帮助其他程序员的小注释。我认为制作库的人必须在反馈潜在程序员的错误方面更加丰富。例如，GoogleAPI需要一本备用手册来理解错误消息。这是荒谬的，因为一些微小的错误需要外部文档，而不需要您去搜索手册或规范。图书馆必须自我记录。我编写代码时，即使考虑到六个月后我可能犯的错误，它仍然试图成为一个干净的、不重复的代码，已经编写好了，以防止将来的开发人员错误。

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

函数showViewPortSize（显示）{
如果（显示）{
var height=window.innerHeight；
变量宽度=window.innerWidth；
jQuery（'body'）
.prepend（'Height:'+Height+'
Width:'+Width+''）；
jQuery（窗口）
.resize（函数（）{
高度=窗内高度；
宽度=window.innerWidth；
jQuery（“#viewportsize”）
.html（'Height:'+Height+'
Width:'+Width）；
});
}
}
$（文件）
.ready（函数（）{
showViewPortSize（真）；
});

我在Windows IE6、IE8、FF3.6.3、Google Chrome 5.0.375.70、Opera 10.53和Safari 5.0（7533.16）上对此进行了测试。这在所有这些方面都起到了始终如一的作用。我还测试了FF3.6

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

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

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

getViewport();

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

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