jQuery mobile 100% 高度页面，等于可见区域答案

【问题标题】：JQuery mobile 100% height page, which equals visible areajQuery mobile 100% 高度页面，等于可见区域
【发布时间】：2012-01-21 03:47:02
【问题描述】：

我在处理 iphone 上的网站高度时遇到问题。以下设置在所有其他设备（ipad、android 手机）上运行良好，但在 iphone 设备上，在 url 栏消失并且页面底部可见空白区域后，站点高度不会更新。

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

【问题讨论】：

标签： jquery iphone html css jquery-mobile

【解决方案1】：

删除

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

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

您会注意到，在 Safari 中的 iPhone 上（移除最小高度后），您会看到轻微的过度滚动，这将隐藏您的“向上滚动”文本。我相信 JQueryMobile 正在根据屏幕尺寸计算最小高度。这样，如果保存到 iphone 的主屏幕（没有 safari 工具栏、页眉或页脚），您的页面仍然会填满屏幕。

【讨论】：

【解决方案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;">

它对我有用。

【讨论】：

对不起，没有为我工作。 iPhone 上还是一样的问题。

【解决方案3】：

尝试设置 webView 原生属性：

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

这对我有用。

【讨论】：

嗯，你说的语言不对；）