jQuery mobile 100% 高度页面,等于可见区域
Posted
技术标签:
【中文标题】jQuery mobile 100% 高度页面,等于可见区域【英文标题】:JQuery mobile 100% height page, which equals visible area 【发布时间】: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/
【问题讨论】:
【参考方案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)];
这对我有用。
【讨论】:
嗯,你说的语言不对;)以上是关于jQuery mobile 100% 高度页面,等于可见区域的主要内容,如果未能解决你的问题,请参考以下文章
Jquery mobile 1.4.5 可以设置面板高度吗?
iPhone Web 应用程序的 jQuery Mobile 高度问题,假设页面高度为 480 而不是 460
想用jQuery mobile js 做网页的自适应大小宽度的改变,就是当网页宽度变小时页面还是显示的原来所有内容