https://www.google.com/webmasters/tools/mobile-friendly/
taky se hodí test rychlosti:
https://developers.google.com/speed/pagespeed/insights/
<meta name="viewport" content="width=device-width">
řekne prohlížeči, že s tím nemá šachovat, zvětšovat atd. a zobrazit to tak, jak to je navržené.
<meta name="viewport" content="widh=device-width, initial-scale=1, shrink-to-fit=no">
mi funguje trochu lépe, protože bez toho initial-scale=1 se mobilní browser snaží zmenšit obsah tak, aby se na šířku vešel do viewportu (např. pokud text obsahuje široký obrázek). Shrink-to-fit zase přesvědčí Safari v iOS 9, aby po načtení neoddaloval stránku, pokud je v ní nějaký prvek náhodou širší než viewport.
(Při testování jsem dost často narážel na to, že si mobilní browser u každé URL pamatuje, jak byla nazvětšovaná minule, takže zjistit, jak by ji zobrazil běžnému (tj. novému) uživateli, šlo jen tak, že jsem zadal novou URL. Nejsnáze přidáním otazníku plus nějakého bordelu na konec adresy.)
@media (max-width:500px) {
body {pravidla}
p, li, td {pravidla;}
...
}
Když opravdu ladím pro mobily, raději používám max-device-width nežli max-width. Důvodem jsou otáčecí displaye mobilů, které ve verzi naležato a nastojato mají pak jinou verzi. Max-device-width je stále stejná, což je zase lepší při ladění těch webovek na desktopu.
Vlastně by mě docela zajímalo, jakou podmínku pro rozlišování plné a mobilní verze vlastně používat.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.