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

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

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

然而，在 Chrome 开发工具中，当页面首先以横向模式查看然后旋转到纵向模式时，即使 html 页面的宽度是旋转后设备的宽度（即 400px），页面尺寸也会变得非常小。这在以下视频中显示：当设备在 Chrome 工具中从横向模式旋转到纵向模式时，页面会缩小 https://www.screencast.com/t/XbvfMJA8xg

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

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

UPDATE 1

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

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

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

to

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

之后我将所有内容包装在一个div使用以下 CSS 代码：

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

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