Question

我在处理iphone上的网站高度时遇到问题。以下设置在所有其他设备（ipad，Android手机）上运行良好，但在iphone设备上，网址栏消失后，网站高度不会更新，页面底部会显示空白区域。 / p>

<!DOCTYPE html> 
<html> 
    <head>
        <title>temp</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

        <style type="text/css">
            .ui-page{
                min-height: 100% !important;
            }
        </style>    
    </head> 

    <body> 
        <div data-role="page" id="loadscreen" data-theme='c'>
            <div data-role="content">
                <div>
                    <a href="#" onClick="window.scrollTo(0, 1)">Scroll Up</a>
                </div>
            </div><!-- /content -->
        </div><!-- /page -->
    </body>
</html>

网站：http://jsfiddle.net/hb8NH/2/

Answer 1

删除

.ui-page{
    min-height: 100% !important;
}

JQueryMobile计算必要的高度并将Min-Height样式设置为Page以确保它填满整个页面。

你会注意到在Safari中的iPhone上（删除最小高度后），你会得到一个略微过度的滚动，这将隐藏你的“向上滚动”文本。 JQueryMobile根据我认为的屏幕尺寸计算最小高度。这样，如果保存到iPhone的主屏幕（没有Safari工具栏，页眉或页脚），您的页面仍将填满屏幕。

Answer 2

尝试更改以下内容

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

要

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

这对我来说很有用。

Answer 3

尝试设置webView本机属性：

    // fix orientation issue
 [webView setAutoresizingMask:(UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth)];

这对我有用。

JQuery移动100％高度页面，等于可见区域

3 个答案: