Windows Phone 8 Viewport Fix

I wanted to post the code I’ll be using to get responsive layouts to render properly in IE10 for both Snap Mode and Windows Phone 8. Tim Kadlec and Matt Stow have documented & championed the cause better than I ever could, so read their posts if you want the full story. Basically, I’m following the recommendation to use the following code to set viewport in my CSS:

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

A fix is on the way to get Windows Phone 8 to recognize CSS pixels (preferred behavior) rather than device pixels. In the meantime, use this javascript before any other scripts in the head if you need an immediate patch:

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);
}

Here’s the code and demo link (twa.lt/ietenvp) for my test. And thanks to Rey Bango for helping us with a fix.

18 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Julian G.

    It’s a shame to see that we’re still being forced to perform back bending maneuvers in order to properly render our websites in an IE browser. I really had high hopes for IE 10.

  • Trent

    @Julian G.: Hiya—I wouldn’t say that’s true. The W3C is standardizing the CSS @viewport rule. For more info, check Tim Kadlec’s post (point 3 specifically).

  • Robin

    Is there a reason to use viewports in CSS rather than in HTML? (Did I miss something?)

  • GoodBytes

    @Robin: I had the exact same question :)

  • Trent

    @Robin and @GoodBytes: While HTML might seem like convention now, I like the idea setting viewports in CSS (where all other visual/presentation stuff is). Plus, it’s in the CSS Device Adaptation Draft.

  • Julian G.

    @Trent: You’re right, and sorry if I came out a bit negative. But Microsoft should still take into consideration backwards compatibility. Take for example the responsive websites that were built a year or two ago, the way they declared their viewport was through html (and many of the websites being created today as well). It’s almost like creating a new website and only worrying about modern browsers. Just a little upsetting.

  • Jimmy

    Thanks.
    This helped. Works perfect now with bootstrap on my lumnia 920 :-)

  • Matt

    @Jimmy:
    plus 1. Thx!

  • Kamran

    Thanks for this; I used the server to output a specific viewport for WP IE10 but this is good too if you prefer JS.

  • Mark

    Any reason why my WP8 device shows many websites correctly (using the viewport meta tag) but only on occasion ignores it?

  • Matt Stow

    @Mark: It honours the viewport meta tag if zoom is disabled (by setting maximum-scale) or if it doesn’t have initial-scale.

  • Jens Henrik

    I didn’t know this was even an issue, until I fired up my first Bootstrap 3 site on my L920. This was the first hit I got, and it nailed it! Thanks a bunch.

  • Natalia

    Hi!

    Thanks for your article! We are working on email marketing and implementing Responsive Design, we made it work in almost all devices and email clients, but not Windows Phone.
    Do you know any way that this would be possible?
    Thanks!

  • Mark

    thank you, thank you, thank you.

  • Rob

    Unbelievable... worked straight off.. thank you!

  • BEWEBTOO

    Hi
    On my mobile device Nokia 920, I had strange effects with a website(a text placed on a column of 2, 3 characters completely offset for example) , but strangely this bad effects was not visible on a windows phone emulator ?! (incomprehensible)
    With your js code all seems OK now so ... THANK YOU !!!

  • Olli S

    Thank You! If only had found this sooner and saved few extra hours of work debugging this issue.

  • Grucom

    A solution from a genius on this website: https://www.campaignmonitor.com/forums/topic/7989/windows-phone-8-has-full-css3media-query-support/

    He single-handedly has solved the issue! \o/

Leave a Reply