Hvordan lage HTML5 nettsteder som snapper på en iPad

May 2

Opprette nettsteder for mobile enheter kan være utfordrende når du vurdere omfanget av nettlesere og skjermstørrelser. Apple iPad er en enkel plattform for å designe for på grunn av sin standard skjermoppløsning og bruk av nettleseren Safari. For å få din webside til "snap" til kantene av skjermen uansett zoom-nivå eller orientering brukeren er på, må du bruke spesifikke HTML-koder som skal styre denne funksjonaliteten.

Bruksanvisning

1 Åpne en ny HTML-dokument i en tekst eller HTML editor. For å bruke HTML5 funksjonalitet gjennom design, må du starte på dokumentet med <! DOCTYPE html> erklæringen. Lag resten av dokumentet struktur ved å importere kode fra en eksisterende design, eller bruke en bare-bones sett med koder. For eksempel:

<! DOCTYPE html>

<Head>

</ Head>

<Body>

</ Header>

</ Avsnitt>

</ Avsnitt>

</ Article>

</ Footer>

</ Body>

</ Html>

2 Sett inn en tom linje under din "head" tag og skriv inn "view" meta tag. Safari bruker denne koden for å styre hvordan innholdet vises i nettleservinduet. For å la view å feste til innholdet i stående eller liggende format, bruk "width = device-width" verdi:

Du kan også holde seerne fra skalering siden ved å legge til en "user-skalerbar" verdi:

Dette alternativet vil deaktivere brukerens mulighet til å zoome inn eller ut for å holde sideinnhold låst til skjermstørrelsen.

3 Lag et stilark for siden eller åpne din eksisterende stilark. Bestem om du ønsker å optimalisere innhold for stående eller liggende format. Sett bredden av hovedinnholdet beholder til 980 piksler for liggende modus, eller 768 piksler for portrett. Når optimalisert for stående, gjør synsfeltet tag innholdet for å fylle skjermen når seeren slår enheten, heller enn å vise tomrom på sidene. Når optimalisert for liggende modus, vil synsfeltet automatisk skalere ned innhold til passe perfekt i smalere plass.

Hint

Bruk prosentverdier for bildestørrelser å tillate dem å skalere riktig når brukere viser websiden i enten orientering. Du kan også bruke CSS Media spørringer til å sette spesifikke CSS parametere avhengig av orienteringen betrakteren bruker. For eksempel:
@media bare skjermen og (min-enhet bredde: 481px) og (max-enhet bredde: 768px) {
img {
max-width: 700 piksler;
}
}
@media bare skjermen og (min-enhet bredde: 481px) og (max-enhet bredde: 1024px) {
img {
max-width: 940px;
}
}