使用jQuery获取Viewport的大小

我如何使用jQuery来确定浏览器视口的大小，并重新检测这如果页面是调整大小?我需要在这个空间中添加一个IFRAME大小(在每个边缘处都有一点)。

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

当前回答

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

2016-06-10 09:43:32

其他回答

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

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

getViewport();

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

2016-06-08 08:50:09

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

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

页面大小调整事件:

$(window).resize(function() {

});

2010-06-15 11:17:35

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

2013-09-19 23:19:09

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

2016-06-10 09:43:32

你可以尝试视口单元(CSS3):

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

浏览器支持

2013-05-27 00:26:40

使用jQuery获取Viewport的大小

推荐文章

最新文章

标签