All geek questions in one place

-ms-viewport causing non-scroll div

I seem to encounter a very strange error; I am making an application for Windows Phone 8 with PhoneGap. The problem I am facing is that I have a scrollable div that 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 , everything 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 no longer scrolls.

I need to use -ms-viewport because I will put it in the media request because I want to change the width / height of the viewport for portrait and landscape orientation.

I tried removing / repeating the meta tag by changing the values ​​of the content meta tag using jQuery, but it does not update the viewport at runtime.

Here is the HTML for the whole page. You must use IE10 on your mobile device if you want to reproduce the problem:

 <!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>
+2
source share
3 answers

For Windows Phone 8

I ran into the same problem and I racked my brains 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 can scroll the area without problems.

For Windows Phone 8.1 +

As indicated in 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 ; }

Loans for:

Tweet @ r_desimone

+4
source

The @ms-viewport rule according to MSDN does not support setting properties other than width or height .

Therefore, 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 different layouts

+1
source 
 body, html { -ms-overflow-style: none !important; }
0
source

Source: https://habr.com/ru/post/1502346/

More articles:


All Articles