关于设备旋转的Bootstrap响应css和/或视口问题/错误

Pet*_*Fox 2 css rotation mobile-website responsive-design twitter-bootstrap

我目前在我的网站http://www.peterfox.me中遇到了问题,当用移动设备查看它时,(iPhone,Nexus 4)旋转屏幕似乎搞砸了身体/ html的大小,这是Bootstrap响应式CSS中的一个错误吗?或者这是我网站的一个关键问题?甚至只是移动浏览器的一般问题?

症状通常是你从画像到风景或从风景开始旋转到画像离开页面被视为好像它仍然是景观比例的宽度,实际上它是在纵向留下间隙,请看旋转前的屏幕截图屏幕旋转拍摄后,为了更好的理解.

小智 9

您的元视口应该是这样的:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Run Code Online (Sandbox Code Playgroud)

尝试从元标记中删除额外的属性.


Pet*_*Fox 5

最后修复了它

html, body {
    overflow-x: hidden;
}
Run Code Online (Sandbox Code Playgroud)