Menu
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>
648
asked Dec 03 '25 18:12
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.
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
141
The @ms-viewport rule according to MSDN doesn't support the setting of properties other than width or height.
So you may have to use a combination of the meta tag and the @ms-viewport rule, but just override the width and height each time using media queries for the different layouts
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
