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.

9 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

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!

Gro
Gro

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.

Tommaso Baldovino
Tommaso Baldovino

soluzione interessante (molto) ma anche secondo me fare la detection lato server mi sembra più performante...

web firenze
web firenze

Fabrizio come al solito ha colto in pieno il senso del discorso ed ha proposto la soluzione più sensata. :-)

Gabriele Romanato
Gabriele Romanato

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...

Slam
Slam

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.

Fabrizio Calderan
Fabrizio Calderan

Io avrei un'idea diversa,forse: Un Css per le dimensioni, determinate in qualche maniera, più uno per tutto il resto....

Ratamusa
Ratamusa

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...

Andrea
Andrea

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.

Gabriele Romanato
Gabriele Romanato