我正在构建一个特定于 iPad 的网络应用程序。目前，我正在尝试设置页面宽度和视口(viewport)设置以优化网站。
我想要实现的是让网络应用在横向和纵向模式下都占据全屏，无需用户缩放，内容左右两侧也没有空白区域。
我可以通过以下方式实现:
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
和
max-width:1024px;
min-width:768px;
然后，问题是为可变宽度编写我所有的 css。我真的更喜欢有一个单一的 css 宽度，这样我就可以正确地编码页面元素的宽度。
因此，如果我将 css 设置为具有单一宽度，我似乎无法正确设置视口(viewport)!当我使用这些设置纵向打开页面时:
<meta name="viewport" content="width=device-width,user-scalable=no" />
一切正常。当我将设备旋转到横向时，一切都很好。然后回到肖像是我遇到的问题。页面对于视口(viewport)来说太大了!我希望它仍然适合设备宽度!
看起来应该很容易吧!我错过了什么吗？我实际上没有 iPad(暂缺 v2)，所以我在 xcode 附带的 iOS 模拟器上进行测试 – 不过 应该 没有任何区别!
我一直在使用 this .
最佳答案
不确定这是否有帮助，但有一种方法可以检测旋转并执行操作。也许强制页面再次呈现或检查缩放比例。但是到目前为止我还没有在 iPad 上遇到过这个问题，你有我们可以在设备上测试的页面吗？
<body onorientationchange = "updateView();">
<script>
function updateView()
{
switch (window.orientation)
{
case 0: // Portrait
break;
case 90: ; // Landscape
break;
case -90: ; // Landscape counterclockwise
break;
}
}
</script>
关于html - iOS视口(viewport)设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4658129/