Mobilní web .info

Jak ovládat prohlížeč iPhonu pomocí tagu meta

04.11.2008 – 00:22:02

Safari v iPhonu je sice uzpůsobené pro prohlížení stránek z normálního webu, ale není to vždy to pravé. To je hlavně důvod, proč vzniká po světě tolik stránek upravených pro iPhone.

Některé mobilní stránky pro iPhone se chovají jinak, než klasická stránka. U mobilních stránek není potřeba scrollování do stran, není tam potřeba zoomavání atp. To vše jsou vlastnosti, které se dají vypnout, nebo nastavit.

Jak jsem zmínil v nadpisu, chování prohlížeče se nastavuje v xHTML hlavičce meta s parametrem name="viewport" kde máme k dispozici tyto vlastnosti:

• width - šířka viewportu, na který se vykreslí stránka. Pokud se nastaví moc velký, pak je text nečitelný, takže pokud nastavíte tuto hodnotu, iPhone nekontroluje čitelnost textu.
• height - výška viewportu. Chová se stejně jako width.
• initital-scale - úvodní zoom. Díky této vlastnosti je možné nastavit základní přiblížení nad stránkou. Opět je potřeba používat s rozumem. Může se hodit pokud máte nějakou stránku s pevnou šířkou upravenou pro ostatní telefony a chcete pro iPhone jen nazoomovat. Obecně pro mobilní weby pro iPhone doporučuji nastavit na 1.0
• user-scalable - tímto atributem je možné vypnout zoomování na stránce. To je opět užitečné pro mobilní web a zároveň tím zamezíte horizontálním scrollování
• minimum a maximum scale - pomocí těchto parametrů je možné definovat rozmezí zoomování na stránce

Tabulka s vlastnostmi bude potom vypadat takto:

Vlastnost	Výchozí hodnota	Minimum	Maximum
width	980	200	10000
height	based on aspect ratio	223	10000
inital-scale	fit to screen	minimum-scale	maximum-scale
user-scalable	yes	no	yes
minimum-scale	0.25	> 0	10
maximum-scale	1.6	> 0	10

Kombinací těchto hodnot je hodně, ale většina z nich napáchá spíš škodu než užitek, nebo jsou k ničemu.

Pro uživatelsky příjemné prohlížení mobilního webu používám:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

tato konstrukce způsobí, že se zamkne posouvání do stran, nastaví se zoom na 1, zamezí se a zoomování. Nic se potom nezvětšuje/zmenšuje a dá se říct, jak se stránka zobrazí. Navíc ji je možné posouvat jenom nahoru a dolu, takže při čtení textu neutíka odstavec do stran (ano stává se mi to ).