Fix IE 10 on Windows Phone 8 Viewport

(function() {
  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);
  }
})();

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

Comments

  1. User Avatar
    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. User Avatar
    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

    Using:

    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:

    JavaScript:

    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;
        }else{
            // landscape
            width = actualHeight;
            height = window.innerHeight;
        }
    
        $('html').css('width', width);
        $('body').css('width', width);
    }).trigger('resize');
    

    CSS:

    @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. User Avatar
    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/

    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. User Avatar
    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. User Avatar
    Hannes

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

  6. User Avatar
    Albin

    This bug was fixed in Windows Phone 8 Update 3.

    See: Introducing Windows Phone Preview for Developers

  7. User Avatar
    Stanislav
    Permalink to comment#

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

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

    Otherwise the code will not work!

    • User Avatar
      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:

      Thanks!

  8. User Avatar
    Stanislav
    Permalink to comment#

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

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

    Couldn’t you just do this?

    @-ms-viewport {
      width: 100%;
    }
    
  10. User Avatar
    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. User Avatar
    an van
    Permalink to comment#

    I found new problem with microsoft-edge.
    please following link bellow.
    https://jsfiddle.net/vxba/pm4zvspn/4/

    and help me this problem.
    thank very much!

    • User Avatar
      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. User Avatar
    SammieFox
  13. User Avatar
    Arthur Stolyar
    Permalink to comment#

    Probably too late for this, but it could be way easier this way:

    @media screen and (-ms-view-state: snapped) {
    @-ms-viewport { width: device-width }
    }

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag