jQuery Mobile中的頁面高度不正確
[英]Incorrect page height in jQuery Mobile
問題描述
我正在使用jQuery Mobile 1.2.0開發一個Web應用程序，並且在iOS和Android上正確計算了頁面高度，但在Windows Phone上沒有正確計算，這在頁面底部有差距。
知道如何修復它，最好只用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>
2 個解決方案
解決方案1
4 2012-10-24 19:40:12
這是一個已知的問題。 您可以通過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');
}
在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;
}
}
解決方案2
0 2013-02-13 16:59:33
@謝爾蓋的答案：修復工作適用於我的第一頁，但我的其他主頁有固定的頁腳，仍然“漂浮”在空白區域上方。
它之前肯定是較少的空白區域（頁腳略微位於屏幕中間位置）
我嘗試在頁面更改時再次運行代碼並更改正文，使用類“ui-mobile-viewport”，高度但它不起作用。
希望你能幫忙。 謝謝！
jQuery Mobile（JQM）1.4.5頁面最小高度將頁面高度減小到小於100％
[英]Jquery Mobile (JQM) 1.4.5 Page Min-Height Reduces Page Height to less than 100%
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.