使用jQuery获取视口的大小
如何使用jQuery来确定浏览器视口的大小，并在页面resize时重新检测此页面？ 我需要在这个空间中放入一个IFRAME大小（每个边距稍微有一点）。
对于那些不知道的人来说，浏览器视口不是文档/页面的大小。 这是滚动前窗口的可见大小。
要获取视口的宽度和高度，请执行以下操作：
var viewportWidth = $(window).width(); var viewportHeight = $(window).height(); 调整页面的大小事件：
$(window).resize(function() { });
您可以尝试视口单位 （CSS3）：
div { height: 95vh; width: 95vw; }
浏览器支持
1.回答主要问题
脚本$(window).height()可以很好地工作（显示视口的高度，而不是滚动高度的文档），但是它需要你正确地在文档中inputdoctype标签，例如这些文档types：
对于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">
可能某些浏览器默认的文档types是这样的， $(window).height()取文档的高度而不是浏览器的高度。 使用doctype规范，它是令人满意的解决，我敢肯定你peps将避免“变化的滚动溢出隐藏然后回来”，这是对不起，有点肮脏的把戏，特别是如果你不'将其logging在未来程序员使用的代码上。
2.另外一个提示，不要说：另外，如果你正在做一个脚本，你可以发明testing来帮助程序员使用你的库，让我发明一对：
$（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），是UTTERLY正确的：$的检查不能在JQuery的准备事件，因为正如他指出的那样，我们假设$已经被定义了。 感谢您指出这一点，如果您在脚本中使用它，请确保您的其他读者更正此问题。 我的build议是：在你的图书馆里放一个“install_script（）”函数来初始化这个库（在这个init函数里面包含任何对$的引用，包括ready（）的声明）以及这样的“install_script（）”函数的初始化，检查是否定义了$，但是使得所有的东西都独立于JQuery，所以当JQuery还没有定义时，你的库可以“自我诊断”。 我更喜欢这种方法，而不是强制自动创build一个JQuery使它从一个CDN。 除了帮助其他程序员之外，这些只是一些小小的logging。 我认为，制作图书馆的人必须对潜在的程序员的错误反馈更丰富。 例如，Google Apis需要一个旁边的手册来了解错误信息。 这是荒谬的，需要外部文件来处理一些不需要你去search手册或规范的小错误。 图书馆必须是自我certificate的。 我写代码甚至考虑到了我可能会在六个月之后犯下的错误，而且它仍然试图成为一个干净的，不重复的代码，已经写成了防止未来的开发人员的错误。
您可以使用$（window）.resize（）来检测视口是否resize。
当存在滚动条时，jQuery没有任何function来始终如一地检测视口的正确宽度和高度[1]。
我find了一个使用Modernizr库的解决scheme，特别是为javascript打开媒体查询的mq函数。
这是我的解决scheme：
// 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 viewport的宽度和高度的计算。
也许这可能有助于关于iframe：
$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');
[1]您可以使用$（window）.width（）和$（window）.height（）来获取在某些浏览器中正确的数字，但在其他浏览器中则是正确的。 在这些浏览器中，你可以尝试使用window.innerWidth和window.innerHeight来获得正确的宽度和高度，但我会build议对这种方法，因为它会依赖于用户代理嗅探。
通常，不同的浏览器是否将滚动条作为窗口宽度和高度的一部分包含在内，是不一致的。
注意：$（window）.width（）和window.innerWidth在使用相同浏览器的操作系统之间有所不同。 参见： https ： //github.com/eddiemachado/bones/issues/468#issuecomment-23626238
请注意CSS3视口单位（vh，vw）在iOS上不能很好的运行当你滚动页面时，视口大小以某种方式被重新计算，并且你使用视口单位的元素大小也会增加。 所以，实际上一些JavaScript是必需的。
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); });
获取加载和调整大小的视口大小 （基于SimaWB响应）：
function getViewport() { var viewportWidth = $(window).width(); var viewportHeight = $(window).height(); $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px'); } getViewport(); $(window).resize(function() { getViewport() });
对于手机，请使用：
screen.availWidth or screen.availHeight
