Siti e css per mobile:
nonostante siano passati diversi anni dal boom dei device mobile legati al mondo di internet tutt'oggi non c'è una facile gestione dei siti web per mobile.
In particolare la grafica di un sito web deve adattarsi per dare più informazioni possibili in poco spazio. Però ogni device ha una sua risoluzione e come se non bastasse ha un suo tipo di browser con una sua particolare versione. E' praticamente impossibile testare l'esatto rendering grafico per ogni dispositivo però vengono in contro alcune direttive css:
@media only screen and (max-device-width: 480px) {
...stile css
}
in questo modo si indica l'applicazione della grafica indicata tra le due graffe solo per dispositivi con grandezza massima di 480px. Conviene quindi creare tanti e diversi stili per adattarsi meglio a tablet, smartphone grandi o piccoli. Per un elenco dei maggiori formati fare riferimento a questa pagina css-tricks.com/snippets/css/me...
Inoltre se si pensa che la grafica si adatti perfettamente si può disabilitare lo zoom sul sito dato dal trascinamento delle dita in questo modo:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
inserito nell'head dell'html della pagina.
Per quanto riguarda poi l'utilizzo dei javascript si consiglia l'uso di determinati comandi (si consiglia jquery mobile jquerymobile.com/) solo se il device rilevato è mobile. Questo in php lo si può fare attraverso il costrutto:
if(preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"])) {
...
}
Per testare poi il tutto la maniera più semplice è ridimensionare la finestra del proprio browser assieme all'utilizzo degli strumenti per webmaster di google Chrome che permettono di simulare tanti e diversi dispsitivi e anche il "touch" delle dita.