html - 为什么 Chrome 在响应模式下缩小 View ？

Question

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

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

然而，在 Chrome 开发工具中，当页面第一次以横向模式查看然后旋转到纵向模式时，页面大小会变得非常小，即使 html 页面的宽度是旋转后设备的宽度，即 400 像素。这显示在以下视频中: Page being shrunk when device is rotated from landscape to portrait mode in Chrome tools

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

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

更新 1

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

Answer 1

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

我在下面的代码中使用 jquery 来设置 overflow-x旋转到纵向模式时隐藏 html 和 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");
        }

}