CSS per iPad

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.