Layout responsive in scala su Windows Phone 8

Pubblicato mar 30 lug 2013 by
Layout responsive in scala su Windows Phone 8

In questo articolo andremo a vedere come far si che un sito responsive venga visualizzato e ridimensionato a livello di zoom corretto rispetto al display del device Windows che utilizzeremo, mentre con gli smartphone e tablet Apple e Android è sufficiente inserire nell' header del documento questo tag:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

il browser Internet Explorer 10 invece mobile rimane impassibile e lo "ignora" completamente, proprio perchè al momento IE10 forza il css a visualizzare il sito nella sua risoluzione nativa.

Apro un piccola parentesi per chi avesse voglia di leggere due righe in più, se invece non dovesse fregarvene nulla scorrete direttamente più in basso per proseguire a leggere il trick ;-) . Alla Microsoft da sempre hanno avuto il "vizio" di non seguire gli standard ma bensì di crearne dei "loro", la guerra dei browser iniziò nel 1995 e ad oggi nonostante il W3c (World Wide Web Consortium) ha stabilito quali fossero gli standard, Microsoft con il suo Internet Explorer continua ad essere il meno allineato anche se effettivamente con la versione 10 ha colmato abbastanza bene il gap con Mozilla Firefox e Google Chrome, anche se al momento IE nell'ambito mobile ha una diffusione molto bassa, con l'avvento dei nuovi dispositivi Nokia e qualche altro dispositivo con Windows Phone 8 sotto il cofano, il market share di questo browser è destinato ad alzarsi, quindi nel bene o nel male è buona cosa pensare anche agli utenti con questi terminali.

Ora basta parlare del più e del meno e vediamo direttamente il codice che ci permette di ovviare al problema della risoluzione del sito responsive, Iniziamo a creare un file di testo e rinominiamolo ie.js e inseriamo:

(function() {
    if ("-ms-user-select" in document.documentElement.style && 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);
    }
})();

Javascript si occuperà di controllare che device sta visualizzando la pagina, se viene rilevato Internet Explorer mobile 10, inserisce nello stile della pagina il valore

@-ms-viewport{width:auto!important}

Infine tra i tag HEAD della nostra pagina inseriamo:

<script type="text/javascript" src="ie.js"></script>

Ecco fatto, ora il nostro sito responsive verrà visualizzato correttamente sia su device Android / Apple che sui nuovissimi Windows Phone 8.

comments powered by Disqus