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???
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: