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

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!

Leave a Comment

Current day month ye@r *

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