[英]Incorrect page height in jQuery Mobile
I'm developing a web application using jQuery Mobile 1.2.0 and the page height is being calculated correctly on iOS and Android but not on Windows Phone, which has a gap on the bottom of the page. 我正在使用jQuery Mobile 1.2.0开发一个Web应用程序,并且在iOS和Android上正确计算了页面高度,但在Windows Phone上没有正确计算,这在页面底部有差距。
Any idea how I can fix it, preferably only with CSS? 知道如何修复它,最好只用CSS吗?
<!DOCTYPE html>
<html>
<head>
<title>Hello World jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" style="background:green">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
This is a known issue. 这是一个已知的问题。 You may hardcode the min-height for body via CSS (portrait mode only) or do the following. 您可以通过CSS(仅限纵向模式)对身体的最小高度进行硬编码,或执行以下操作。
function bodyMinHeightFix() {
var isWp7 = window.navigator.userAgent.indexOf("IEMobile/9.0") != -1;
if (!isWp7) return;
// portrait mode only
if(window.innerHeight <= window.innerWidth) return;
var zoomFactorW = document.body.clientWidth / screen.availWidth;
// default value (web browser app)
var addrBarH = 72;
// no app bar in web view control
if (typeof window.external.Notify !== "undefined") {
addrBarH = 0;
}
var divHeightInDoc = (screen.availHeight-addrBarH) * zoomFactorW;
//$("body")[0].style.minHeight = divHeightInDoc + 'px';
var page = $("div[data-role='page']");
if (page.length > 0)
page[0].style.setProperty("min-height", divHeightInDoc + "px", 'important');
}
https://github.com/sgrebnov/jqmobile-metro-theme/blob/master/themes/metro/jquery.mobile.metro.theme.init.js https://github.com/sgrebnov/jqmobile-metro-theme/blob/master/themes/metro/jquery.mobile.metro.theme.init.js
On Windows Phone 8 you can use the following 在Windows Phone 8上,您可以使用以下内容
@media screen and (orientation: portrait) {
@-ms-viewport {
width: 320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
@media screen and (orientation: landscape) {
@-ms-viewport {
width: 480px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
@Sergei's answer: The fix worked for my first page , but my other main pages have fixed footers which are still "floating" above a white space. @谢尔盖的答案:修复工作适用于我的第一页,但我的其他主页有固定的页脚,仍然“漂浮”在空白区域上方。
It is definitely less white space before though ( footers positioned slightly above the middle of the screen) 它之前肯定是较少的空白区域(页脚略微位于屏幕中间位置)
I tried to run the code again on page change and to change the body's, with class "ui-mobile-viewport" ,height but it did not work. 我尝试在页面更改时再次运行代码并更改正文,使用类“ui-mobile-viewport”,高度但它不起作用。
Hope you can help. 希望你能帮忙。 Thank! 谢谢!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.