Fix IE 10 on Windows Phone 8 Viewport

(function() {
  if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");

Quick backstory

For IE 10 (desktop) to work in it's new "snap mode" you need to use this:

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

But that screws up some Windows Phone 8 phones, overriding the meta viewport tag and rendering as far too large on small screens. So the answer, for now, is this gnarly device detection/injection script.

Longer backstory


  1. Darin
    Permalink to comment#

    We use this but it messes with the zendesk popup because the script happens on load and the zendesk popup is more than 2 times too wide.

  2. Ben
    Permalink to comment#

    I am trying to make a web app for windows phone 8 that requires the full screen resolution

    It seems there is no way to discover this


    This will always be 320

    Using javascript screen.width returns 320

    Using javascript screen.availWidth returns 320

    I have put together some code that seems to be working for now:


    window.devicePixelRatio = window.devicePixelRatio || screen.deviceXDPI / screen.logicalXDPI;
    var actualWidth = screen.width * window.devicePixelRatio;
    actualWidth = actualWidth - (actualWidth % 2);
    var actualHeight = screen.height * window.devicePixelRatio;
    actualHeight = actualHeight - (actualHeight % 2);
    // TEMP FIX!
    if(actualHeight == 1282){
        actualHeight = 1280;
    $(window).bind('resize', function() {
        if(window.innerHeight > window.innerWidth){
            // portrait
            width = actualWidth;
            height = window.innerHeight;
            // landscape
            width = actualHeight;
            height = window.innerHeight;
        $('html').css('width', width);
        $('body').css('width', width);


    @media screen and (orientation:portrait) {
        @-ms-viewport { width: 720px; }
    @media screen and (orientation:landscape) {
        @-ms-viewport { width: 1280px; }

    Any help/advice on this problem would be much appreciated, thanks!

  3. Grucom

    A solution from a genius on this website:

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

    I am so freakin’ happy to have found this solution that I am posting it all over the web where you guys gave me the hints to create my responsive html. And also as a “thank you” to all your posts.

  4. Hannes

    What I don’t read from any of the posts is that if the code should be in the head inside tag? Or can it be in any of the .js files? If so, then in the header or right after the tag?

  5. Hannes

    In my first sentence I wanted to say “… should be in the head inside script tag?”

  6. Albin

    This bug was fixed in Windows Phone 8 Update 3.

    See: Introducing Windows Phone Preview for Developers

  7. Stanislav
    Permalink to comment#

    There is required the space before the !important. Isn’t it?

    “@-ms-viewport{auto !important}”
    instead of

    Otherwise the code will not work!

    • Stanislav
      Permalink to comment#

      Oh, sorry.
      It was an erroneous assumption!

      But I must to tell something else.
      In my case.
      This code didn’t work before I added the following tag:


  8. Stanislav
    Permalink to comment#

    Sorry, the code didn’t appear – I meant this

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  9. Brian Funt
    Permalink to comment#

    Couldn’t you just do this?

    @-ms-viewport {
      width: 100%;
  10. mani
    Permalink to comment#

    I have included the code as said but still it doesnt fill the purpose. It creates a style node with the inner content as -ms-viewport.

    In DOM it created as :

    @-ms-viewport{width:auto !important}

    The code I have included is right after head tag.

  11. an van
    Permalink to comment#

    I found new problem with microsoft-edge.
    please following link bellow.

    and help me this problem.
    thank very much!

    • an van
      Permalink to comment#

      I’m sorry, I posted missing.
      firstly add new row with button add.
      You can click on green area of button delete and click another button you can see my problem.

  12. SammieFox

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.