iOS 视口设置
Posted
技术标签:
【中文标题】iOS 视口设置【英文标题】：iOS viewport settings 【发布时间】：2011-01-11 13:28:56 【问题描述】：我正在构建一个特定于 iPad 的网络应用程序。目前，我正在尝试设置页面宽度和视口设置以优化网站。
我想要实现的是让网络应用程序在横向和纵向模式下占据全屏，而无需用户缩放，并且内容的左侧和右侧没有空白区域。
我可以通过以下方式实现：
<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 设置为单一宽度，我似乎无法正确设置视口！当我使用这些设置纵向打开页面时：
<meta name="viewport" content="width=device-width,user-scalable=no" />
一切正常。当我将设备旋转到横向时，一切都很好。回到肖像然后是我遇到问题的地方。页面对于视口来说太大了！我希望它仍然适合设备宽度！
看起来应该很简单！我错过了什么吗？我实际上没有 iPad（支持 v2），所以我在 xcode 附带的 ios 模拟器上进行测试——尽管不应该有任何区别！
我一直在使用this。
【问题讨论】：
【参考方案1】：不确定这是否有帮助，但有一种方法可以检测旋转并执行操作。可能会强制页面重新渲染或检查缩放。不过目前为止我在 iPad 上还没有遇到过这个问题，你们有我们可以在设备上测试的页面吗？
<body onorientationchange = "updateView();">
<script>
function updateView()
switch (window.orientation)
case 0: // Portrait
break;
case 90: ; // Landscape
break;
case -90: ; // Landscape counterclockwise
break;
</script>
【讨论】：
提醒一下，根据我的经验，“倒置”（主页按钮向上）纵向的 iOS 设备报告“180”，您可能需要添加这种情况。以上是关于iOS 视口设置的主要内容，如果未能解决你的问题，请参考以下文章