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!

  3. 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. 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. This bug was fixed in Windows Phone 8 Update 3.

    See: Introducing Windows Phone Preview for Developers

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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