Autor Zpráva
xciza
Profil
Ahoj,
dělám web za pomocí responsive design a media queries. Problém ovšem nastal u retina displaye iPadu, jelikož má rozlišení větší než běžné tablety (i monitory o úhlopříčce např. 23'' s Full HD). Narazil jsem na nějaké řešení ale moc mu nerozumím. Stačí přidat následující kód do podmínky načtení css stylu:
-webkit-min-device-pixel-ratio: 2

Bohužel nemám k dispozici iPad a tudíž si nemohu vyzkoušet co to dělá. Proto žádám o radu co vlastně tento kód znamená, co udělá? Anglickému vysvětlení na googlu nerozumím.

Díky
xROAL
Profil
xciza:
"the number describes the ratio of how much "real" pixels (physical pixels of the screen) are used to display one "virtual" pixel (size set in CSS)."
Z tohoto som pochopil, že -pixel-ratio určuje koľko fyzických pixlov má použiť na vykreslenie jedného virtuálneho...
V podstate teda pixel-ratio: 2; ako keby mení rozlíšenie displaya na polovicu... (ak som správne pochopil)
xciza
Profil
Ok to bych pochopil, ale co mě vrtá hlavou je celá specifikace pro retina display:
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Nemělo by být u min-device-width a max-device-width spíše opravdové rozlišení retina displaye (2048x1536) když to min-device-pixel-ratio bere 2 skutečné pixely na jeden virtuální?

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: