获取浏览器宽度无法缩放

Question

我正在使用全屏布局的网站上工作。当我缩小时，我希望保持布局相同并缩小所有内容。

我需要将页面容器的最大宽度设置为浏览器宽度（不考虑缩放）

我认为这很容易：

function zoomify(){

    var htmlDocWidth = $( window ).width();

    $('.page-wrap').css( 'max-width',htmlDocWidth );

};

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

zoomify();

但是$（window）.width（）似乎根据缩放而改变。有没有办法获得用户浏览器窗口的宽度而不考虑缩放？

Answer 1

您可以使用：

$('.page-wrap').css( 'max-width','100vw' );

此处vw是一个单位，表示width的{​​{1}}，您可以使用viewport的高度。

Answer 2

想出来

function zoomify(){

    var htmlDocWidth = window.outerWidth;

    $('.page-wrap').css( 'max-width',htmlDocWidth );

};

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

zoomify();