设备旋转时Bootstrap响应式CSS和/或视口问题/错误

Question

我目前的网站http://www.peterfox.me存在问题，用手机设备（iPhone，Nexus 4）查看时，旋转屏幕似乎会破坏body/html的大小， 这是Bootstrap响应式CSS的bug吗？还是我网站的关键问题？或者只是移动浏览器的一般问题？

通常的症状是从竖屏切换到横屏或从横屏旋转到竖屏时，页面显示似乎仍处于横向比例的宽度，实际上它在纵向时会留下空白，请参见旋转前截图和旋转后截图以更好地理解。

- Peter Fox

Answer 1

您的meta viewport应该像这样：

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

尝试从您的meta标签中删除额外的属性。

- user1537415

---

不，我已经实施了这个方法，但问题仍然存在。谢谢你的建议，它可能与此有关。 - Peter Fox

这让我找到了解决方案，因为@Sly的overflow-x没有改变问题（iPad 4，iOS 6.1，Safari和Cordova 3.0都是如此）。我的viewport meta还包括"user-scalable=no"和"height=device-height"。一旦我删除了高度，它就起作用了（我保留了user-scalble以获得更快的点击速度）。 - Collierton

@JeffCollier 如果你真的想要，你可以使用user-scalable=no，但我并不是很推荐。一些用户可能无法在没有缩放的情况下看到内容。 - user1537415

Answer 2

最终我用以下方法解决了问题：

html, body {
    overflow-x: hidden;
}

- Peter Fox