Question

我似乎遇到了一个非常奇怪的错误;我正在使用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，因为我会将它放在媒体查询中，因为我想更改纵向和横向的视口宽度/高度。

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

这是整个页面的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>

Answer 1

对于Windows Phone 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 +

正如link指出的那样，这是一个有效的解决方案

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

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

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

致信：

资料Tweet @ r_desimone

Answer 2

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

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

Answer 3

body, html { 
  -ms-overflow-style: none !important; 
}

-ms-viewport导致div不滚动

3 个答案:

对于Windows Phone 8

对于Windows Phone 8.1 +