WP8 IE10 viewport issue

Question

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.

score 3 · Answer 1 · answered Feb 01 '13 at 19:32

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)

Sorry, I realize this is similar to the source you already cited, I'll leave it up for posterity. — zGrüber, Feb 01 '13 at 19:34

score 0 · Answer 2 · answered Jan 26 '13 at 20:19

0

try adding the following

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

answered Jan 26 '13 at 20:19

Sergei Grebnov

2,633
18
24

The problem is that i cant restrict zoom usage. And it still does not work. I noticed that someone here is facing the same problem http://stackoverflow.com/questions/13743992/ie-bug-responsive – awattar Jan 27 '13 at 13:13
I think it can be doctype related. When I removed the doctype then the page looks ugly but there is no problem anymore. – awattar Jan 27 '13 at 13:25
I can't repro the similar problem (see my comment in related issue). Please post your sample page on jsFiddle – Sergei Grebnov Jan 27 '13 at 14:31
It's really complex problem and i think it's a race condition. There is a div in page content with img inside that src is defined as inline data base64 gif. I'am also using XHTML 1.0 Strict doctype and when it's removed so it's in quirks mode the issue is gone. So i think that when using viewport combined with xhtml and img uri data then browser engine calculates page dimensions wrong. I also tried to specify height and width of div and img tag but it does not work either. The only thing that works is to inject img content in onload event of the page. – awattar Jan 28 '13 at 09:26

WP8 IE10 viewport issue

2 Answers2

Linked