代码之家 › 专栏 › 技术社区 › Volomike nbk

使用jquery获取视区大小

viewport size resize jquery

302

Volomike nbk · 技术社区 · 16 年前

如何使用jquery确定浏览器视区的大小,以及在调整页面大小时重新检测它?我需要制作一个iframe大小到这个空间(每个边缘都有一点)。

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

8 回复 | 直到 8 年前

475

SimaWB 16 年前

要获取视区的宽度和高度:

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

调整页面大小事件:

$(window).resize(function() {

});

Vitalii Fedorenko 11 年前

你可以试试 viewport units (CSS3):

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

Browser support

gdoron 9 年前

1。回答主要问题

剧本 $(window).height() 工作正常(显示视区的高度,而不是显示滚动高度的文档),但需要在文档中正确放置doctype标记,例如这些doctype s:

对于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">

可能某些浏览器假定的默认doctype是这样的,即 $(window).height()。 获取文档的高度而不是浏览器的高度。有了doctype规范,这个问题得到了令人满意的解决,我相信您的PEPS将避免“将滚动溢出改为隐藏然后再改回”,这是一个有点肮脏的把戏,特别是如果您不把它记录在代码上以备将来的程序员使用。

2。附加提示,请注意: 此外,如果您正在编写一个脚本,您可以发明一些测试来帮助程序员使用您的库,让我来发明一些:

~~$(document).ready(函数()。{~~

      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的就绪事件中,因为正如他指出的那样,我们假设美元已经定义好了。感谢您指出这一点,如果您在脚本中使用它,请其他读者更正。我的建议是:在您的库中放置一个“install_script()”函数,它初始化库(在这个init函数中放置对$的任何引用,包括ready()的声明),在这个“install_script()”函数的开头,检查是否定义了$,但是要使所有内容独立于jquery,这样您的库就可以“诊断”当jquery尚未定义时。我更喜欢这种方法,而不是强制从cdn自动创建jquery。除了帮助其他程序员之外,这些都是很小的笔记。我认为制作库的人必须对潜在的程序员错误提供更丰富的反馈。例如,Google API需要一个备用手册来理解错误消息。这是荒谬的,需要外部文档来记录一些微小的错误,而这些错误不需要您去搜索手册或规范。图书馆必须是自我记录的。我编写代码,甚至考虑到六个月后可能犯下的错误,它仍然试图成为一个干净且不重复的代码,已经被编写来防止将来的开发人员错误。

forsvunnet 11 年前

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

当存在滚动条时,jquery没有任何功能来一致地检测正确的视区[1]的宽度和高度。

我找到了一个使用Modernizer库的解决方案,特别是用于打开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

AnuRaj 10 年前

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

D.A.H 12 年前

请注意,当您滚动页面时,css3视区单位(vh,vw)在iOS上不能很好地发挥作用,视区大小会以某种方式重新计算,使用视区单位的元素的大小也会增加。所以,实际上需要一些JavaScript。

SandroMarques 10 年前

获取视区大小的步骤负载以及在 调整大小 (基于Simawb响应):

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

getViewport();

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

-3

user2573644 12 年前

对于手机,请使用:

    screen.availWidth or screen.availHeight