使用jQuery获取Viewport的大小

小开

最佳答案

要获得视口的宽度和高度:

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

页面大小调整事件:

$(window).resize(function() {


});

小开

你可以尝试窗口单位 (CSS3):

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

浏览器支持 .

小开

你可以使用$(window).resize()来检测视口是否被调整了大小。

当滚动条出现时，jQuery没有任何函数来一致地检测viewport[1]的正确宽度和高度。

我找到了一个解决方案，使用Modernizr库，特别是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>');

你可以使用$(window).width()和$(window).height()来获得一个数字，这个数字在某些浏览器中是正确的，但在其他浏览器中是错误的。在这些浏览器中，你可以尝试使用window。innerWidth和window。innerHeight来获得正确的宽度和高度，但我建议反对这种方法，因为它将依赖于用户代理嗅探。

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

$(window).width()和window. width()使用同一浏览器的不同操作系统的innerWidth不同。看到:https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238 < / p >

小开

请注意，CSS3视口单位(vh,vw)在iOS上不能很好地发挥，当你滚动页面时，视口大小以某种方式重新计算，使用视口单位的元素的大小也会增加。这里需要一些javascript。

小开

1. 回答主要问题

$(window).height()脚本工作得很好(显示视口的高度，而不是滚动高度的文档)，但它需要你在文档中正确地放入doctype标签，例如这些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规范，这个问题就得到了满意的解决，我敢肯定你们将避免“将scroll-overflow更改为隐藏，然后再返回”的问题，对不起，这是一个有点肮脏的技巧，特别是如果您没有在代码中记录它以供将来的程序员使用的话。

<强> 2。另外，请注意: 此外，如果你正在编写一个脚本，你可以发明一些测试来帮助程序员使用你的库，让我发明几个:

~~$(文档)时函数(){~~

      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。这些都是帮助其他程序员的小注释。我认为开发程序库的人一定对潜在程序员的错误有更丰富的反馈。例如，谷歌api需要一个备用手册来理解错误消息。这是荒谬的，为了一些小错误而需要外部文档，而不需要你去搜索手册或规范。库必须是自文档化的。我编写的代码甚至要考虑到我可能在六个月后犯的错误，它仍然试图是一个干净的、不重复的代码，已经编写好以防止未来开发人员的错误

小开

要获取负载和调整上的视口大小(基于SimaWB响应):

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