Avainsana-arkisto: web-suunnittelu

html5, css3, javascript, pikselinviilaus, typografia, wordpress, hakukoneoptimointi (seo), php, java

Puhelinten ja taululaitteiden näyttö- ja pikselikoot

Pikselin koko on ollut kutakuinkin vakio, 38 pikseliä senttimetrillä (96dpi). Kun on puhunut kirjasinkoosta “14 pikselin Arialina”, on voinut olettaa tulevansa ymmärretyksi, samaan tapaan kuin puhuisi tennispallon koosta. Koska näyttöjen piirtotarkkuus on kasvanut uusissa puhelin- ja taululaitteissa, pikselin käsite on muuttunut moniulotteisemmaksi.

Piet Mondrian: Composition Chequerboard, Dark Colors, from year 1919

Internet-sivujen tyylimäärittelyissä pituutta mitataan CSS-pikseleissä, jotta sivut näkyvät samalla tavoin eri laitteilla. Neljä CSS-pikseliä on noin yksi millimetri, kun kohdetta katsellaan käsivarren etäisyydeltä. CSS-pikseli on laitepikseliä tarkoituksenmukaisempi mittayksikkö, koska CSS-pikseli on vakiokokoinen ja laitepikseli suhteessa näytön piirtotarkkuuteen. Kun kirjasinkoko annetaan laitepikseleinä, Samsung Galaxy Note -puhelimessa neljätoista pikseliä on millimetrikooltaan vain noin puolet siitä, mitä toisessa Samsungin puhelimessa, Galaxy Y:ssä.

Pikselisuhde (engl. device pixel ratio) kertoo, montako CSS-pikseliä mahtuu laitepikselille. Goldilocks-blogiartikkelin kuvat havainnollistavat pikselisuhdetta. Taulukossa alla on listattu joidenkin tällä hetkellä myynnissä olevien laitteiden oletusselainten ilmoittamat pikselisuhteet, ja portrait- ja landscape-asennoissa ilmoittamat näytön leveydet.

Laite Koko Tarkkuus Portrait Land-
scape
Pikseli-
suhde
Yksikkö
Samsung Galaxy Y (S5360) 3,0” 240×320 320 427 0,75 css-
pikseli
Apple iPhone, 4th Gen 3,5” 640×960 320 320 2 css-
pikseli
Nokia Lumia 800 3,7” 480×800 480 480 undefined laite-pikseli
Samsung Galaxy S Plus (i9001) 4,0” 480×800 320 533 1,5 css-
pikseli
Sony Xperia S 4,3” 720×1280 360 640 2 css-
pikseli
Samsung Galaxy SII (I9100) 4,8” 480×800 480 800 undefined laite-pikseli
Samsung Galaxy Note 5,3” 800×1280 800 1280 2 laite-pikseli
Samsung Galaxy Tab 7,0” 600×1024  600  1024 1  
Sony Tablet S1 9,4” 800×1280  800 1280 1  
Apple iPad 2 9,7” 768×1024 768 768 1  
Apple iPad, 3rd Gen 9,7” 1536×2048 768 768 2 css-
pikseli
Samsung Galaxy Tab 10.1 10,1” 800×1280 800 1280 1  
Acer Iconia Tab A200 10,1” 800×1280 800 1280 1
Acer Iconia Tab A510 10,1” 800×1280 800 1280 1  
Asus Eee Pad Transformer 10,1” 800×1280 800 1280 1  

Näyttökokoa mitataan joskus matalan tason laitepikseleinä, vaikka CSS-standardin mukaan mittayksikkönä tulisi käyttää CSS-pikseliä. Valtaosa tällä hetkellä myynnissä olevista puhelimista ja taululaitteista ilmoittaa näytön leveyden CSS-pikseleissä. (Jos pikselisuhde on yksi, css-pikseli ja laitepikseli ovat samankokoiset.)

Näytön tuumakoko kertoo laitteesta enemmän kuin tarkkuus pikseleissä. Halkaisijaltaan alle viiden tuuman näytöllä varustetut laitteet ovat lähes aina puhelimia. Koska pientä laitetta on miellyttävää pidellä yhden käden varassa ja sitä katsellaan yleensä lähempää kuin suurempaa, sylissä pidettävää laitetta, puhelimissa on yleensä pienemmät pikselit kuin taululaitteissa. Taululaitteiden näyttökoot vaihtelevat välillä 7 – 10.1 tuumaa. On vain harvoja laitteita, joissa näyttökoko on välillä 5 – 7 tuumaa. Tällä hetkellä myytävistä laitteista tällainen näyttö on Samsung Galaxy Notessa ja kirjanlukulaitteissa.

Eräässä kaksi vuotta sitten tehdyssä testissä matalan tason laitepikseli oli vielä yleisin yksikkö, jossa puhelimet ja taululaitteet ilmoittivat näyttökoon. On hyvä, että CSS-pikselin käyttö on yleistymässä, koska se on laiteriippumaton ja loppukäyttäjälle tarkoituksenmukainen yksikkö.