我如何使用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);
    });

其他回答

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

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

页面大小调整事件:

$(window).resize(function() {

});

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

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

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

浏览器支持

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

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

getViewport();

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

1. 回答主要问题

脚本$(window).height()工作得很好(显示视口的高度,而不是滚动高度的文档),但它需要你在你的文档中正确地放置doctype标签,例如这些doctype:

对于HTML 5:

< !DOCTYPE html >

对于过渡的HTML4:

< !公共html DOCTYPE >

可能一些浏览器默认的文档类型是这样的,$(window).height()接受文档的高度而不是浏览器的高度。有了doctype规范,这个问题就得到了满意的解决,我敢肯定你们将避免“将scroll-overflow更改为隐藏,然后再返回”的问题,对不起,这是一个有点肮脏的技巧,特别是如果您没有在代码中记录它以供将来的程序员使用的话。

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

});


EDIT: about the part 2, "An ADDITIONAL tip, note aside": @Machiel, in yesterday's comment (2014-09-04), was UTTERLY right: the check of the $ can not be inside the ready event of Jquery, because we are, as he pointed out, assuming $ is already defined. THANKS FOR POINTING THAT OUT, and do please the rest of you readers correct this, if you used it in your scripts. My suggestion is: in your libraries put an "install_script()" function which initializes the library (put any reference to $ inside such init function, including the declaration of ready()) and AT THE BEGINNING of such "install_script()" function, check if the $ is defined, but make everything independent of JQuery, so your library can "diagnose itself" when JQuery is not yet defined. I prefer this method rather than forcing the automatic creation of a JQuery bringing it from a CDN. Those are tiny notes aside for helping out other programmers. I think that people who make libraries must be richer in the feedback to potential programmer's mistakes. For example, Google Apis need an aside manual to understand the error messages. That's absurd, to need external documentation for some tiny mistakes that don't need you to go and search a manual or a specification. The library must be SELF-DOCUMENTED. I write code even taking care of the mistakes I might commit even six months from now, and it still tries to be a clean and not-repetitive code, already-written-to-prevent-future-developer-mistakes.