Responzivní design

Test responzivity u Googlu:

https://www.google.com/webmasters/tools/mobile-friendly/

taky se hodí test rychlosti:

https://developers.google.com/speed/pagespeed/insights/

 

Meta tag

<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.)

Podmínkování ve stylech:

@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.

 

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.