使用jQuery获取Viewport的大小

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (8)
  • 关注 (0)
  • 查看 (610)

如何使用jQuery来确定浏览器视图的大小,并在调整页面大小时重新检测这一点?我需要将IFRAME大小放入这个空间(在每个边距中都有少许)。

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

提问于
用户回答回答于

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

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

调整页面大小的事件:

$(window).resize(function() {

});
用户回答回答于

对于移动设备,请使用:

    screen.availWidth or screen.availHeight
用户回答回答于

负载调整大小(基于SimaWB响应)上获得viewport的大小:

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);
    });
用户回答回答于

请注意,当您滚动页面时,CSS3 viewport单元(vh,vw)在iOS中不能很好地发挥作用,viewport大小会重新计算,而使用viewport单元的元素的大小也会增加。所以,实际上需要一些javascript。

用户回答回答于

您可以使用$(window).resize()来检测是否调整了viewport。

当存在滚动条时,jQuery没有任何函数来一致地检测视图[1]的正确宽度和高度。

我找到了一个解决方案,它使用了Modernizr库,特别是为 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()来获得一个在某些浏览器中正确的数字,但在其他浏览器中是不正确的。在那些浏览器中,你可以尝试使用窗口。innerWidth和窗口。内部高度可以得到正确的宽度和高度,但是我建议使用这种方法,因为它依赖于用户代理的嗅探。

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

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

用户回答回答于

1.对主要问题的答复

脚本$(window).height()运行良好(显示视区的高度,而不是具有滚动高度的文档),但它需要在文档中正确地放置doctype标记,例如,以下doctype:

对于HTML 5:

<!DOCTYPE html>

过渡时期HTML 4:

<!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.另一项建议,请注意:此外,如果您正在编写一个脚本,您可以发明一些测试来帮助程序员使用您的库,让我发明几个:

      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。这些都是帮助其他程序员的小笔记。我认为,建立库的人必须更加丰富的反馈潜在的程序员的错误。例如,GoogleApis需要一个备用手册来理解错误信息。这是荒谬的,需要外部文档来处理一些不需要你去搜索手册或规范的小错误。必须对库进行自记录。我编写的代码甚至包括了我在六个月后可能犯的错误,而且它仍然试图成为一个干净的,而不是重复的代码,已经写到防止未来开发人员的错误。

用户回答回答于

扫码关注云+社区

领取腾讯云代金券