Preparare un foglio di stile separato per iPhone

May 19, 2011

Può  essere utile in molti casi differenziare lo stile del proprio sito in base al dispositivo che lo visualizza, sia esso un tablet, uno smartphone o un desktop. Su device con display (e risoluzione) minore conviene avere dei bottoni più grandi in modo da aumentare l’usabilità del sito.
Il codice da inserire nell’ Head dell’html è:

1
2
3
4
5
6
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)"/>
<link rel="stylesheet" type="text/css" href="desktop.css" media=" screen and (min-width: 481px)" />

<!–[if IE]>
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
<![endif]->

Internet Explorer come al solito non supporta la diversificazione del css in base all’attributo media, quindi necessita di un caricamento a parte, explorer.css può essere sostituito con desktop.css a meno che non si voglia creare un css personalizzato per Internet Eplorer ed un altro per gli altri browser.