CSS per iPad
Lunedì 31 Maggio 2010 - 10:35
di Maico Orazio
In questi giorni l’iPad è in arrivo, per chi l’aveva prenotato on-line o per chi riuscirà a comprarlo. Bisogna quindi assicurarci che i nostri siti web possano essere gestiti al meglio su questo dispositivo, come per l’iPhone.
Il browser integrato in iPad è il Safari Mobile, sviluppato su WebKit (il che significa ricco sostegno ai CSS3), unica risoluzione e unico sistema operativo iPhone OS.
Usando le CSS Media Query è possibile rilevare il modo per dire all’iPad di utilizzare un proprio foglio di stile: tutto ciò è definito come per iPhone. Una differenza per iPad che è possibile specificare nelle CSS media query sono le dichiarazioni basate sull’orientamento:
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css" type="text/css" /> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css" type="text/css" /> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css" type="text/css" />
Gli altri browser non sapendo gestire questo tipo di stringa in media, non lo interpreteranno.
Come potete vedere, basta collegare al documento HTML tre file CSS, il primo per iPhone, il secondo per iPad con orientamento verticale e a seguire sempre per iPad orientato orizzontalmente.
Categoria: CSS, Web Design | Permalink
Commenti
1
Soluzione interessante ma poco pratica. Così facendo si moltiplicano le richieste HTTP, a tutto danno della performance. Considerando che spesso le connessioni disponibili per tecnologia mobile non eguagliano in banda quelle fisse, è meglio risparmiare. Ancora: le media queries così inserite costringono il browser ad eseguire un ulteriore lavoro in fase di parsing, a tutto danno della performance, anche se questo aspetto non incide così tanto come le richieste GET multiple. Una soluzione è quella di eseguire una detection e quindi inserire dinamicamente i fogli di stile una sola volta, piuttosto che tutti insieme.
# - postato da Gabriele Romanato - 31 Maggio 2010 - 13:17
2
Mah… mi sembra che esageri…
la detection come la fai? Javascript? Allora quanto meno dovrai includere un file JS che si occupa di questo, tra l’altro se deve generarti il markup per includere il css la devi eseguire per prima bloccandoti quindi il loading di altre componenti e questo solo per risparmiarti un GET?! ( 1 js + 1 css VS 3 css).
Non dico che la soluzione proposta sia la migliore in assoluto, ma neanche una schifezza come l’hai descritta tu…
3
Io avrei un’idea diversa,forse:
Un Css per le dimensioni, determinate in qualche maniera, più uno per tutto il resto….# - postato da Ratamusa - 31 Maggio 2010 - 16:20
4
Soluzioni alternative potrebbero essere una detection lato server e inviare allo user-agent il foglio di stile più appropriato, oppure la definizione di blocchi di media queries direttamente in un unico foglio di stile con le @media-rules.
# - postato da Fabrizio Calderan - 31 Maggio 2010 - 17:19
5
Questi discorsi mi sembrano ridicoli, solo per vedere questa pagina ci sono più di 45 richieste HTTP, e per risparmiarne 2 si abbandona il filtraggio built-in dell’oggetto già completamente e correttamente funzionante per delle implementazioni che probabilmente nel medio-lungo termine avranno problemi di retrocompatibilità.
Tanto poi vengono cachati, quindi manco fossero 3 richieste da fare ogni volta…
# - postato da Slam - 31 Maggio 2010 - 17:36
6
Fabrizio come al solito ha colto in pieno il senso del discorso ed ha proposto la soluzione più sensata. :-)
# - postato da Gabriele Romanato - 31 Maggio 2010 - 20:30
7
soluzione interessante (molto) ma anche secondo me fare la detection lato server mi sembra più performante…
# - postato da web firenze - 03 Giugno 2010 - 09:02
8
Ma ha davvero senso fare una versione apposta per iPad? In certe situazioni può anche servire, ma un sito con un layout ottimizzato per 1024 non ha alcun problema di rendering.
# - postato da Tommaso Baldovino - 08 Giugno 2010 - 10:08
9
Piuttosto che impegnarsi nello sviluppo in sti cosi apple, li escluderei direttamente dal mondo, vuoi vedere un sito? acquistati un qualcosa di decente, non sti cosi esclusivamente “fescion” ma totalmente inutili!
# - postato da Gro - 09 Giugno 2010 - 11:58