February 24
Un numero crescente di persone di accedere a Internet da telefoni intelligenti, e l'iPhone è uno dei telefoni più diffusi smart attualmente sul mercato (a partire da gennaio 2011). Assicurarsi che il codice del sito web è compatibile con gli schermi di iPhone. Ci sono alcuni trucchi HTML è possibile utilizzare per rendere la vostra pagina Web guardare meglio sul dispositivo.
Link ad un foglio di stile separato per gli utenti di iPhone, quando in via di sviluppo per lo smartphone. Nel link, aggiungere il seguente tag:
i media = "solo schermo e (max-device-width: 480px)"
Questo determinerà tutti i browser con una risoluzione minore di "480" (la risoluzione iPhone) e collegare il foglio di stile. È possibile modificare le dimensioni del layout nel foglio di stile per riflettere la forma dello schermo di iPhone.
Il browser iPhone si ridurrà automaticamente una pagina Web per adattare sullo schermo nella sua interezza. Salvare gli utenti il fastidio di zoom utilizzando un meta tag per rendere il testo proporzionale alla dimensione dello schermo. Aggiungere il seguente codice per l'intestazione:
<Meta name = "viewport" content = "width = device-width" />
Includere un JavaScript operatore condizionale per reagire alla iPhone visualizzato in modalità ritratto o paesaggio. Aggiungere le specifiche di contenuto in "body.portrait" e stili "body.landscape" nel foglio di stile. All'interno della pagina principale, usare "<body class =" ritratto ">" per la modalità ritratto. Aggiungi il JavaScript per l'intestazione per mantenere in esecuzione:
window.addEventListener ( 'carico', setOrientation, false);
window.addEventListener ( 'orientationChange', setOrientation, false);
Funzione setOrientation () {
var = Orient Math.abs (window.orientation) === 90? 'orizzontale verticale';
var cl = document.body.className;
cl = cl.replace (/ ritratto | paesaggio /, oriente);
document.body.className = cl;
}