iPhone HTML triks

February 22

Stadig flere mennesker tilgang til Internett fra smarttelefoner, og iPhone er en av de mest populære smarttelefoner som er på markedet (per januar 2011). Sørg for at nettstedet kode er kompatibel med iPhone-skjermer. Det er noen HTML-triks du kan bruke til å lage din webside ser bedre på enheten.

Link til en Style Sheet

Link til et eget stilark for iPhone-brukere når utviklings for smarttelefonen. I linken, legge til følgende kode:

media = "bare skjermen og (max-enhet bredde: 480px)"

Dette vil avgjøre alle nettlesere med en oppløsning mindre enn "480" (iPhone oppløsning) og knytte stilark. Du kan endre layout dimensjoner i stilarket for å gjenspeile formen på iPhone-skjermen.

Proporsjonale skriftstørrelser

The iPhone leseren vil automatisk krympe en webside for å passe på skjermen i sin helhet. Lagre brukerne å måtte zoome ved å bruke en metakode for å gjøre teksten proporsjonal med størrelsen på skjermen. Legg til følgende kode i header:

orientering Java

Inkluder en Javascript betinget operatøren å reagere på iPhone vises i stående eller liggende. Legg innholds detaljene i "body.portrait" og "body.landscape" stiler i stilarket. Innenfor hoved siden, bruk "<body class =" portrett ">" for portrettmodus. Legg Javascript for å overskriften for å holde den i gang:

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

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

funksjon setOrientation () {

Var orientere = Math.abs (window.orientation) === 90? 'Landskap': 'portrett';

Var cl = document.body.className;

cl = cl.replace (/ portrett | landskapet /, orient);

document.body.className = cl;

}