Come progettare siti web per l'iPhone

April 27

Come progettare siti web per l'iPhone


E 'utile avere un sito web iPhone-friendly. Avere un sito più facile da navigare incoraggerà gli utenti di iPhone di tornare e raccomandare il vostro sito ad altri. Se è già stato creato un sito web, è possibile effettuare un foglio di stile CSS separato che viene formattato con gli utenti di iPhone in mente. Le due sfide principali nella creazione di un sito web iPhone sono le dimensioni dello schermo iPhone e il dispositivo di input. L'iPhone non dispone di un mouse per un dispositivo di input; invece gli utenti utilizzano le dita per navigare.

istruzione

1 Avviare un foglio di stile CSS esterno e collegare le pagine web ad esso.

<= Media Link "solo schermo e (max-device-width: 480px)" href = "iPhone.css" type = "text / css" rel = "stylesheet" />

Questo link riconoscerà iPhone e dirigerà Safari di utilizzare il foglio di stile creato appositamente per gli utenti di iPhone in mente. All'interno il link, si può vedere la larghezza massima dello schermo è di 480 pixel come l'iPhone. Essa è legata a un foglio di stile denominato "iPhone.css." È possibile assegnare un nome al foglio di stile tutto quello che vuoi - basta assicurarsi di inserire il link corretto.

2 Aggiungere un meta tag alla sezione capo delle tue pagine web. Safari in iPhone scala automaticamente la pagina per adattarla di iPhone 320 pixel da schermo 480 pixel. Web designer preferiscono avere il controllo completo di come i loro siti web vengono scalate su dispositivi diversi.

<Meta name = "finestra" content = "width = 320, iniziale scala = 1.2, user-scalable = no">

Questo tag dice Safari che la larghezza contenuto del sito è larga 320 pixel e sarà impostare la scala iniziale 1.2. Inoltre non consente all'utente iPhone per scalare il contenuto del sito.

3 Sostituire tutti gli elementi del mouse-over sulla tua pagina. L'iPhone non fa uso di un mouse; invece, si utilizzano le dita per taping, lo zoom, sfogliando e pizzicotti. Dal momento che non vi è un cursore a rotolare sullo schermo, l'opzione del mouse-over non funziona su iPhone.

4 Sostituire tutti gli elementi non supportati. Flash e Java non sono supportati su iPhone. È possibile trovare un elenco di elementi non supportati nella libreria di riferimento Safari (developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html).

5 Ricordatevi di non mettere troppi link in un piccolo spazio, in quanto renderà più difficile per un utente iPhone per toccare con precisione il link corretto. E 'meglio utilizzare grandi pulsanti e link. È possibile formattare tutti i link all'interno del vostro foglio di stile CSS.

Consigli e avvertenze

  • Quando si progetta moduli sul vostro sito web, tenere conto che la metà dello schermo sarà ripreso dalla tastiera e rendere le forme semplici e piccole. Evitare l'uso di frame; gli utenti iPhone non hanno barre di scorrimento. Uso di colonne e blocchi renderanno la vostra pagina più user friendly.