0

Ok here is where I am stuck. Microsoft IE for RT interprets my media queries out of sync when in snap mode.

There is one font that is overly padded and thus spilling over to the next line.

My question is If I write out my media queries, which for every major browser work fine, and the only problem is with the different mode sizes for IE|RT is there anyway to specify just using the @-ms-viewport {css style here}? I was thinking perhaps even write a separate media query just for the viewport but that would just override my other media queries wouldn't it?

And Interestingly the mail app for RT uses media queries fine.

See this code just doesn't fit right with IE|RT in snap mode: From MSDN BLOG... 

@media screen and (max-width: 400px) {
    @-ms-viewport { width: 320px; }
    /* CSS for 320px layout goes here */
}

For now I just hammer shut it off with this designation. Which doesn't seem to work for WP8. 

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

p.s. The microsoft Windows phone 8 media queries + viewport is a complete bug. Keeps crashing.

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
Christian Matthew
  • 4,014
  • 4
  • 33
  • 43

1 Answers1

0

It seems that this does work if you just do

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

combined with a workaround for Windows Phone 8.0 bug that causes media queries to behave totally randomly. The workaround is "simple"

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

Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/

Mikko Rantalainen
  • 14,132
  • 10
  • 74
  • 112