WWW-sivujen näkyminen iPad 9,7 -tason laitteissa

[Tapio X]

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

Minut kehotettiin tänne.

On tullut esille, että älykännykät käyttävät pystysuunnassa yleensä 360px viewport-arvoa.
iPad Pro käyttää viewport-arvona 800x1280

Oletan, että HD & 2K -tason tablet-laitteet toimivat samaan tapaan.

iPad 9,7 ja esim. Samsung Galaxy Tab 3:n näytön resoluution suhde on kuitenkin 1,33, mikä poikkeaa selvästi 800x1280 laitteen kuvasuhteesta. Arvaisin, että näyttää toiseen suuntaan kuin 800px ja toiseen suuntaan 1064px eli se toimisi kuin 800x1064px. Puhdas arvaus.
Minulla ei ole iPad-laitetta että voisin testata, menikö arvaukseni oikein.

 

[Stanley H. Tweedle]

Netissä on iso joukko työkaluja, joilla voi testata sivuston toimimista eri koossa.

Tässä yksi ihan randomisti googlesta: Screenfly / Test Your Website at Different Screen Resolutions

 

[Tapio X]

Kiitti tiedosta. Kokeilin tuota, mutta ei näyttänyt mitään, vaikka liitin sivustoni osoitteen osoitekenttään.

Pystyn pöytäkoneella aika hyvin emuloimaan monia näyttökokoja Google Chromelle ja IE:lle (miksei Firefoxillekin, mutta sitä en ole asentanut). Safari & iPad 9,7 sekä muut 1,33-mittasuhteiset tablet-laitteet ovat minulle ongelma, kun en tiedä, mikä on niiden viewport-arvo. Minulle tässä tilanteessa riittäisi saada tietää iPad 9,7 ja esim. Samsung Galaxy Tab S3:n käyttämä viewport-arvo.

 

[David ":DA" Imodium]

Minä suosin aina divien ja muiden jakavien elementtien skaalaamista käyttämällä dimensioiden yksikköinä vw ja vh, jolloin leveys ja pituus on aina tietty prosenttiosuus viewportista. Tällöin ei tarvitse edes ottaa viewporttiin kantaa.

Lisäys
vw Relative to % of the width of the viewport
vh Relative to % of the height of the viewport
vmin Relative to % of viewport's smaller dimension
vmax Relative to % of viewport's larger dimension

 

[Tapio X]

En luo perusleiskoja vaan modifioin WordPress-leiskoja CSS:llä + lisäilen niihin elementtejä vimpaimilla ja itse enemmän tai vähemmän luomallani PHP:llä.

WordPress-leiskoissa viewport-riippuvaiset arvot on yleensä annettu prosentteina. Esim. oikea sivupalkki on joillakin viewport-arvoilla 33,3%. viewport-riippuvaisia arvoja käyttämässäni teemassa on turhan paljon. Kun jouduin tekemään niihin muutoksia, oli paljon työtä.

Käyttämässäni leiskallassa oli alun perin 1-palstinen, 2-palstainen ja 3-palstainen versio, mutta en hyödynnä kolmipalstaisuutta - näyttää pahalta tietokoneruudulla.

Kyllä tämäkin sivusto käyttäytyy eri viewport-arvoilla eri lailla, mutta tässä on tavanomaista vähemmän eri arvomäärittelyjä.

Viewport pitää ottaa kantaa siksi erittäin paljon, että WordPress leiskoissa on 2-4 erilaista perustoimintatapaa, miten sivut näkyvät eri viewport-arvoilla.

viewport-jutut kyllä teettäneet hirveästi työtä.

Mitä fonttikokoihin tulee, yritin käyttää relatiivisia arvoja. Periaatteessa rem toimii samaan tapaan kuin vw. Minulla suurin osa fonttikoista on rem-arvoisia. Mutta jostakin perin merkillisestä syystä Chrome Android 1280x800 tablet-laitteessa 1.0rem perusfonttikoolle ei toimi.

Minulla oli sivupaneeli, jossa arvo 0.9rem - 1.0 leipäteksti näkyi älyttömän paljon isompana. Laitoin Android Chromelle tietyille elementeille asian korjaavan oman CSS:n PHP:llä. Ärsyttävää, että rem ja vw eivät toimi täysin luotettavasti Chromelle.
Bodylle antamani koko oli medium eli selaimen oletusarvo, johon muiden olisi pitänyt suhteutua.

 

[greenlight]

Kaikki yksiköt toimivat Chromessa luotettavasti, et vain osaa käyttää niitä. Pienen resoluution laitteilla selaimet ehkä pyöristelevät arvoja lähimpään todelliseen pikseliarvoon, jotta teksti säilyisi luettavana.

Minä suosin aina divien ja muiden jakavien elementtien skaalaamista käyttämällä dimensioiden yksikköinä vw ja vh, jolloin leveys ja pituus on aina tietty prosenttiosuus viewportista. Tällöin ei tarvitse edes ottaa viewporttiin kantaa.

No ei kyllä tule kovin toimivia leiskoja tuolla tavalla.

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.

Sulla ei ole mitään syytä tehdä tällaista tahallaan rampautettua paskaa, niin tee vain asiat suosiolla kunnolla. Kopioi breakpointit vaikka Bootstrapista, siellä on toimivat raja-arvot. Ja niitä on vain muutama ja se suurin eli xl on aika turha.

Yksittäisten laitteiden viewporteista on aivan turha ottaa stressiä, kun voit valita sellaiset raja-arvot, jotka toimivat kaikilla.

 

[Tapio X]

Kännykällä nyt vain pystysuuntainen toimivuus on niin paljon parempi, että teen suunnittelun vain sille. Suunnitteluni nimittäminen paskaksi on loukkaavaa kielenkäyttöä.

Kyllähän sivut joten kuten toisin päinkin toimivat, mutta monet toiminnallisuudet eivät ole käytettävissä vaakasuunnassa. Siistin vaakanäytön tällä:

@media screen and (max-height:401px){#right-own-sidebar {display:none;}}

Lisäpalkki on kokonaan pois käytöstä J5:llä - täytyy tutkia voiko tuon jättää vai pitääkö etsiä parempi arvo.

Otin 340x480px näytöltä pois kuusi toimintoa, jotka eivät mahtuneet näytölle. Jonkin tason tuen siis sillekin laitoin.

Kun suunnittelen sivut kännykällä vain pystynäytölle, pystyn luomaan kännykälle www- sivusta www-applikaatiota muistuttavan sivuston. Www-sivuni on ehdottomasti erittäin helppokäyttöiset kännykällä laite pystysuunnassa käytetettäessä. (Kuvaruutukaappaus, joka vastaa Samsung Galaxy J5 kännykän näkemää sivua Google Chromella).

Miksi ottaisin huomioon vaakasuunnan, kun niin päin saa vain ramman *:n? Kaikkia asioita ei saa matalassa ja levessä sivussa toimimaan sillä tavoin kuin haluan sivuston toimivan.

Mobiiliversiossa panostan nimen omaan tavanomaisiin kännyköihin. iPad 9,7 riittää, että sivut toimivat. Koska alle 783 px suunnittelu on tehty kännykkää ajatellen, ulkoasu on vähän hassu pystysuuntaiselle laitteelle, mutta en räätälöi sille sivuja kuten en muillekaan samat viewport-arvot omaaville laitteille.

 

[Tapio X]

"Kaikki yksiköt toimivat Chromessa luotettavasti, et vain osaa käyttää niitä."

Kyse on tästä asiasta: WWW-sivujen näkyminen kännykässä

Painotan, että se koskee vain yhtä tablet-laitetta. Pöytätietokoneessa eikä parissa kännykässä ole mitään fonttikoko-ongelmaa, vaikka niissäkin perusfontti on rem-arvoilla (erityiselementit ovat pikseleillä).

Tablet-laitteisiin en panosta. Niiden osuus sivuilla vierailuista on 0-5%. Kännyköiden osuus on molemmin puolin 50%.

 

[Tapio X]

Inhoan pudotusvalikoiden käyttöä tablet-laiteilla. Niitä on *piip* hankala käyttää sormin tai kynällä. Lisäsin sivustolleni tablet-laitteille (viewport 800-1280px) kännykkätyylisen valikon. Käytän itse mieluummin sitä. Ei kai ketään haittaa, jos tablet-laittelle on kaksi valikkoa?

 

[greenlight]

Sulla ei ilmeisesti ole mitään käsitystä siitä, kuinka käyttää esimerkiksi Bootstraps tai mitä tahansa css-freimistä. Laitat vain html-elementeille muutaman luokan ja saat automaattisesti kaikilla laitteilla ja orientaatio olla toimivan sivuston.

Kaikista huonoin vaihtoehto on alkaa näprätä käsin yksi elementti kerrallaan ja vielä jokaiselle näyttökoolle erikseen. Siinä ei ole mitään järkeä.

 

[Tapio X]

Minulla on käytössä tietty WordPress perusleiska, jota säädän haluamakseni. Siinä on lähtökohtaisesti tietty logiikka, jota ei kokonaan kannata yrittää muuttaa. Poistin alkuperäisen CSS:n kokonaan, mutta käytän sitä osana omaa CSS:ääni.

Kuten kerroin, näissä on mobiili/tietokone -valikon ohella muitakin.

Siinä on kolme perusversiota jo lähtökohtaisesti ja lisäsäätöjä - niitä on liikaa, mikä on hieman ärsyttävääkin.

Foorumiosiossa jako menee vähän eri lailla kuin muualla, koska sivupalkin käyttäytyminen piti laittaa erilaiseksi, että olisi järkevä. Näissä on enemmän näpräämistä kuin jos rakentaisi leiskan kokonaan itse alusta alkaen. Niitä ei voi verrata sinun käytäntöihisi, jos rakennat itse leiskan alusta asti.

Määritin 800-1280 tablet-laitteille oman valikkomäärityksen, joka ei näkyisi millekään muulle laitteelle. Löytyi tieto iPadeillekin: Ipad User Agents

Näemmä "iPad" yleensä riittää. Tosin kun luin erästä dokumentaatiota, iPad ei toimi iPad & Chrome -yhdistelmälle, sillä se näyttäisi laittavan sekä iPadeille että iPhone-laitteille iPhone, joka on kannaltani ihan pielessä. Jos laitan iPhone, iPhone luo valikon, jota se ei tarvitse lainkaan.

Ota nyt huomioon, että tablet-laitteille tulee oletuksena leiskassa kosketusnäytöllä huonosti toimiva pudotusvalikko. Sen rinnalle laitoin kännykkätyylisen valikon, jota on kosketusnäytöllä paljon parempi käyttää. Sain sen poistettua tietokoneversiosta. Tablet-laitteita käyttää niin vähän ihmiset nettiselailuun, että niillä tuplavalikosta tuskin on mitään suurempaa haittaa.

Jos haluan ottaa kunnolla huomioon eri laitteet, mitä väärää siinä on? Eri laitteissa on omat hyvät ja huonot puolensa. Kun kerran olen valinnut leiskan, joka lähtökotaisesti pyrkii näyttämään erilaisen rakenteen eri laitteille, olen vienyt tätä ajattelua vain mahdollisimman pitkälle.