• 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.

    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:ää.

    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.

    Poikani osti uuden 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ä.

    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?

    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.

    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.

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

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

    _________________________

    Tuohon kännykkäversioon liittyy pieni ongelma. En ymmärrä, miksei Social Warfare -lisäosalle painikkeiden kokoa saa määriteltyä uusiksi.

    #content-sidebar aside {margin-left:0px!important;}}

    @media screen and (max-width:782px){
    #text-3 .swp_social_panel {max-height:40px!important; padding-bottom:2px !important;}
    #text-3 .swp_share_button {
    height: 40px !important;padding-top:4px;border-sizing:border-box;
    }
    #text-3 .swp_share_link {
    height: 32px !important;
    padding-bottom: 1px;
    }
    }
    Tuolla ei ollut mitään vaikutusta (#text-3 on vimpaimen id). Yritin saada 20px lisää kokoa oikean alareunan painikkeille.

    The page I need help with: [log in to see the link]

Esillä 5 vastausta, 1 - 5 (kaikkiaan 5)
  • CSS-tiedoston käyttämä ikkunan koko on eri kuin ruudun fyysinen resoluutio. Samsung Galaxy J5:n fyysinen resoluutio on kyllä 720×1280 px, mutta CSS-puolella ratkaisee viewportin koko ja se on 360×640 px.

    Jos mentäisiin puhtaasti fyysisten pikselien mukaan, asioista tulisi yksinkertaisesti liian pieniä nykykännyköillä, joiden näytöistä yksittäinen pikseli ei enää silmällä erotu. Siksi pikselit skaalataan CSS:ää varten tuplakokoon.

    Sivut eivät siis koskaan tule näkymään laitteen oikealla resoluutiolla, koska asia on kaiken käytännöllisyyden nimissä suunniteltu toimimaan näin. Asiasta on lisää selitystä esimerkiksi täällä: A pixel is not a pixel is not a pixel.

    Kyllähän noi sun CSS-asetukset toimivat mobiilissakin. Ne vain toimivat siihen sivun alareunassa olevaan nappiin, mutta eivät siihen ruudun alareunassa kelluvaan nappiin, joka ei ole #text-3-vimpaimen sisällä.

    Thread Starter tapiohuuhaa

    (@tapiohuuhaa)

    Mistähän sille sopivan CSS:n keksisi? No ehkä tuli muutenkin oikea reuna ahdettua liikaa. J5:n kännykkäselaimissa on ärsyttävä piirre, että siinä ei ole historia-selainta. Lisäsin sen foorumin ”käyttöliittymään”, mutta tila loppui vähän kesken.

    ________________

    Mitä niihin skaalauksiin tulee, oletettavasti suurin osa kännyköistä toimii niin, että ne lukevat alle 800px:n media-säännöt. Mutta eivät välttämättä ihan ihan samaa.

    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 yleensä viimeistään 1280px kohdalla, usein 1000px 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 800×1280 luokkaa oleviksi. Mistähän niiden käytöksestä ottaisi selvää?

    https://gerardnico.com/web/css/pixel_ratio

    antaa muutaman esimerkin. Olisi kiva, jos jostakin löytyisi kattava taulukko kännyköiden ja tablet-laitteiden pikseikoista ja skaalauskertoimista (parasta olisi jos olisi ilmoitus mikä on käytety viewport-arvo).

    • Tätä vastausta muokkasi 5 vuotta, 2 kuukautta sitten tapiohuuhaa.
    Thread Starter tapiohuuhaa

    (@tapiohuuhaa)

    Kävin paikallisessa Gigantissa ja testasin siellä sivujani. iPad Pro käyttää viewport-arvona 800×1280 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 jäi sivun lopun ja sivupalkin väliin enemmän tilaa.

    Noi kertoimet auttavat paljon, sillä iPad Pro:ta ei tarvitse huomioida mitenkään.

    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.

    Thread Starter tapiohuuhaa

    (@tapiohuuhaa)

    arvaan, että viewport on 800×1064, mutta tuo on puhdas arvaus.

    Thread Starter tapiohuuhaa

    (@tapiohuuhaa)

Esillä 5 vastausta, 1 - 5 (kaikkiaan 5)
  • The topic ‘WWW-sivujen näkyminen kännykässä’ is closed to new replies.