-ms-viewport 导致 div 不滚动答案

【问题标题】：-ms-viewport causing div not scrolling-ms-viewport 导致 div 不滚动
【发布时间】：2013-02-26 16:07:24
【问题描述】：

我好像遇到了一个很奇怪的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，因为我想将它放在媒体查询中，因为我想更改纵向和横向的视口宽度/高度。

我尝试删除/重新注入元标记，使用 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>

【问题讨论】：

标签： html css cordova windows-phone-8 internet-explorer-10

【解决方案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 ;  
}

致谢：

推特@r_desimone

【讨论】：

仅设置 overflow:scroll; 和 -ms-overflow-style: none; 对我有用。在 Windows Phone 8 / IE10 上测试。非常感谢 - 这确实是一个奇迹 :o)
我已经绞尽脑汁将近一个月了......并找到了上述解决方案。但是当你使用输入字段时要小心。 Win8 上的初始版本有错误。当您修复视口并单击输入字段时。键盘弹出时屏幕缩小。这在后续版本中已修复

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：