Fix IE 10 på Windows Phone 8 Viewport - CSS-tricks

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

Hurtig baggrundshistorie

For at IE 10 (desktop) kan fungere i sin nye “snap mode”, skal du bruge dette:

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

Men det skruer nogle Windows Phone 8-telefoner op, tilsidesætter meta viewport-koden og gengiver så alt for stort på små skærme. Så svaret, for nu, er dette gnarly enhedsdetektering / injektions script.

Længere baggrundshistorie

  • Matt Stow: Responsivt design i IE10 på Windows Phone 8
  • Tim Kadlec: Windows Phone 8 og enhedsbredde