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

【问题标题】：Why is Chrome shrinking the view in responsive mode?为什么 Chrome 在响应模式下缩小视图？
【发布时间】：2018-12-01 14:53:42
【问题描述】：

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

<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

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

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

更新 1

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

【问题讨论】：

如果手动输入大小或旋转回横向会怎样？
在“设备”旋转后进行刷新时会发生什么？它仍然缩放错误吗？
@Zak，刷新完成后，它完全适合宽度。
@Filip Š，如果我手动将 400px 更改为 402px，则视图不会发生任何变化，即它仍然缩小。
@Sunil -- 老实说，我认为这是 Chrome Dev 中的一个错误 -- 我刚刚用我正在开发的一个网站重新创建了这个问题，同样的事情正在发生。显然，无论是否有意，Chrome 在开发工具中旋转设备时都需要刷新。

标签： html google-chrome-devtools responsive

【解决方案1】：

我可以通过使用下面给出的代码 sn-p 订阅 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");
        }

}

【讨论】：