html代码如下,这是一个排版的练习,最终目的是使<p></p>元素刚好充满整个网页。
<!doctype html >
<html lang="en">
<head>
<meta charset="utf-8">
<title>outerHeight demo</title>
<script src="jquery-1.11.3.min.js"></script>
<style>
@-ms-viewport {
width:device-width;
height:device-height;
}
html {
-ms-content-zooming: none;
}
p {
margin: 10px;
padding: 5px;
border: 2px solid #666;
}
</style>
</head>
<body>
<p>Hello</p>
<script>
var p = $("p:first");
var itemHeight = p.outerHeight(true);
var margin = (itemHeight - p.outerHeight(false)) / 2;
var wndHeight = $(window).height();
var count = (wndHeight - margin) / (itemHeight - margin) - 1; //考虑margin垂直合并,-1是减去第一个<p>Hello</p>
p.text("itemHeight:" + itemHeight + " docHeight:" + wndHeight);//调试用
for (i = 0; i < count; i++) {
var item = $("<p></p>").text(i);
p.after(item);
p = item;
}
</script>
</body>
</html>
使用@-ms-viewport的原因有两点,
1:为了适应不同屏幕,
2:How to Stop the Bouncing WP8 (8.1) WebView
现在有这样的问题:
当我设置了@-ms-viewport后,$(window).width()/height()「或者document.documentElement.clientWidth/Height」的值(我认为是css像素)随着设备屏幕尺寸的增大而减小。
而<p>元素的值(我认为也是css像素)itemHeight = p.outerHeight(true);却不随设备屏幕尺寸的变化而变化,它保持不变。
这样就出现了屏幕越大,元素越少的奇怪情况:

WVGA(800×480)模拟器

720P(1280×720)模拟器

1080P(1920×1080)模拟器

1080P(1920×1080)开发机Lumia930
而当去掉@-ms-viewport块后,所有屏幕情况基本正常。
所以这个问题应该如何解决?我如何达到最终效果?
工程的代码在这里:
https://onedrive.live.com/redir?resid=1698295B81023A93!12628&authkey=!AKfJ8zqRm2fUNZc&ithint=file%2czip