Correggi IE 10 su Windows Phone 8 Viewport - Trucchi CSS

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

Rapido retroscena

Affinché IE 10 (desktop) funzioni nella sua nuova "modalità snap", è necessario utilizzare questo:

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

Ma questo rovina alcuni telefoni Windows Phone 8, sovrascrivendo il tag meta viewport e rendendolo troppo grande su schermi piccoli. Quindi la risposta, per ora, è questo nodoso script di rilevamento / iniezione di dispositivi.

Storia passata più lunga

  • Matt Stow: design reattivo in IE10 su Windows Phone 8
  • Tim Kadlec: Windows Phone 8 e larghezza del dispositivo