方向更改在 iphone 浏览器中提供空白空间答案

【问题标题】：Orientation change giving blank space in iphone browser方向更改在 iphone 浏览器中提供空白空间
【发布时间】：2011-06-17 14:17:43
【问题描述】：

我有如下简单的代码

<html>
<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JSP Page</title>

    <script type="text/javascript">
            function fun(){
                alert(window.orientation);
            }
    </script>

</head>
<body>
    <div style="background-color: yellow;padding: 20px ">Hello World!</div>
    <input type="button" onclick="fun()" value="Hit Me" />
</body>

我正在 Iphone 中测试此代码。

案例 1：Iphone 是纵向的，一旦我点击按钮就会出现警报。现在浏览器中的礼物将有 100% 的宽度（比如 320 像素）。现在将其更改为横向。仍然显示相同的 320 像素。它不会覆盖整个空间（比如 480px ）。它在右边有一些空白区域。但我需要 100%（到 480px）。一旦我们点击警报的OK按钮，它将覆盖到480px。

案例 2：从横向到纵向相同，但间隙将出现在底部。

我该如何解决这个问题？

我们如何在纵向和横向中将宽度覆盖到 100% 并带有警报？

JavaScript 的 alert() 会阻塞浏览器的所有事件或 UI 状态吗？

在这方面帮助我。非常感谢。

【问题讨论】：

标签： javascript iphone html mobile-website screen-orientation

【解决方案1】：

如果你只关心 iOS……

<meta name="viewport" content="width=device-width, user-scalable=no" />

效果很好。不过，您在 iOS 中遇到的问题是 BlackBerry 和 Android 使用这种方法会发生什么。

【讨论】：