Vediamo come creare un sito per iPhone in modo da non obbligare l’utente a fare lo zoom sulla pagina.
La prima cosa da cambiare è la viewport nella pagina HTML con le dimensioni del dispositivo, che nel nostro caso è 320px:

<meta name = "viewport" content = "width = device-width">
<meta name = "viewport" content = "width = 320">

Aggiungiamo il file css:

<link href="iphone.css" type="text/css" rel="stylesheet" />

A meno che vogliamo utilizzare la stessa pagina tra il dispositivo e la pagina web:

<link media="only screen and (max-device-width: 480px)"
            href="iphone.css" type="text/css" rel="stylesheet" /> 

Ora settiamo il body del dispositivo:

body {

    width: 320px;

    font: 12pt Helvetica, sans-serif;

} 

Helvetica è il font di default dell’iPhone.
Possiamo definire anche la dimensione massina di alcuni elementi:
img, table {
    max-width: 320px;
} 

Se vogliamo non visualizzare elementi della pagina per il dispositivo è sufficiente aggiungere la classe:



.mobile_hidden {

    display: none;

}

Se la  pagina è costruita dinamicamente (per esempio in PHP), possiamo includere l’header in questo modo:



<?php include(“mobile_hdr.php”);?>  

Ed aggiungere questo script per determinare se sia o meno un dispositivo mobile a leggere la pagina web:



<?php

    $agent = $_SERVER[‘HTTP_USER_AGENT’];

    if (ereg(“(iPhone|BlackBerry|PalmSource)”, $agent) != false) {
    <meta name=”viewport” content=”width = device-width”>

    <link rel=”stylesheet” href=”/iphone.css”>
    }

    else {

       echo “<!– non è un dispositivo mobile –>”;

    }

?> 
Può essere utile avere la lista di user-agent per dispositivi mobili a tal proposito segnalo questo link:

lista user-agent
Creare l’icona

L’utente per iPhone può creare un bookmark del proprio sito e farlo apparire come icona nella home del telefono. Questi i passi per creare l’icona:


1 – scrivere un titolo con un numero di caratteri non superiore a 12. Se troppo lungo verà mozzato (es Ti….lo);


2 – creare un file PNG di dimensioni 57×57 senza effetto rifletto, perchè tanto lo metterà l’iPhone. Dargli il nome “apple-touch-icon.png” o “apple-touch-icon-precomposed.png” e inviarlo nella root del sito.


Specificare l’icona scelta nell’header della pagina html che si vuole utilizzare:



<link rel=”apple-touch-icon” href=”/custom_icon.png”/> OR

<link rel=”apple-touch-icon-precomposed” href=”/custom_icon.png”/> 

Attenzione

Safari per iPhopne ha un bug, non tiene in considerazione i nomi nei link vuoti:



<a name=”top”>

<a href=”#top”>Back to Top 

La soluzione è aggiungere un’immagine di un  bit in javascript:
<a href="javascript:window.scrollTo(0,0)">Back to Top</a>

buon lavoro.