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

Question

我有一个应该响应的页面，并且还具有如下针对移动设备的视口标签。

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

但是，在Chrome开发者工具中，当页面首先以横向模式查看然后旋转到纵向模式时，即使html页面的宽度是旋转后设备的宽度（即400px），页面大小也会变得很小。如以下视频所示：Page being shrunk when device is rotated from landscape to portrait mode in Chrome tools

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

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

更新1

我还发现，这个问题不仅与Chrome Dev Tools模拟器有关，而且在诸如Android或iPhone智能手机之类的真实移动设备上也会发生。我在android智能手机（chrome）和iphone 6plus（Safari和chrome）上进行了验证

Answer 1

通过使用下面提供的代码段订阅JavaScript的toss=np.random.randint(0,2,len(x)) print(np.choose(toss,[x,y])) print(np.choose(toss,[y,x])) #[1 5 6] #[4 2 3] 事件，我可以解决此问题。

我在下面的代码中使用了jquery，将html和body的orientationchange设置为在旋转为纵向模式时隐藏，因为这种缩小仅在旋转至纵向模式时发生。

overflow-x