Javascript 方向改变，在iphone浏览器中留下空白_Javascript_Iphone_Html_Mobile Website_Screen Orientation

Javascript 方向改变，在iphone浏览器中留下空白

javascript iphone html

Javascript 方向改变，在iphone浏览器中留下空白,javascript,iphone,html,mobile-website,screen-orientation,Javascript,Iphone,Html,Mobile Website,Screen Orientation,我有下面这样的简单代码 <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

我有下面这样的简单代码

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


JSP页面
函数fun（）{
警报（窗口方向）；
}
你好，世界！

我正在Iphone上测试这段代码

案例1：Iphone是人像，一旦我点击按钮，警报就会出现。现在浏览器中的显示将具有100%的宽度（例如320px）。现在换成景观。仍然显示相同的320px。它不会覆盖整个空间（比如480px）。右边有一些空白。但我需要100%（到480px）。一旦我们点击警报的OK按钮，它将覆盖到480px

案例2：从横向到纵向都是一样的，但差距将出现在底部

我如何解决这个问题

我们如何在纵向和横向上都覆盖100%的宽度，并对此保持警惕

JavaScript的alert（）是否会阻止浏览器的所有事件或UI状态

帮我做这件事。非常感谢。

如果你只关心iOS

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

效果很好。你在iOS中遇到的问题是黑莓和安卓使用这种方法会发生什么