我在处理 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>
最佳答案
移除
.ui-page{
min-height: 100% !important;
}
JQueryMobile 计算必要的高度并为页面设置 Min-Height 样式以确保它填满整个页面。
您会注意到，在 iPhone 上的 Safari 中(删除最小高度后)，您会得到一个轻微的过度滚动，这将隐藏您的“向上滚动”文本。我相信 JQueryMobile 正在根据屏幕尺寸计算最小高度。这样，如果保存到 iPhone 的主屏幕(没有 Safari 工具栏、页眉或页脚)，您的页面仍会填满屏幕。
关于JQuery Mobile 100% 高度页面，等于可见区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8520238/