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

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

浏览器支持

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

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

页面大小调整事件:

$(window).resize(function() {

});

你可以使用$(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

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

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

浏览器支持

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

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

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

getViewport();

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