Slik aktiverer du Smartphone-kapasitet på nettsteder

Internett-bruk via mobile enheter har økt siden lanseringen av Apple iPhone. På grunn av de forskjellige skjermstørrelsene på mobile enheter og deres berøringsskjermgrensesnitt, vises ikke nettsteder eller fungerer på en mobil enhet på samme måte som de vises eller fungerer på en dataskjerm. For å opprettholde leseren, opprett en smarttelefonversjon av nettstedet ditt ved hjelp av kaskende stilark.

Begrensninger av Smartphone Browsing

Smartphone-surfing skiller seg fra datasettbasert nettlesing på to signifikante måter. For det første er den tilgjengelige skjermstørrelsen på en smarttelefon mye mindre enn den er på en datamaskin, noe som betyr at noen nettsteder vil virke rotete eller i noen tilfeller ulæselige på en smarttelefon. En smarttelefonbruker må rulle ned eller zoome inn på et nettsted som er optimalisert for visning av datamaskiner. For det andre reagerer smarttelefoner på berøringsklikk i stedet for markørbevegelse, og nettsideelementer som endres basert på markørbevegelser kan være problematiske på en smarttelefon. For eksempel, elementer som endres når markøren svinger over dem, vil ikke oppføre seg på den ønskede måten på en smarttelefon fordi svinger ikke gjør noe på en smarttelefon. Også rullegardinmenyene kan være problematiske for enkelte smarttelefonbrukere.

CSS Relative Størrelser

Hvis du endrer størrelsen på visse elementer på nettstedet ditt, trenger du bare å endre CSS-filen for nettstedet ditt. For lesbarhet for smarttelefoner, må du endre CSS-dimensjonene og skriftstørrelsene til relative enheter i stedet for absolutte enheter. For eksempel skal bredden og høyden til noen spesifikke elementer gis i prosent i stedet for piksler. Dette vil størrelseselementer basert på en prosentandel av nettleservinduet eller overordnet elementet. For skriftstørrelser, bruk ems i stedet for piksler. Én em er lik gjeldende skriftstørrelse i piksler. Derfor er to ems to ganger gjeldende skriftstørrelse, og så videre. Disse endringene skal lagres i en egen CSS-fil.

CSS Display Properties

For å helt gjemme et element fra nettstedet ditt, legg til "display: none" -egenskapen til elementets CSS-stil. Egenskapen "display: none" vil gjemme et element helt slik at det ikke tar opp plass i vinduet. Bruk dette på elementer som rullegardinmenyer eller bilder som tar for mye skjerm mellomrom. Dette vil tillate de andre elementene på nettstedet ditt å ordne i vinduet som om det skjulte elementet aldri hadde vært der. Hvis du bruker denne endringen, må du sørge for at viktig informasjon fra det skjulte elementet er synlig et annet sted på siden din.

Omdirigere nettleseren

Når en enhet får tilgang til et nettsted, leser den delen av HTML-dokumentet først. Du kan koble til flere CSS-stilark i et dokuments avsnitt. Hvis en mobil enhet laster nettstedet ditt, laster nettleseren stilarket som er identifisert av media = "håndholdt" -attributtet i stedet for standard stilark. Du kan også omdirigere nettleseren til forskjellige stilark basert på skjermstørrelse. Dette kan være nyttig hvis du ønsker å utforme nettstedet ditt annerledes for forskjellige mobile enheter. Se Ressurser for en liste over vanlige smarttelefonskjermdimensjoner.

Alternativ HTML

Hvis du endrer organisasjonen og utformingen av nettstedet ditt drastisk utover en ny CSS-fil, kan det hende du ønsker å opprette en ny HTML-fil med de ønskede endringene. Hvis du oppretter en annen HTML-fil, må du omdirigere nettleseren til den nye HTML-filen hvis brukeren ser på nettstedet på en smarttelefon. I tillegg til å oppdage mobilnettleseren må du endre skriptet for å omdirigere til din alternative HTML-side. Se Ressurser for en kobling til skript for å oppdage en mobilnettleser.