首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用jQuery获取视区大小

使用jQuery获取视区大小
EN

Stack Overflow用户
提问于 2010-06-15 19:11:14
回答 5查看 291K关注 0票数 311

如何使用jQuery确定浏览器视区的大小,并在调整页面大小时重新检测该大小?我需要使IFRAME大小到这个空间(在每个页边距进来一点)。

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

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2010-06-15 19:17:35

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

代码语言:javascript
复制
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

页面的调整大小事件:

代码语言:javascript
复制
$(window).resize(function() {

});
票数 490
EN

Stack Overflow用户

发布于 2013-05-27 08:26:41

您可以尝试viewport units (CSS3):

代码语言:javascript
复制
div { 
  height: 95vh; 
  width: 95vw; 
}

Browser support

票数 39
EN

Stack Overflow用户

发布于 2013-08-26 15:02:46

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

当存在滚动条时,jQuery没有任何功能来持续检测viewport1的正确宽度和高度。

我找到了一个解决方案,它使用了现代化库,特别是mq函数,它可以打开对javascript的媒体查询。

以下是我的解决方案:

代码语言: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%的视口宽度,两边都有边距,但我希望它能为for开发人员提供安慰,让他们对javascript视口宽度和高度计算的浏览器不连贯感到沮丧。

也许这可以对iframe有所帮助:

代码语言:javascript
复制
$('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

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3044573

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档