Keskustelu: Ohjelmointikysymykset: CSS: Retina näyttö, kuinka tulee huomioida ?

Retina,

En tiedä mitä näkyy retina näytöllä ? Minulle kerrottiin, että, sivuni ei toimi retinalla oikein.

Retinassa oli jokin tupla pikseli juttu, en tiedä tarkoin mikä ?

Tässä on minun sivu ->

https://www.lautapelisivusto.com

Kuinka tuo retina pitää huomioida ? Entä onko jotain muutakin, joka on hyvä huomioida, kuin tämä perus html5 ja css ja js ?

Riittääkö jos tarkistaa, että, onko retina, ja sitten laittaa zoom 50% ja vielä retinaHD ja sille zoom 33%.

:) :) :)

Lisäys.
Minä korjasin innerHeight arvot outerHeight arvoihin, tämä näyttää nyt toimivan ainakin googlen työkalu käyttöliittymässä, missä on mm. devicePixelRatio x2 testi ruutuja.

--

Retina ja muut hires näytöt,

Hei, minä laitoin seuraavasti tämän canvaksen ->

function upDateGraphics ()
{
    var heittoYlapalkki = window.innerHeight * 6 / 100 ;
    var lww = setMinMax ( window.innerWidth , 480 , 7680 ) ;
    var lhh = setMinMax ( window.innerHeight - heittoYlapalkki , 320 , 4320 ) ;
    if ( getTimerSekuntti ( gTimer_CanvasWidth ) > 2 )
    {
        if ( parseInt ( lww * gCanvasWidthProsentti / 100 ) !== gCanvas0.width )
        {
            gCanvas0.width = parseInt ( lww * gCanvasWidthProsentti / 100 ) ;
            gCanvas1.width = parseInt ( lww * gCanvasWidthProsentti / 100 ) ;
            gCanvas0.height = parseInt ( lhh * gCanvasHeightProsentti / 100 ) ;
            gCanvas1.height = parseInt ( lhh * gCanvasHeightProsentti / 100 ) ;
            gCanvas0.style.width = parseInt ( lww * gCanvasWidthProsentti / 100 ) + "px" ;
            gCanvas1.style.width = parseInt ( lww * gCanvasWidthProsentti / 100 ) + "px" ;
            gCanvas0.style.height = parseInt ( lhh * gCanvasHeightProsentti / 100 ) + "px" ;
            gCanvas1.style.height = parseInt ( lhh * gCanvasHeightProsentti / 100 ) + "px" ;
            gBooUpdateLautaCanvas = true ;
        }

Tuo pikseli taitaa olla aina pikselin mittainen, oli sitten retina taikka mikä tahansa muu hires näyttö.

Eli, tuo sitten riittää ja minulla taas sitten jälleen toimii tämä asiakasohjelma oikein eri näytöillä.

:) :) :)

--

Nimenomaan "retina-näytöillä" pikseli ei ole pikseli vaan se on virtuaalinen mittayksikkö, joka vastaa suurin piirtein samaa fyysistä pinta-alaa kuin normaalin pikselitiheyden näytöllä.

Retina ja hires näytöt,

Toimiiko tuo minun koodi kaikilla hires näytöillä, mitkä suomessa ovat tavallisia ?

Minulla ei ole mahdollisuutta testata, eri hires näyttöjen toimivuutta itse.

Minulle ilmoitettiin aiemmin, että, retina näytöllä ei toimi, minä googlasin jonkin aikaa, ja tein muutokset koodiini, minulla on nyt uusi updatettu koodi uploadettuna, toivon että tuo ylläoleva koodi on toimiva nyt sitten.

Minulla ainakin tämä google chromen työkaluissa on tuo testi ruutu, jossa on 2x ja puhelimet ja ipadit ja muut, testiin, niin, siellä kaikki toimi oikein. :).

:) :) :)

--

Uskon, että sivustosi käyttökokemus on melko samanlainen HiDPI-laitteilla kuin muillakin. Jos joku käyttäjä kokee näytön ongelmaksi, pyydä häneltä vaikka kuva tilanteesta, niin tiedät edes, mitä pitäisi korjata. Muuten kannattaa varmasti keskittyä muihin asioihin kehityksessä.

Vikana,

Hei, minulla oli bugina innerHeight koodia etusivun zoomauksessa, tämä kun piti olla outerHeight, ja lisänä tuo asiakasohjelman canvaksen leveys ja korkeus oli aiemmin "%" mukaan, nyt se on "px", nämä kaksi asiaa korjasin, ja nyt pitäisi toimia jokaisella.

Minulla nyt toimii asiakasohjelman kanssa kaikki nämä googlen työkalu sivun ( toggle device toolbar ) ipad, pixel 2, galaxy, iphone esimerkit, esim. ipad jäi aiemmin jatkuvasti zoomia korjaavaan tilaan tässä device toolbarissa, lisänä kaikki muutkin laitteet olivat vielä etusivulla ilman mahdollisuutta, muuttaa selaimen zoomia näytöllä, zoomi aina automaattisesti laski uuden zoomin vaikka käyttäjä käytti selaimen zoomia, eli näyttö oli aina samanlainen, tämäkin toimii nyt.

Minulla oli nämä kaksi bugia, ( Etusivu.html innerHeight kun piti olla outerHeight ja AsiakasOhjelmien canvaksien "%" kun piti olla "px" ) kirjaan ne foorumilleni.

Minun ymmärryksellä nyt toimii taas kaikki laitteet, mitkä tukevat tätä javascriptiä mitä käytän, enää ei ole bugia.

:) :) :)

--

Lisäilempä tähän, kun resoluutioosta puhutaan.

Heti sivun avattua tuo logo/tervehdysteksti ei sovi ruutuun.
Kun itse sivu viimeinkin aukeaa, niin räjähtää silmille värikäs navigaatiomenu (2. Kuva) eikö parempi olisi piilottaa navigointi napin taakse puhelimella? Tai edes keskittää näkymä siten, että käyttäjä näkisi sisällön välittömästi
Etusivulla mikään sisällöstä ei mahdu niille tarkoitettuun div-laatikkoon.
Imgur-linkki kuviin

Käytössäni Oneplus6 mobiililaite.
Ymmärtääkseni tarkoituksenasi on pitää tämä responsiivisena? Siitä huolimatta käytännössä mikään sivulla ei toimi oikein mobiililla. Suosittelen opiskelemaan lisää responsiivisuudesta, useat asiat helposti korjattavissa.

Hei,

Kiitos palautteesta, nämä lautapelit on aika leveitä, olen rakentana koko sivuston sillä idealla, että, puhelinta ja tablettia ja näyttöä, pidetään vaaka leveänä.

Kun kääntää puhelimen, tabletin tai näytön vaaka leveään asentoon, niin, tuo pitäisi olla korjaantua.

Näytöt jotka ovat 4:3 eivät ole kunnolla tuettuna tällä hetkellä, mietin korjata tätä tulevassa, nämä lautapelit ovat niin leveitä, että, en tue 4:3 kunnolla, kuten on vaikkapa ipad.

Windows ja Android tabletit toimivat sitten jo paremmin mitä ipadit, kun ovat yleensä 16:10 tai 16:9 tai jotain noin.

Sivustoa on tarkoitus käyttää vaaka leveä asento laitteistoilla.

Laitappa vaikka samat kuvat vaaka leveä asento laitteilla, niin, on jo paremmin.

Ainoastaan lautapeliohjelma ja tabletpeliohjelma ovat responsiivisia canvas puolelta, mutta, niittenkin sisältö olettaa että näyttö on vaaka asennossa.

En tue responsiivisuutta tällä hetkellä, oletan että näyttö on vaaka asennossa koska lautapelit on leveitä.

Olen kirjanna laitteisto tukea, perus näytöille, FullHD - 8K ja tableteista windows ja android tableteille, oletan että näyttö suhde on tuo noin 16:10 tai 16:9 tai sitten ne ihan tosi leveät 3K ja 5K näytöt.

Minulla ei ole varsinaisesti tukea puhelimille, mutta, ne taitaa tällä hetkellä toimia ihan ok, tosin tämä etusivu.html ei lataudu joka puhelimeen, ihan sivun raameihin sopien, mutta, pelit toimivat kun puhelin on vaaka leveänä.

Minä kirjasin minimi vaatimuksiin leveät näytöt 16:9 tai 16:10 tai tosi leveä 3K tai 5K.

:) :) :)

--