CODEWITHSUNDEEP
csswindows-phone-8viewportinternet-explorer-10
awattar
awattar

Reputation: 468

WP8 IE10 viewport issue

Did any of you noticed that when using -ms-viewport (with specific width of 320px or device-width) then web browser content can be moved outside available space? It seems like document size is wrong so i can scroll it's content to the left but there is nothing then white empty space. I can also zoom it out(but i should not) and it's size after that is not always the same. I'm aware of http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html but it does not help. It happens after second or third navigate to the same content and disappears for example when device is rotated.

Upvotes: 2

Views: 3743

Answers (2)

zGrüber
zGrüber

Reputation: 31

Windows Phone 8 does not properly recognize the meta viewport tag that is standard for webkit and mobile web.

Try this in your CSS

@-ms-viewport{width:device-width}

And then add this JS

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");
    msViewportStyle.appendChild(
        document.createTextNode(
            "@-ms-viewport{width:auto!important}"
        )
    );
    document.getElementsByTagName("head")[0].
        appendChild(msViewportStyle);
}

More here (credit)

Upvotes: 3

Sergei Grebnov
Sergei Grebnov

Reputation: 2623

try adding the following 

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

Upvotes: 0

Related Questions