WWW-sivujen näkyminen kännykässä

[Tapio X]

Tee www-sivuja ja pyrin huomioimaan tavallisen älykännykän. Siihen liittyy yksi erittäin outo piirre.

Testkikännykälleni Samsung Galaxy J5 ilmoitetaan näytön resoluutioksi 720x1280px. Olen testannut Chromella.

Mutta pystysuunnassa se lukee CSS:n, joka on tarkoitettu alle 481px näytön leveydelle.

Vaakasuunnassa se lukee CSS:n, joka on tarkoitettu hieman alle 800px näytön leveydelle (leiskassani max-width:782px).

Vertailun vuoksi minä katson sivut myös 800x1280px tablet-laitteella ja selain lukee juuri noille näytönleveyksille tarkoitetun CSS:n. Siinä olen testannut sekä Chromella että Firefoxilla. Pieniä eroja on, mutta suurin piirtein näyttävät samoin. Outona piirteenä Chromessa on relatiivisten fonttikokojen väärä näyttäminen.

Kun katsoin 320x480px kännykällä sivuja, selain käytti juuri tuolle näytön leveydelle tarkoitettua CSS:ää.

Voisiko joku selittää, millä perusteella Samsung Galaxy J 5 puhelin ilmoittaa selaimelle, että se haluaa näyttää nettisivut ikään kuin pienempiresoluutioisena laitteena.

Onko tämä yleinen käytös myös muilla selaimilla ja muissa puhelimissa?

Mistä lähtien kännykkäselaimet näyttävät www-sivut sillä resoluutiolla, joka on laitteen todellinen resoluutio?

 

[zepi]

Älä tee mitään pikseleinä, vaan tee kaikki pt:nä.

 

[Tapio X]

Mikä Google Chrome 1280x800 ei toiminut oli rem laite pystysuuntaan laitettuna. Se ei näyttänyt eräitä tekstejä suhteessa juurielementtiin BODY vaan selain "veti hatusta" joissakin tilanteissa kokoarvot. Laitoin Chromelle vw-arvot erilliseen CSS-tiedostoon. Firefox näyttää rem-arvot oikein em. laitteessa eikä se kaipaa fonttikokokorjausta. Tosi outoa.

Nykyaikaisissa leiskoissa on paljon @media screen and (max-width:/min-width:XXXpx).

Niitä on taatusti kaikissa XenForo-foorumeissakin.

Vaimoni Galaxy lukee tämänkin sivuston CSS:n alueelta, joka on alle 500px. Kun haluan huomioida mobiililaitteet, olisi kiva tietää, miten ne käyttäytyvät.

Poikani osti uudehko Huawein (1920 × 1080 HD näyttö), sain käsityksen, että siinäkin sivut näkyvät samaan tapaan kuin Galaxyssä. Jos näin on, ero siihen, mitä CSS:ää selain lukee ja mikä on näytön resoluutio, on vielä isompi kuin Galaxyssä.

Kerran näin kalliin Huawein - se näytti sivut kuin tietokone - ongelmana tällöin tietenkin älyttömän pieni fontti suhteessa näytön kokoon. Onhan ruudun leveys (laite pystysuuntaan laitettuna) yli kolme kertaa pienempi kuin tavanomaisen tietokoneen. Fontti on samassa suhteessa pientä.

Käyttäjälle on erittäin suuri etu, jos selain näyttää sivut ikään kuin pieniresoluutioiselle näytölle, koska luettavuus on tällöin kunnossa. Itse asiassa huippukännykän omistajalle olisi suuri etu, jos hän voisi määritellä, mikä on virtuaalinen ruutukoko selaimelle.

Mutta millä kaikilla kännyköillä tällainen "virtuaalinen ruutukoko" on käytössä?

 

[evakko]

Voisiko joku selittää, millä perusteella Samsung Galaxy J 5 puhelin ilmoittaa selaimelle, että se haluaa näyttää nettisivut ikään kuin pienempiresoluutioisena laitteena.

Onko tämä yleinen käytös myös muilla selaimilla ja muissa puhelimissa?

On yleistä. Ajattelepa miten homma toimisi jos viisituumainen FullHD-puhelin ja 24" FHD-monitori näyttäisivät sivun samalla tavalla. Tarkempi selitys vaikkapa CSS - (Device) Pixel Ratio [Gerardnico]

 

[Tapio X]

Nuo laskentakaavat tuntuvat järkeviltä nimen omaisesti luettavuuden takia.

Kun laitoin tietokoneeseeni leveyden suurinpiirtein samaksi kuin miltä sivu näyttää testipuhelimessani, alueen leveys on n. 395px. Laskennallinen vaakaresoluutio on tällöin n. 700px eli laskellannalinen resoluutio CSS:ää ajatellen on n. 395x700px. Lukemat ovat noin puolet laitteen pikselimäärästä eli kerroin on n. 2x. Arvot ovat noin arvoja, sillä en tiedä, miten vierityspalkki lasketaan mukaan.

Katsoin esittämääsi sivua. Siinä Apple iPhone 6s laskennalliset arvot ovat 375 x 667 eli se näyttää aika lailla samoin ja kerroin on jotakuinkin sama. Tosin en ole koskaan testannut sivuja Safarilla.

Katsoin toista esimerkkiä.
Nokia Lumia 1020 1.6667 (‎1280 × 768 px)
tekee 459x766px
Näyttää kertoimen perusteella hieman eri lailla.

Entä mikähän on mahdollisesti poikani Full HD -laitteen kerroin? Tuo mainittu sivu ei kaikkia laitteita listannut.

Olen merkannut tietokoneen näytön alareunaan maalarin teipillä Samsung Galaxy J5:n käyttämän leveyden. Vastaavia merkkauksia voi muitakin laittaa.

Mitkähän laskennalliset leveydet olisi järkevä huomioida? Leiskan käännepiste on 782px ts. ->782 se käyttää mobiilivalikkoa. Sitä ennen merkittävä käännepiste on 481px, jossa yksittäisen kommentin ulkoasu muuttuu (ulkoasu on lainattu osittain eräästä XenForo-foorumista).

Mistä Selain saa muuten infon, mitä kerrointa tulee käyttää?

 

[Tapio X]

Tuon infon saamisen metodin tietäminen on toissijaista. Oletettavasti suurin osa kännyköistä toimii niin, että ne lukevat alle 800px:n media-säännöt.

Entä sitten iPad 9,7 ja vastaavan tason laitteet kuten esim. Samsung Galaxy Tab S3?
Entä 2K-laitteet, esim. Huawei MediaPad M5?
Entä iPad Pro, Samsung Galaxy Note 10 ja MS Surface Pro -tason laitteet?

Sivujen hyötyleveyssuunnittelu päättyy usein viimeistään 1280px kohdalla, usein 1000px paikkeille (tämä sivusto ei niin toimi, mutta eräät muut XenForo-sivustot päättävät hyötyleveyden 1200px paikkeille).

Jos sellaisen sivun laittaisi iPad Pro/MS Surface Pro -laitteeseen ilman skaalausta, vähintään puolet ruutupinta-alasta olisi nettiselailussa pelkkää tyhjää. Koska en hyödynnä koko 1280px leveyttää, tyhjää olisi reilusti yli puolet näytön pinta-alasta. Tuntuisi järkevältä, että niissäkin olisi skaalauskertoimia. Järkevimmiltä tuntuisi, että ne skaalaisivat sivut 800x1280 luokkaa oleviksi. Mistähän niiden käytöksestä ottaisi selvää?

Kävin paikallisessa Gigantissa ja testasin siellä sivujani. iPad Pro käyttää viewport-arvona 800x1280px eli näyttää sivut ihan samoin kuin tuon resoluution omaava tablet-laitteeni. Safari näytti sivut ihan ok.

Testasin Samsungin HD-kännykkää. Muuten aika lailla kuin Samsung Galaxy J5, mutta pystysuunnassa näkyy enemmän sivua.

Noi kertoimet auttavat paljon, sillä iPad Pro:ta ei tarvitse huomioida mitenkään. Skaalauskerroin on siinä n. 2,5, mutta kaiketi kerroin laitetaan sellaiseksi, että se vastaa 800-1280 näyttöä.

Olettavasti HD-tabletit ja ns. 2K-laitteet esim. Huawei MediaPad M5 viewport-arvona käytetään 800x1280px eli todennäköisesti nekin näyttävät sivuni samaan tapaan kuin oma tablet-laitteeni.

Mutta mikähän on iPad 9,7 -tason näytön omaavat laitteiden skaalaussuhteet? (esim. Samsung Galaxy Tab 3 ) Näiden laitteiden mittasuhteet näet poikkeavat merkittävästi edellä luettemistani laitteista.

 

[evakko]

Kannattaisi varmaan vaihtaa foorumilla HTML+CSS -alueelle niin voi joku osaava sattua vastaamaan rautapuolella ei ehkä ole vahvaa tietämystä montako erilaista tapausta kannattaa huomioida jne. Itse sanoisin mutulla että kolme riittää eli tosi pieni, laadukas mobiili ja työpöytä. Kun et estä sivun zoomausta niin aika pitkälle käyttäjien pitäisi pysyä tyytyväisinä.

Eiköhän se pixel ratio ole ihan laitteen ominaisuus että selain vaan kysyy laitteelta, mutuillen. Kenties joissain selaimissa on mahdollisuus vaihtaa suhde esim. developer-tilassa, en ole tutkinut tarkemmin.

 

[Tapio X]

Olikos täällä suunnitteluosasto?
Laitteet, joilla olen testaillut sivuani:
* 320x480 - tuin joskus, mutta en enää tue tätä laatuluokkaa. Eräs pystyttämänni sivusto tukee vielä tätä luokkaa; ei pixel ratio -skaalausta
* 720x1280 kännykät ja HD-kännykät eli n. 360x640 emuloivat laitteet (pystysuhde vaihtelee).
* 800x1280 -tablet laitteet + tähän suhteeseen skaalava iPad Pro
* 900x1600 läppärit/pöytätietokoneet siten, että hyötyleveys on sama kuin tablet-laitteella

Koska hyötyleveys ei täytä koko läppärin ruutua, yritän laittaa sille sivut vain siten, että feikkaavat varta vasten sille suunniteltua sivustoa ts. pyrin siihen, että lopputulos näyttää siedettävältä. Leiska ei tue samaan tapaan tietokonenäyttöä kuin tämä sivusto.

iPadin näytön kuvasuhde on 1,33. Arvaisin, että näyttää toiseen suuntaan kuin 800px ja toiseen suuntaan 1064px eli se toimisi kuin 800x1064px resoluution omaava laite. Puhdas arvaus.

 

[nnaku]

Olikos täällä suunnitteluosasto?
Laitteet, joilla olen testaillut sivuani:
* 320x480 - tuin joskus, mutta en enää tue tätä laatuluokkaa. Eräs pystyttämänni sivusto tukee vielä tätä luokkaa; ei pixel ratio -skaalausta
* 720x1280 kännykät ja HD-kännykät eli n. 360x640 emuloivat laitteet (pystysuhde vaihtelee).
* 800x1280 -tablet laitteet + tähän suhteeseen skaalava iPad Pro
* 900x1600 läppärit/pöytätietokoneet siten, että hyötyleveys on sama kuin tablet-laitteella

Koska hyötyleveys ei täytä koko läppärin ruutua, yritän laittaa sille sivut vain siten, että feikkaavat varta vasten sille suunniteltua sivustoa ts. pyrin siihen, että lopputulos näyttää siedettävältä. Leiska ei tue samaan tapaan tietokonenäyttöä kuin tämä sivusto.

iPadin näytön kuvasuhde on 1,33. Arvaisin, että näyttää toiseen suuntaan kuin 800px ja toiseen suuntaan 1064px eli se toimisi kuin 800x1064px resoluution omaava laite. Puhdas arvaus.

Mikä tahansa laitteen viewportin nyt selvittää minuuteissa googlesta.
esim. Popular screen resolutions: designing websites for all » Media Genesis

Onko sulla font-size alustettuna html elementille, jotta remit toimivat oikein.

esim

/* root element */
html{
  font-size:16px
}

Jolloin 1rem on kaikkialla 16px. Tämä korjasi aikanaa erään mobiili chromen rem bugin. En osaa sanoa onko nyt kyseessä sama ongelma.

 

[Tapio X]

Luulen, että toi rem-ongelma on ihan sama. Olin laittanut "medium" - arvelin että selain osaisi määrittää sen mitä se sillä tarkoittaa. Firefox osasi mutta ehkä Chrome vaatii siihen pikseliarvon.

Kiitti tuosta listasta. Paikkasi riittävästi tietoaukkoja. Perus iPadin suhteen arvasin kyllä ihan pieleen. Näyttää kapeampaan suuntaan mobiilivalikon ja toiseen suuntaa pudotusvalikoita käyttävän valikon. Kyllä sivuni noinkin toimii, mutta tulee kyllä melko iso ero, kun kääntää laitteen eri suuntaan! No käyttäjä voi valita laitetta kääntämällä, kumpaa versiota käyttää. Molemmissa on omat etunsa.

Aukoksi näytti aluksi jäävän esim. Samsung Galaxy Tab S3 ja Acer Chromebook Tab 10. Niissä on sama resoluutio kuin iPad 9,7:ssa, mutta se ei tarkoita, että ne silti käyttäisivät samaa viewport-arvoa.

Jos nuo toimivat kuten Nexus 9:

Nexus 9 1536 x 2048 768 x 1024

näyttävät nekin iPad 9,7 tyyliin. Tämä on varsin todennäköistä. Mitään varsinaista aukkoa ei tainnut sittenkään jäädä.

No tietokonenäyttö nyt aika hyvin vastaa toimivuutta myös mobiililaitteissa. Ei ihan 100% tarkka, mutta aika lailla sama lukuun ottamatta Android Chromen rem-ongelmaa, jota Windows-versiossa ei ole. Safari ja IE näyttävät hyvin pitkälle samalla tavalla.

Kun sivut skaalautuvat tähän tapaan, tietokoneella kyllä voi aika hyvin arvoida toimivuutta kun kaventaa ruudun jonkin tietyn laitteen käyttämään viewport-arvoon.

Mitä kännykkäversioon tulee, tein sivut niin, että ne toimivat vain laite pystysuunnassa. Käyttäjä kyllä huomaa varsin äkkiä tuon asian. Kännykkää käytetään nettiselailuun yleensä siten, joten en usko sen olevan ongelma. Toisinpäin puhelin on usein liian matala järkevään surffailuun. Minusta vaakasuunta soveltuu lähinnä vain elokuvien ja muun videomateriaalin katseluun.

Suunnitteluvinkki. Käytän Vivaldia. Siinä saa rinnakkaisia välilehtiä ja vasempaan reunaan säädettävän väliaikaisen sivupaneelin, johon saa mm. www-sivun, mutta myös monta muuta asiaa, mm. muistikirjan. Kun säädän ikkunoiden leveyksiä, saan nopeasti katsottua, miltä tietyllä leveydellä sivu näyttää. Näytön alalaidassa on maalarinteippi, johon olen merkinnyt kyllä vain Samsung Galaxy J5:n leveyden.

Ihan tarkkaa kuvaa ei minulla ole, miten viewport lasketaan. Miten siihen vaikuttaa vierityspalkit ja selaimen kehykset?

 

[FlyingAntero]

Olikos täällä suunnitteluosasto?

Löytyy ainakin erillinen osio sovelluskehitykselle, jossa sitten voi olla aiheeseen sopiva ketju (esim. CSS-kysymyksiä). Toki täälläkin voi kysellä, kun vastauksia näyttää tulevan.

• Ohjelmointi, pelikehitys ja muu sovelluskehitys

 

[Tapio X]

Laitoin tästä Ohjelmistokehittelyosastoon säikeen WWW-sivujen näkyminen iPad 9,7 -tason laitteissa ( WWW-sivujen näkyminen iPad 9,7 -tason laitteissa)

Tuo asia tuli selväksi. Sain nyt riittävän kuvan siitä, miten www-sivut eri laitteissa käyttäytyivät.

Sain selville myös tablet-käyttäytymisiä. Ongelmaksi muodostui Chrome ja iPad. Sain kuvan, että Chrome ei erikseen tunnista iPhone ja iPad-laitteita.