locked
WP8.1中WebView控件的viewport宽度问题 RRS feed

 > 

  • 问题

  • Question
    登录进行投票
    0
    登录进行投票

    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


    2015年7月11日 9:08

答案

  • Question
    登录进行投票
    0
    登录进行投票

    Hello AsukaEriri,

    我从你提供的onederive下载了你的sample,发现确实有这个问题，不过不是每次都这样。一个可能性是在webview这个控件还在加载的时候html页面就开始读取整体页面的高度了，我尝试在html的onload时间内来读取这个高度是可以的:

    <body onload="pageLoad()">

    <p>Hello<p/>


    <p/>

    <script>

        function pageLoad() {

            var docHeight = $(document).height();

            var p = $("p:first");

            var itemHeight = p.outerHeight(true);

            var margin = (itemHeight - p.outerHeight(false)) / 2;

            //var docHeight = $(document).height();

            console.log(docHeight);

            var count = (docHeight - margin) / (itemHeight - margin) - 1; //考虑margin垂直合并,-1是减去第一个<p>Hello</p>

            p.text("itemHeight:" + itemHeight + " docHeight:" + docHeight);//调试用


            for (i = 0; i < count; i++) {

                var item = $("<p></p>").text(i);

                p.after(item);

                p = item;

            }

        }


    </script>

</body>

    你可以试下在你那用这个onloaded是否可以正常工作。

    Regards.

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • 已标记为答案 Jamles Hez 2015年8月10日 8:25
    2015年7月14日 8:06