Porting su mobile/smartphone di un sito

Dovendo ottimizzare un sito per device mobili/smartphone mi imbattuto in una serie di problematiche non da poco.

Gestire una doppia visualizzazione
Per ovviare in modo semplice al problema ho definito 2 file css (e del codice html) che variavo in base al browser lato server.
Per riconoscere il dispositivo ho letto dalla request l'”user-agent” e capire se ero su un dispositivo mobile o no.
Cercando su internet ho trovato molti script che hanno da subito funzionato ma in fase di testing sugli apparati ho dovuto cambiare l’agoritmo con lo script consigliato da questo sito:
http://detectmobilebrowsers.com

Usando questo script sono riuscito a non fare riconoscere l'”iPad 2″ come dispositivo mobile perchè è un Tablet ed ha una risoluzione più che adatta a vedere il contenuto nella sua forma standard.

La prima riguarda la risoluzione che nei dispositivi mobili è molto variabile, quindi loro in automatico tendo a fare lo zoom.

Risoluzione da utilizzare
Come consigliato da alcuni siti in modo dinamico ho aggiunto al mio sito il nel’head html i tag:

 <meta name=”HandheldFriendly” content=”True” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />

Questi mi doveva permettere di avere uno zoom iniziale corretto, ma qualcosa non quadrava.
Impostato come larghezza del mio css 640px l’iPhone 4 con display retina (640×960) visualizzava la pagina tagliata ero obbigato a fare lo scrolling.
Provando a mettere “initial-scale=0.5” vedevo tutto correttamente ma molti piccolo.
Da qui ho dedotto che Apple deve avere tenuto come impostazione di default a 320px per avere maggior compatibilità con i precedenti dispositivi e mantenere una visualizzazione non sulla risoluzione ma sulla dimensione degli elementi che fosse usabili via touch.
Quindi per ho portato la larghezza massima del sito a 320px con “initial-scale=1.0” ed il mio telefono ha fatto un ottimo resize a pieno schermo.

Accorgimenti sui CSS
Fortunatamente i dispositivi Apple ed Android hanno adattato tutti gli elementi anche se basati su Pixel nel CSS.
Però il dispositivo avendo un orientamente dovevo poter dare sempre la possibilità di girare il telefono e dare magari un leggero vantaggio nel vedere gli elementi.
Quindi ottimizzato tutto per stare nei miei 320px ho portato ove possibile gli elementi ad essere più fluttuanti possibile ed avere una width=100% così mantenevano sempre un full screen.

Consigli
La cosa che mi ha aiutato molto è l’aver strutturato il sito da subito anni fa in classi base e poi ereditate quindi ogni modifica si è riversata sugli elementi derivati.
Su iPhone capito la logica della risoluzione anche se inferiore a quella retina i testi si vedono benissimo e le immagini vengono ridimensionate in modo buono (anche se su questo voglio fare altri testi per avere maggior qualità).
Su Android il browser standard nel resize delle immagini, bordi e testi non ha un qualità ottima ma “Opera” e “Firefox” sullo stesso dispositivo permette di avere una maggior qualità.
Per i debug su browser standard consiglio di mettere un parametro nell’url che attivi il sito in modalità mobile da velocizzare il debug.

Conclusione
Sono partito nel realizzare il tutto da letture sparse in rete, da fantasie della mia mente e un po di dispositivi sotto mano.
Sicuramente esistono metodologie migliori ma sicuramente questa mi sembrava la più semplice da realizzare.