Responzivní design - "@media only screen and (max-width:xyz) " - jak se pocita?
Pokousim se upravit jednu webovou app pro ruzne zarizeni, melo by to byt rozumne citelne a ovladatelne jak na mobilech, tak na tabletech, nebo na TV s androidem. Jako - nejak ty styly zvladam, ale je mi zahadou jak si zarizeni pocita "max-width:" hodnotu.
Mam treba defaultni styl ktery chci mit vsude na velkych obrazovkach, a pak pro mensi prvni upraveny mam treba:
@media only screen and (min-width: 736px) and (max-width: 1600px)
/* prni mobilni responzivni */
{
css styly pro tohle rozliseni
}
- a na 4k TV se mi stejne zobrazi ne ten pro plne rozliseni, ale "prvni mobilni". Mobil mam FullHD - a stejne se mi zobrazi styl pro "uzsi nez 736" ktery tam mam taky definovany. Na nejakem 2k tabletu mi zobrazuje "prvni mobilni" i pri "max width: 1200". Tak ksakru, jak se mam dopracovat k stavu kdy se mi zobrazi na tabletu/mobilu jiny styl nez na velke 4k TV? Dle pixelu to absolutne nesedi, prepocitava si to nejakou bulharskou konstantou dle .ppi displeje???
U mobilních zařízení se počet pixelů v každém směru dělí 2 nebo i 4. Takže takové zařízení s FullHD displejem se bere třeba jako by mělo 960x540.
najdi si CSS pixel vs real pixel https://www.google.com/amp/s/www.vzhurudolu.cz/amp/prirucka/css-pixel
Diky, to jsem netusil. Slusny gulas teda, u te 4k TV bude "CSS pixel" asi 3 normalni. Neřešitelný problém, chlapi. Ani očko ne-na-sa-díš! Past vedle pasti, p*čo.
Neřešitelný problém? Jako nejsem odborník na weby, ale neřeší to náhodou tady to?
https://jecas.cz/meta-viewport
Osobně mám na responzivním webu, kde mám různé nastavení pro různé velikosti, toto:
<meta name="viewport" content="width=device-width,initial-scale=1">
Taky diky, taky prostuduju.
Jen takovej tip, možná to znáš: Chrome, F12 a nahoře v pravé části okna druhá ikona zleva přepíná mobilní zobrazení a v levé části okna nahoře uprostřed se dá vybrat mezi více mobily/tablety, umí to režim na výšku i na šířku.
jo ja vim, je i ve FF, i s tim ze si muzu nadefinovat vlastni...
...nicmene neresi problem ze chci jiny design a ovladani na Smart TV s androidem nez na mobilech a tabletech (logicky, ovladani dalkovym je jine nez smudlani prstem). Nezbude dle vseho nic nez detekovat typ zarizeni a dle toho prepnout .css - uz mam nejspis i vyresene.
A pro zajimavost, pravde podobne standardem dokonce i u 4k televizi je ze pro samotny system se tvari "display resolution" jako 1920x1080, ale se "Scaled Density" 2.0 - takze veskere styly a layout se musi pocitat pro 960x540.px. Teda, zatim overeno na trech ruznych android TV - na vsech stejne: