gpt4 book ai didi

JQuery Mobile 100% 高度页面,等于可见区域

转载 作者:可可西里 更新时间:2023-11-01 14:56:01 25 4
gpt4 key购买 nike

我在处理 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/

最佳答案

移除

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

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

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

关于JQuery Mobile 100% 高度页面,等于可见区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8520238/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com