-ms-viewport causing div not scrolling

问题

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>

回答1:

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

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/15093798/ms-viewport-causing-div-not-scrolling

标签

html5

css3

cordova

windows-phone-8

internet-explorer-10