为什么Chrome在响应模式下缩小视图？

Question

我有一个页面，应该是响应，它也有一个视窗标签的移动设备如下所示。

<meta name="viewport" content="width=device-width, initial-scale=1.0,
                                 maximum-scale=1.0, user-scalable=no">

然而，在Chrome工具中，当页面首先以横向模式查看，然后旋转到纵向模式时，页面大小变得非常小，尽管html页面的宽度是旋转后设备的宽度，即400 of。这在以下视频中显示：在Chrome工具中，当设备从横向旋转到纵向模式时，页面被缩小

缩小页面的屏幕截图是因为可见体的below.The宽度是400 to，但它没有延伸到屏幕截图的右侧。

问:为什么即使包含了正确的viewport标记，也会发生这种情况？可能是Chrome工具模拟器的错误/问题。

更新1

我还发现，这个问题不仅发生在Chrome工具模拟器上，而且也发生在真正的移动设备上，比如android或iphone智能手机。我在android智能手机(chrome)和iPhone6plus( safari以及chrome)上验证了这一点。

​

​

Answer 1

我能够通过订阅JavaScript的orientationchange事件来解决这个问题，方法是使用下面给出的代码片段。

我在下面的代码中使用jquery将html和body的overflow-x设置为在旋转到纵向模式时隐藏的，因为这种收缩只有在旋转到纵向模式时才会发生。

window.onorientationchange = function() { 

       let htmlElement =  $("html");
       let bodyElement = $("body");

       if($(window).innerWidth() < $(window).innerHeight()) {//landscape to portrait
           htmlElement.css("overflow-x","hidden");
           bodyElement.css("overflow-x", "hidden");
        } else {//portrait to landscape
           htmlElement.css("overflow","auto");
           bodyElement.css("overflow", "auto");
           //below 2 lines makes the UI not shrink in portrait mode 
           htmlElement.css("overflow-x","auto");
           bodyElement.css("overflow-x", "auto");
        }

}

Answer 2

在我的网站上，我也遇到了同样的问题。同样的问题后，景观视图，并回到肖像(仅与谷歌Chrome)。我经过几次搜索就修好了。我将元声明更改为：

<meta name="viewport" content="width=device-width, initial-scale=1">

至

<meta name="viewport" content="width=device-width, minimum-scale=1">

之后，我用下面的CSS代码将所有内容包装在一个div中：

div#wrap { 
    overflow-x : hidden;
    position:relative;
    width:100%;
}

希望这个解决办法会有帮助！