Grow your CSS skills. Land your dream job.

Last updated on:

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. 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

    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!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".