iOS视口设置

时间:2011-01-11 13:28:56

标签: html css ipad ios

我正在构建一个特定于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),所以我在iOS模拟器上进行测试,它带有xcode - 但不应该有任何区别!

我一直在使用this

1 个答案:

答案 0 :(得分: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>