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):

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

浏览器支持

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

当滚动条出现时，jQuery没有任何函数来一致地检测viewport[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>');

你可以使用$(window).width()和$(window).height()来获得一个数字，这个数字在某些浏览器中是正确的，但在其他浏览器中是错误的。在这些浏览器中，你可以尝试使用window。innerWidth和window。innerHeight来获得正确的宽度和高度，但我建议反对这种方法，因为它将依赖于用户代理嗅探。

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

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

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.

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

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

页面大小调整事件:

$(window).resize(function() {

});

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