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

Question

我有一个应该具有响应性的页面，它还有一个用于移动设备的视口标签，如下所示。

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

但是，在 Chrome Dev Tools 中，当页面首先以横向模式查看，然后旋转到纵向模式时，即使 html 页面的宽度是旋转后设备的宽度，即 400px，页面尺寸也会变得非常小。这显示在以下视频中：在 Chrome 工具中将设备从横向模式旋转到纵向模式时页面缩小

缩小页面截图如下。可见主体的宽度为400px，但没有延伸到屏幕截图的右边缘。

问题：为什么即使包含正确的视口标签也会发生这种情况？可能是 Chrome 工具模拟器错误/问题。

更新 1

我还发现这个问题不仅发生在 Chrome Dev Tools 模拟器上，而且也发生在真正的移动设备上，比如 android 或 iphone 智能手机。我在 android 智能手机（chrome）和 iphone 6plus（safari 和 chrome）上验证了这一点

Answer 1

我在使用 Bootstrap 构建的网站上遇到了同样的问题。横向视图和返回纵向视图后出现同样的问题（仅适用于 Google Chrome）。经过几次搜索后我修复了它。我将元声明更改为：

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

到

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

之后，我将所有内容封装在 a 中div，并使用以下 CSS 代码：

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

希望这个修复会有所帮助！

Answer 2

我可以通过orientationchange使用下面给出的代码片段订阅 JavaScript 事件来解决这个问题。

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

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

}