使用jQuery获取视口大小


307

如何使用jQuery确定浏览器视口的大小,并在调整页面大小后重新检测到它?我需要在该空间中放入一个IFRAME大小(每个边距都略有间隔)。

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


知道如何获得设备屏幕上可见的区域,而不只是它可以滚动到的区域吗?我看到$(window).height()返回文档的整个宽度,而不是缩放到的部分。我想知道应用缩放后可以看到多少。
Frank Schwieterman


1
这不是问题的直接答案,但对于那些想要根据选择器相对于视口的位置和可见性操纵选择器的人而言,它很方便:appelsiini.net/projects/viewport(插件)
WallaceSidhrée2012年

Answers:


483

获取视口的宽度和高度:

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

调整页面大小的事件:

$(window).resize(function() {

});

18
我在Windows IE6,IE8,FF3.6.3,Google Chrome 5.0.375.70,Opera 10.53和Safari 5.0(7533.16)上进行了测试。这在所有这些方面都始终如一。我还在Ubuntu上测试了FF3.6.3,它也在那里工作。我认为我将jQuery 1.3与WordPress 2.9.2结合使用,这是我需要它工作的地方。
Volomike 2010年

48
知道如何获得设备屏幕上可见的区域,而不只是它可以滚动到的区域吗?我看到$(window).height()返回文档的整个宽度,而不是缩放到的部分。我想知道应用缩放后可以看到多少。
Frank Schwieterman

9
实际上,innerWidth/ innerHeight更正确地使用(覆盖缩放)。

18
@FrankSchwieterman也许您的浏览器没有按照您想要的方式运行:也许您遇到了这个问题:stackoverflow.com/q/12103208/923560。确保您的HTML文件包含正确的DOCTYPE声明,例如<!DOCTYPE html>
Abdull

21
这是完全错误的。这将为您提供文档的大小,而不是视口(文档上的窗口的大小)。
Mike Bethany 2014年


26

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规范,可以令人满意地解决该问题,并且我敢肯定,您会避免使用“将滚动溢出更改为隐藏然后再返回”的方法,这很抱歉,这是一个肮脏的把戏,特别是如果您不这样做,将其记录在代码上,以备将来程序员使用。

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 Apis需要一本备用手册来理解错误消息。这是荒谬的,需要外部文档来解决一些小错误,这些小错误不需要您去搜索手册或规范。该库必须是自存档的。我编写代码甚至是为了照顾甚至六个月后可能会犯的错误,而且它仍然试图成为干净且不重复的代码,已经写成可以防止将来的开发者错误。我认为制作库的人必须对潜在的程序员错误提供更丰富的反馈。例如,Google Apis需要一本备用手册来理解错误消息。这是荒谬的,需要外部文档来解决一些小错误,这些小错误不需要您去搜索手册或规范。该库必须是自存档的。我编写代码甚至是为了照顾甚至六个月后可能会犯的错误,而且它仍然试图成为干净且不重复的代码,已经写成可以防止将来的开发者错误。我认为制作库的人必须对潜在的程序员错误提供更丰富的反馈。例如,Google Apis需要一本备用手册来理解错误消息。这是荒谬的,需要外部文档来解决一些小错误,这些小错误不需要您去搜索手册或规范。该库必须是自存档的。我编写代码甚至是为了照顾甚至六个月后可能会犯的错误,而且它仍然试图成为干净且不重复的代码,已经写成可以防止将来的开发者错误。不需要您去搜索手册或规格。该库必须是自存档的。我编写代码甚至是为了照顾甚至六个月后可能会犯的错误,而且它仍然试图成为干净且不重复的代码,已经写成可以防止将来的开发者错误。不需要您去搜索手册或规格。该库必须是自存档的。我编写代码甚至是为了照顾甚至六个月后可能会犯的错误,而且它仍然试图成为干净且不重复的代码,已经写成可以防止将来的开发者错误。


2
阅读您的帖子非常困难。请重做您的帖子,以便您像其他所有人一样习惯StackExchange Markdown。有一个为什么StackExchange网站不使用TinyMCE的原因,但是,如果您对此有所了解,请参与Meta
Volomike 2014年

$在您已经使用过$调用之后,检查可用性是否有些奇怪$(document).ready(function() { } );。如果您检查jQuery是否可用,那将是很好的选择,但现在已经为时已晚。
Machiel 2014年

@Machiel,您完全正确。幸运的是,我只是去检查了我的脚本,它们没有使用ready事件。是的,谢谢,您这么说时我感到很愚蠢,但是幸运的是,我刚刚检查了脚本中的检查是否位于名为“ install_this_script()”的函数内,在这种安装中,我调用了库的init函数,但是在此之前,我检查(OUTSIDE JQUERY)是否定义了$对象。不管怎么说,兄弟,你真的吓到我了!恐怕这篇文章在这里太长了,我希望这个错误不会对其他读者造成太大的伤害。我更正了帖子。
David L

这应该是真正的答案!谢谢!
贾斯汀·瓦茨

6

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

当存在滚动条时,jQuery没有任何功能可以一致地正确检测视口[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>');

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

通常,不同的浏览器对于它们是否将滚动条作为窗口宽度和高度的一部分不一致。

注意:$(window).width()和window.innerWidth在使用同一浏览器的操作系统之间都不同。参见:https : //github.com/eddiemachado/bones/issues/468#issuecomment-23626238


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

使用$(window).height()不会为您提供视口大小,而将为您提供整个窗口的大小,尽管整个文档可能更大,但通常是整个文档的大小。
AnuRaj

宽度很棒!
Marc

2

要在加载调整大小时获得视口的大小(基于SimaWB响应):

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

getViewport();

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

1

请注意,CSS3视口单位(vh,vw)在iOS上无法正常播放。滚动页面时,将以某种方式重新计算视口大小,并且使用视口单位的元素的大小也会增加。因此,实际上需要一些JavaScript。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.