Fix IE 10 op Windows Phone 8 Viewport - CSS-trucs

Anonim
(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); ) ))();

Snel achtergrondverhaal

Om IE 10 (desktop) te laten werken in zijn nieuwe "snap-modus", moet je dit gebruiken:

@-ms-viewport ( width: device-width; )

Maar dat maakt sommige Windows Phone 8-telefoons kapot, waardoor de meta viewport-tag wordt overschreven en op kleine schermen veel te groot wordt weergegeven. Dus het antwoord is voorlopig dit knoestige apparaatdetectie- / injectiescript.

Langer achtergrondverhaal

  • Matt Stow: Responsive Design in IE10 op Windows Phone 8
  • Tim Kadlec: Windows Phone 8 en apparaatbreedte