3

我好像遇到了一个很奇怪的bug；我正在使用 PhoneGap 为 Windows Phone 8 开发应用程序。我遇到的问题是我有可滚动div的，当我使用时可以使用：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, height=480, width=320, target-densitydpi=device-dpi" />

（我尝试使用height=device-height, width=device-width，一切正常）

但是，当我删除视口元标记并改用它时：

@-ms-viewport {
    width:320px;
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
}

一切看起来都一样，但div不再可滚动。

我需要使用-ms-viewport，因为我将把它放在媒体查询中，因为我想更改纵向和横向的视口宽度/高度。

我尝试删除/重新注入元标记，content使用 jQuery 更改元标记的值，但它不会在运行时更新视口。

这是整个页面的 HTML。如果您希望重现该问题，您应该在 IE10 移动设备上使用：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="msapplication-tap-highlight" content="no"/>
        <script type="text/javascript" src="./cordova-2.3.0.js"></script>
        <script type="text/javascript" src="./js/jquery-190.js"></script>
        <script type="text/javascript" src="./js/jquery.transit.min.js"></script>
        <style>
            @-ms-viewport {
                width: 320px;
                user-zoom: fixed;
                max-zoom: 1;
                min-zoom: 1;
            }

            html, body {
                height: 100%;
                width: 100%;
                padding: 0px;
                margin: 0px;
                user-select: none;
            }

            body {
                background-color: red;
                color: white;
                -ms-text-size-adjust: none;
                -ms-user-select: none;
            }

            .window_wrapper {
                position: relative;
                background-color: yellow;
                width: 90%;
                height: 90%;
                overflow: auto;
            }

            .test {
                width: 50%;
                height: 500px;
                overflow: hidden;
                position: absolute;
                background-color: silver;
                z-index: 3000;
            }

            #ll {
                position: absolute;
                bottom: 0px;
            }
        </style>
        <title>An App...</title>
    </head>
    <body>
        <div class="window_wrapper">
            <div class="test">
                first line
                <br />
                <div id="ll"> last line </div>
            </div>
        </div>
    </body>
</html>
4

3 回答 3

4

对于 Windows 电话 8

我遇到了同样的问题，直到我使用以下 CSS：

body {
    @-ms-viewport {
        width: 320px;
        user-zoom: fixed;
        max-zoom: 1;
        min-zoom: 1;
    }
}

div .scrollable-area {
    overflow: scroll;
    -ms-overflow-style: none;
}

有效; 现在我可以毫无问题地滚动该区域。

适用于 Windows Phone 8.1 +

正如此链接所指出的，这是一个可行的解决方案

html {  
    overflow: hidden;  
    -ms-content-zooming: none;  
}

body {  
   -ms-touch-action: pan-y ;  
}

div .scrollable-area {  
  overflow: auto ;  
  -ms-touch-action: pan-y ;  
}

学分：

鸣叫@r_desimone

于 2014-01-07T14:48:52.317 回答
1

@ms-viewport根据MSDN的规则不支持设置除widthor以外的属性height。

因此，您可能必须使用meta标签和@ms-viewport规则的组合，但只需覆盖widthandheight每次使用不同布局的媒体查询

于 2013-03-05T13:48:13.497 回答
0 
body, html { 
  -ms-overflow-style: none !important; 
}
于 2014-02-26T03:12:06.737 回答