La prima cosa da fare, se si vuole sviluppare per iPhone, e' identificare correttamente l'ambiente che stiamo utilizzando. Quest'ultimo ricopre un ruolo fondamentale nel rendering delle pagine. Ad esempio, utilizzando JavaScript e/o CSS, risulta necessario sapere con quali strumenti e tags bisogna dialogare per non incorrere in incompatibilità di forma e contenuto nelle nostre pagine. Come e' noto, iPhone utilizza un motore di rendering web pressoche' identico a quello del fratello maggiore per desktop. La stringa restituita dall'agente Safari iPhone e' la seguente:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+
(KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3



La piattaforma e' identificata da:

(iPhone; U; CPU like Mac OS X; en)



E la versione attualmente in uso nel mio terminale e':

Version/3.0 Mobile/1A543a Safari/419.3



Per poter impostare un layout corretto, e' necessario riferirsi ad un documento di stile (css) che vedremo in seguito. Tuttavia, indipendentemente dal foglio di stile applicato, e' necessario aggiungere degli attributi al tag element link, in maniera da essere sicuri di avere davantiun iPhone:

<!--[if !IE]>->
<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
<!-<![endif]->



La logica di questi attributi e' molto semplice: soltanto i browsers che capiscono le keywords screen ed only e di questi solo quelli che capiscono max-device-width, potranno adoperare il link riferito. La ragione dei commenti anti-IE deriva dal fatto che alcune versioni di InternetExplorer renderizzano il CSS ugualmente, indipendentemente dalle dichiarazioni media specificate.

Se abbiamo l'esigenza di riferirci al client iPhone attraverso uno script server-side, in PHP potremmo scrivere una condizione di questo tipo:

if (stristr($_SERVER['HTTP_USER_AGENT'], 'iPhone')) {}




Una delle caratteristiche piu' interessanti ed innovative di iPhone e' il supporto per viste multiple: landscape e portrait. Dal punto di vista web, la caratteristica diventa ancora piu' interessante, dal momento che potremmo sfruttarla per impostare dei CSS di layout differenti per il primo ed il secondo caso. Per ottenere la vista attuale, viene in nostro aiuto un nuovo metodo javascript supportato dall'oggetto window di safari: window.orientation. Una volta ottenuta questa informazione, e' possibile aggiornare un attributo distintivo del tag body. Ad esempio, possiamo chiamare l'attributo orient. Nel CSS, di conseguenza, useremo due selettori per attributo differenti:

body[orient=landscape]


e

body[orient=portrait]


Il javascript completo, potrebbe essere qualcosa di questo tipo:

<html>
<head>
<style>
body[orient=portrait] {
background-color: red;
}
body[orient=landscape] {
background-color: green;
}
</style>
</head>
<body orient="portrait">
<script type="text/javascript">
var currentOrient = 0;
function updateLayout()
{
if (window.orientation != currentOrient)
{
currentOrient = window.orientation;
if (currentOrient != 0) {
document.body.setAttribute("orient", "landscape");
} else {
document.body.setAttribute("orient", "portrait");
}
}
}
function hideBar()
{
window.scrollTo(0, 1);
}
setInterval(updateLayout, 400);
setInterval(hideBar, 400);
</script>
</body>
</html>