Nwlapcug.com


Trucchi iPhone HTML

Un numero crescente di persone accede a Internet da smartphone, e l'iPhone è uno dei più popolari telefoni intelligenti 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 che è possibile utilizzare per rendere la pagina Web a guardare meglio sul dispositivo.

Collegamento a un foglio di stile

Collegamento a un foglio di stile separato per gli utenti iPhone durante lo sviluppo per smartphone. Nel link, aggiungere il seguente tag:

media = "solo screen e (max-device-width: 480px)"

Questo determinerà tutti i browser con una risoluzione minore "480" (la risoluzione di iPhone) e collegare il foglio di stile. È possibile modificare le dimensioni di layout nel foglio di stile per riflettere la forma dello schermo di iPhone.

Dimensioni del carattere proporzionale

Il browser di iPhone si ridurrà automaticamente una pagina Web per entrare sullo schermo nella sua interezza. Salvare gli utenti il fastidio di zoom utilizzando un tag meta per rendere il testo proporzionale alla dimensione dello schermo. Aggiungere il codice seguente alla tua intestazione:

< nome meta = "finestra" content = "larghezza = dispositivo larghezza" / >

Orientamento JavaScript

Sono un operatore condizionale di JavaScript per reagire al iPhone viene visualizzato in orizzontale o verticale. Aggiungere le specifiche contenute negli stili "body.portrait" e "body.landscape" nel foglio di stile. All'interno della pagina principale, utilizzare "< corpo class ="ritratto">" per la modalità ritratto. Aggiungere questo JavaScript al tuo intestazione per mantenerlo in funzione:

window.addEventListener ('carico', setOrientation, false);

window.addEventListener ('orientationchange', setOrientation, false);

Function setOrientation () {

orient var = Math.abs(window.orientation) = = = 90? 'paesaggio': 'ritratto';

var cl = document.body.className;

cl = cl.replace (/ portrait|landscape /, Oriente);

document.body.className = cl;

}