我正在使用jQuery Mobile 1.2.0开发一个Web应用程序,并且正在iOS和Android上正确计算页面高度,但在Windows Phone上没有正确计算,这在页面底部有差距.
知道如何修复它,最好只用CSS吗？
Meta name="viewport" content="width=device-width,initial-scale=1">
最佳答案
这是一个已知的问题.您可以通过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;
}
}
