如何使用 jQuery 来确定浏览器视口的大小，并在调整页面大小时重新检测到这一点？我需要在这个空间中设置一个 IFRAME 大小（每个边距都有一点）。
对于那些不知道的人来说，浏览器视口并不是文档/页面的大小。它是滚动前窗口的可见大小。
【问题讨论】：
标签： jquery resize size viewport
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">
可能某些浏览器采用的默认文档类型是这样的，$(window).height() 采用文档的高度而不是浏览器的高度。使用 doctype 规范，它得到了令人满意的解决，我很确定你会避免“将滚动溢出更改为隐藏然后返回”，对不起，这是一个有点肮脏的技巧，特别是如果你不这样做' t 将其记录在代码中以供将来程序员使用。
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 的 ready 事件中，因为正如他所指出的，我们假设 $ 已经定义。感谢您指出这一点，如果您在脚本中使用它，请其他读者更正这一点。我的建议是：在您的库中放置一个初始化库的“install_script()”函数（在此类 init 函数中放置对 $ 的任何引用，包括 ready() 的声明）并在此类“install_script()”函数的开头，检查 $ 是否已定义，但使一切都独立于 JQuery，因此您的库可以在 JQuery 尚未定义时“自我诊断”。我更喜欢这种方法，而不是强制从 CDN 中自动创建 JQuery。这些只是帮助其他程序员的小笔记。我认为制作库的人必须对潜在的程序员错误的反馈更丰富。例如，Google API 需要一个辅助手册来理解错误消息。这是荒谬的，需要外部文档来解决一些不需要你去搜索手册或规范的小错误。库必须是自记录的。我编写代码时甚至会考虑到六个月后我可能会犯的错误，并且它仍然试图成为一个干净且不重复的代码，已经编写以防止未来的开发人员错误。
【讨论】：
$ 调用$(document).ready(function() { } ); 之后检查$ 的可用性有点奇怪。最好检查一下 jQuery 是否可用，但此时已经为时已晚。
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);
});
【讨论】：
要在 load 和 resize（基于 SimaWB 响应）时获取视口大小：
function getViewport() {
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
$('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}
getViewport();
$(window).resize(function() {
getViewport()
});
【讨论】：
您可以使用 $(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% 视口宽度并在每一侧留出边距，但我希望它能够为因浏览器在 javascript 视口宽度和高度计算方面的不一致而感到沮丧的 web 开发人员提供安慰。
也许这对 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
【讨论】：
【讨论】：
请注意 CSS3 视口单位 (vh,vw) 在 iOS 上无法正常播放当您滚动页面时，视口大小会以某种方式重新计算，并且使用视口单位的元素的大小也会增加。所以，实际上需要一些 javascript。
【讨论】：
获取视口的宽度和高度：
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
页面大小调整事件：
$(window).resize(function() {
});
【讨论】：
innerWidth/innerHeight用起来更正确（覆盖缩放）。
DOCTYPE 声明，例如<!DOCTYPE html>.