Fatal编程技术网
  • html/
  • Html -ms视口导致div不滚动

Html -ms视口导致div不滚动

html css cordova windows-phone-8

Html -ms视口导致div不滚动,html,css,cordova,windows-phone-8,internet-explorer-10,Html,Css,Cordova,Windows Phone 8,Internet Explorer 10,我似乎遇到了一只非常奇怪的虫子；我正在用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" /> 一切看起来都一样，但

我似乎遇到了一只非常奇怪的虫子；我正在用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" />
一切看起来都一样，但是
div
不再可滚动

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

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

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

<!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>


@-ms视口{
宽度：320px；
用户缩放：固定；
最大变焦：1；
最小变焦：1；
}
html，正文{
身高：100%；
宽度：100%；
填充：0px；
边际：0px；
用户选择：无；
}
身体{
背景色：红色；
颜色：白色；
-ms文本大小调整：无；
-ms用户选择：无；
}
.窗纸{
位置：相对位置；
背景颜色：黄色；
宽度：90%；
身高：90%；
溢出：自动；
}
.测试{
宽度：50%；
高度：500px；
溢出：隐藏；
位置：绝对位置；
背景颜色：银色；
z指数：3000；
}
#ll{
位置：绝对位置；
底部：0px；
}
一个应用程序。。。
一线


最后一行
根据的
@ms视口
规则不支持设置除
宽度
或
高度
以外的其他属性

因此，您可能必须结合使用
meta
标记和
@ms viewport
规则，但每次使用媒体查询来覆盖Windows Phone 8的不同布局

时的
宽度
和
高度
我面临着同样的问题，在我使用以下CSS之前，我一直在绞尽脑汁：

正文{
@-ms视口{
宽度：320px；
用户缩放：固定；
最大变焦：1；
最小变焦：1；
}
}
分区可滚动区域{
溢出：滚动；
-ms溢出样式：无；
}
它起作用了；现在我可以毫无问题地滚动该区域

适用于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 ;  
}
归功于：

Tweet@

仅设置
溢出：滚动
和
-ms溢出样式：无为我做了这件事。在Windows Phone 8/IE10上测试。非常感谢你-这确实是一个奇迹：o）我几乎一个月都在发疯。。。并找到了上述解决方案。但使用输入字段时要小心。Win8上的初始版本存在错误。修复视口并单击输入字段时。当键盘弹出时，屏幕缩小。这在后续版本中已修复

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

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

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



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