Mobiililaitteiden, siis käytännössä älypuhelinten ja tablettien, selaimet käsittelevät verkkosivuja hieman eri tavalla kuin työpöytäselaimet. Syy tähän piilee fyysisissä rajoitteissa; onhan pikseleitä käytössä huomattavasti vähemmän. Tavallisia verkkosivuja, siis sellaisia joita ei ole suunniteltu tai teemattu erikseen mobiililaitteille, selataan myös käytännössä eri tavalla: sivusta suurennetaan näytölle pieni pala kerrallaan.

Käytännössä tämä toteutuu mobiiliselaimissa juurikin edellä kuvatun tapaan, eli sivu piirretään kokonaisuudessaan valmiiksi taustalle ja laitteen näyttö on kuin pieni ikkuna, jonka läpi sivua tarkastellaan.

Kuinka monta pikseliä on 100%?

Mobiiliselaimissa selaimen leveys on hieman abstrakti käsite. Se myös vaihtelee selaimesta riippuen: Safarissa 980 pikseliä, Operassa 850, Androidin selaimessa 800 ja IE:ssä 974. Nämä arvot siis ko. selainten mobiiliversioissa. Sivun leveyden määrittäminen tyyleillä esimerkiksi 320 pikseliin ei varsinaisesti auta, sillä se ainoastaan kaventaa sisällön jättäen esimerkiksi mobiili-Safarissa selaimen oikeaan laitaan 660 pikseliä tyhjää.

 

Vasemmalla esimerkkisivu ilman määritettyä leveyttä ja oikealla tyylimääreellä html { width: 320px; }. Kaikki kuvankaappaukset iPhone 3GS, iOS 5.0.1.

Kun mobiilisivustot ja etenkin selaimen kokoon mukautuvat, ns. responsiiviset sivut yleistyvät kovaa vauhtia, tarvitaan avuksi <meta name=”viewport”>-tagi.

Säädöt kohdalleen

Viewport-tagilla voidaan määrittää esimerkiksi se, miten leveänä selaimen tulisi sivua tulkita. Mobiiliselainten ominaisuuksia listaavan mobilehtml5.org-sivuston mukaan viewport-tagia tukevat jo lähes kaikki modernit mobiiliselaimet, poikkeuksista mainittakoon melko yleinen Opera Mini, joka eroaa muista selaimista myös toimintaperiaatteeltaan. Maanmainiossa HTML5 Boilerplate:ssa tagille löytyy oletusarvo: <meta name="viewport" content="width=device-width"/>

Tagin width-parametrille voi antaa numeroarvon pikseleinä, mutta annettu arvo device-width on näppärä poikkeus, joka palauttaa aina kyseisen laitteen luontaisen leveyden. Esimerkiksi vaakasuuntaiselle iPadille 1024 pikseliä ja pystysuuntaiselle iPhonelle 320 pikseliä (hieman erikoisesti, mutta käytännöllisesti myös iPhone 4:n retina-näytölle). Näin esimerkiksi media queryillä voidaan kohdentaa resoluutiokohtaiset tyylimääreet oikein.

 

Aiempi sivu käyttäen viewport-tagia ja leveytenä arvoa device-width

Suuri osa sivustoista toteutetaan kuitenkin kiinteälle leveydelle, useimmiten 960–1000 pikselin levyisenä. Tällöin device-width -arvon käyttäminen saattaa saada aikaan enemmän vahinkoa kuin tagin puuttuminen.

Esimerkissä (kuva alla) sivun sisältöä ympäröi div-elementti, jolla on musta tausta, mutta ei määritettyä leveyttä. Otsikko- ja listaelementeillä (punainen teksti) on kiinteä 600 pikselin leveys. Vasemmalla on käytetty arvoa device-width, keskellä viewport-tagi on jätetty kokonaan pois ja oikealla arvona on 600.

 

Järkevin tapa tässä tilanteessa onkin asettaa arvoksi sivun kiinteä leveys. Oman maun mukaan sekaan voi lisätä vielä hieman marginaaleja, jos haluaa esimerkiksi taustakuvan näkyviin tai ei tahdo tekstin liimaavan aivan selaimen reunoihin. Henkilökohtainen suosikkini arvoksi kiinteälevyisille sivuille onkin 1024, jolloin esimerkiksi iPadilla vaakasuunnassa selaillessa sivua ei skaalata lainkaan.

Skaalauksesta

Tagin avulla pystyy myös kontrolloimaan sivun skaalausta. Parametrilla initial-scale voi määrittää lähtökohtaisen tason skaalaukselle. Oletuksena tämä määrittyy automaattisesti, mutta joskus voidaan haluta määrittää kerroin arvoon 1. Parametreilla minimum-scale ja maximum-scale voi asettaa rajat skaalaamiselle. Lisäksi skaalaamisen voi estää kokonaan asettamalla parametrin user-scalable arvoon no.

Skaalauksen estäminen (mukautuva layout) tai ylärajan määrittäminen arvoon 1 (kiinteä leveys) vähentävät turhaa zoomailua, mutta edellyttävät että teksti on luettavissa annetuissa rajoissa.

Pikaiset muistisäännöt

Skaalautuva sivu, esim. media queryillä: <meta name="viewport" content="width=device-width"/>

Kiinteä leveys (n. 960px): <meta name="viewport" content="width=1024, maximum-scale=1"/>

Lähteet ja lisälukemista kiinnostuneille: