-ms-viewport导致div不滚动 [英] -ms-viewport causing div not scrolling
问题描述
我似乎遇到了一个很奇怪的错误;我正在做一个应用程序的Windows Phone 8与PhoneGap。我遇到的问题是，我有可滚动 div 这在我使用时工作：
< meta name =viewportcontent =user-scalable = no，initial-scale = 1，maximum-scale = 1，minimum-scale = 1，height = 480，width = 320， densitydpi = device-dpi/>
（我尝试使用 height = device-height ， width = device-width ，所有工作）
但是，当我删除视口元标记，这是：
@ - ms-viewport {
width：320px;
user-zoom：fixed;
max-zoom：1;
min-zoom：1;
}
一切都一样但 $ c> div 无法滚动。
我需要使用 -ms-viewport 因为我将它放在媒体查询，因为我想改变视口宽度/高度的纵向和横向。
我试图删除/重新注入元标记，使用jQuery更改元标记的内容值，但它不会在运行时更新视口。
整个页面的HTML。如果您想要重现问题，您应该在IE10手机上使用：
<！DOCTYPE html&
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< meta name =msapplication-tap-highlightcontent =no/>
< script type =text / javascriptsrc =./ cordova-2.3.0.js>< / script>
< script type =text / javascriptsrc =./ js / jquery-190.js>< / script>
< script type =text / javascriptsrc =./ js / jquery.transit.min.js>< / script>
< style>
@ -ss-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>应用程式...< / title>
< / head>
< body>
< div class =window_wrapper>
< div class =test>
第一行
< br />
< div id =ll>最后一行< / div>
< / div>
< / div>
< / body>
< / html>
对于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 +
如此指出的链接这是一个工作解决方案
html {
overflow：hidden;
-ms-content-zooming：none;
}
body {
-ms-touch-action：pan-y;
}
div .scrollable-area {
overflow：auto;
-ms-touch-action：pan-y;
}
积分到：
$ b
Tweet @ r_desimone
I seem to have encountered a very strange bug; I am doing an app for Windows Phone 8 with PhoneGap. The problem I am having is that that I have scrollable div which works when I use:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, height=480, width=320, target-densitydpi=device-dpi" />
(I tried using height=device-height, width=device-width, all worked)
However, when I remove the viewport meta tag and use this instead:
@-ms-viewport {
width:320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
Everything looks the same but the div is not scrollable anymore.
I need to use -ms-viewport because I'll be putting it in media query because I want to change viewport width/height for portrait and landscape.
I tried removing/reinjecting the meta tag, changing meta tag's content values with jQuery, but it doesn't update the viewport at runtime.
Here is the HTML for the whole page. You should use on IE10 mobile if you wish to reproduce the issue:
<!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>
For Windows Phone 8
I faced the same issue and I was breaking my head until I used the following CSS:
body {
@-ms-viewport {
width: 320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
div .scrollable-area {
overflow: scroll;
-ms-overflow-style: none;
}
It worked; now I am able to scroll the area with no problem.
For Windows Phone 8.1 +
As pointed by this link which is a working solution
html {
overflow: hidden;
-ms-content-zooming: none;
}
body {
-ms-touch-action: pan-y ;
}
div .scrollable-area {
overflow: auto ;
-ms-touch-action: pan-y ;
}
Credits to :
Tweet@r_desimone
这篇关于-ms-viewport导致div不滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
