gpt4 book ai didi

html - -ms-viewport 导致 div 不滚动

转载 作者:搜寻专家 更新时间:2023-10-31 23:07:43 24 4
gpt4 key购买 nike

我好像遇到了一个很奇怪的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-heightwidth=device-width,都成功了)

但是,当我删除视口(viewport)元标记并改用它时:

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

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

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

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

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

最佳答案

适用于 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

关于html - -ms-viewport 导致 div 不滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15093798/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com