Sådan aktiverer du Smartphone-kapacitet på websteder

Internettet brug via mobile enheder har været stigende siden lanceringen af ​​Apple iPhone. På grund af de forskellige skærmstørrelser på mobilenheder og deres berøringsskærminterface vises websites ikke eller fungerer på en mobilenhed på samme måde som de vises eller fungerer på en computerskærm. For at opretholde læseren skal du oprette en smartphone version af dit websted ved hjælp af cascading stilark.

Begrænsninger af Smartphone Browsing

Smartphone browsing adskiller sig fra computerbaseret browsing på to væsentlige måder. For det første er den tilgængelige skærmstørrelse på en smartphone meget mindre, end den er på en computer, hvilket betyder, at nogle websteder vil virke rodet eller i nogle tilfælde ulæselige på en smartphone. En smartphone-bruger bliver nødt til at rulle ned eller zoome ind på et websted, der er optimeret til computervisning. For det andet reagerer smartphones på berøringsklik i stedet for markørbevægelse, og derfor kan webstedselementer, der ændres baseret på markørbevægelse, være problematiske på en smartphone. For eksempel ændrer elementer, der ændres, når markøren svæver over dem, ikke på den ønskede måde på en smartphone, fordi svingning ikke gør noget på en smartphone. Også rullemenuer kan være problematiske for nogle smartphone-brugere.

CSS Relative Størrelser

Hvis du ændrer størrelsen af ​​visse elementer på din hjemmeside, behøver du kun at ændre CSS-filen til dit websted. Til smartphone læsbarhed, skal du ændre dine CSS dimensioner og skriftstørrelser til relative enheder i stedet for absolutte enheder. For eksempel skal bredden og højden af ​​bestemte specifikke elementer angives i procent i stedet for pixler. Dette vil størrelseselementer baseret på en procentdel af browservinduet eller overordnet element. For skrifttypestørrelser skal du bruge ems i stedet for pixels. Et em er lig med den aktuelle skrifttype i pixels. Derfor er to ems to gange den nuværende skriftstørrelse og så videre. Disse ændringer skal gemmes i en separat CSS-fil.

CSS Display Egenskaber

For at fuldstændigt skjule et element fra dit websted, skal du tilføje "display: none" -egenskaben til elementets CSS-stil. Egenskaben "display: none" vil skjule et element helt, så det ikke tager plads i vinduet. Brug dette på elementer som drop-down menuer eller billeder, der optager for meget skærmrum. Dette vil gøre det muligt for de andre elementer på dit websted at arrangere i vinduet som om det skjulte element aldrig havde været der. Hvis du bruger denne ændring, skal du sørge for, at alle vigtige oplysninger fra det skjulte element er synlige et andet sted på din side.

Omdirigerer browseren

Når en enhed får adgang til et websted, læser den først afsnittet af HTML-dokumentet. Du kan linke til flere CSS-stilark i et dokuments afsnit. Hvis en mobilenhed indlæser dit websted, vil browseren så indlæse stilarket identificeret af mediet = "håndholdt" -attribut i stedet for standard stilark. Du kan også omdirigere browseren til forskellige stilark baseret på skærmstørrelse. Dette kan være nyttigt, hvis du ønsker at style dit websted forskelligt til forskellige mobile enheder. Se Ressourcer for en liste over almindelige smartphone-skærmmål.

Alternativ HTML

Hvis du ændrer organisationen og layoutet af dit websted drastisk ud over en ny CSS-fil, kan du eventuelt oprette en ny HTML-fil med de ønskede ændringer. Hvis du opretter en anden HTML-fil, skal du omdirigere browseren til den nye HTML-fil, hvis brugeren ser webstedet på en smartphone. Udover at detektere mobilbrowseren, skal du ændre scriptet for at omdirigere til din alternative HTML-side. Se Ressourcer for et link til scripts til at opdage en mobilbrowser.