为什么 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。这显示在以下视频中：Page being shrunk when device is rotated from landscape to portrait mode in Chrome tools

缩小页面的屏幕截图为below.The可见主体的宽度为400px，但未延伸到屏幕截图的右边缘。

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

更新 1

我还发现这个问题不仅出现在 Chrome Dev Tools 模拟器上，而且还发生在 android 或 iphone smart phones 等真实移动设备上。我在 android smart phone (chrome) 和 iphone 6plus ( safari 以及 chrome)

上验证了这一点

Answer 1

我使用下面给出的代码片段订阅了 JavaScript 的 orientationchange 事件，从而解决了这个问题。

我在下面的代码中使用 jquery 将 html 的 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");
        }

}

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

Why is Chrome shrinking the view in responsive mode?

html

google-chrome-devtools

responsive