iOS视口设置

Question

iOS视口设置

3

我正在构建一个专为iPad设计的Web应用程序。目前，我正在尝试设置页面宽度和视口设置以优化该网站。

我的目标是在横屏和竖屏模式下，使Web应用程序占据整个屏幕，而不需要用户缩放，并且内容左右两侧没有空白区域。

我可以通过以下方式实现这一目标：

<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。

- Brad

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter Witham · Accepted Answer

不确定这是否有所帮助，但是您可以检测旋转并执行操作的方法。也许可以强制页面重新渲染或检查缩放。然而，到目前为止我在iPad上还没有遇到过这个问题，您是否有一个我们可以在设备上测试的页面？

<body onorientationchange = "updateView();">

<script>
    function updateView()
    {
        switch (window.orientation)
        {
            case 0: // Portrait
                break;
            case 90: ; // Landscape
                break;
            case -90: ; // Landscape counterclockwise
                break;
        }
    }
</script>