Jedním z klíčových konceptů v jakémkoli reagujícím návrhu je změna velikosti výřezu. Je to proto, že se výhledy v mobilních zařízeních značně liší od výřezů pro stolní počítače. Chcete-li ovládat velikost výřezu, tradičně používáme metaznačku prohlížeče.
Metaznačka prohlížeče, stejně jako všechny nejhorší vývojáře naposledy navždy, není W3C platná. To bylo původně představeno Apple v Safari a od té doby byl přijat jinými prohlížeči. Výsledkem je nekonzistentní implementace.
Naštěstí se W3C opět vrátila k naší záchraně zavedením pravidla CSS @viewportu.
Použitím přístupu starých metaznaček bychom takto měli prohlížeč zobrazit, jakou velikost by měl být vidět jako:
Kromě výskytu neplatnosti není výkladem instrukce data, ale prezentace. Takže dodržováním principů pro separaci dat a prezentací musí být výkresová instrukce v CSS, nikoliv ve formátu HTML.
Řešení W3C v CSS vypadá takto:
@viewport {width: device-width;}Nebo střídavě můžete nastavit výřez s číslem, například takto:
@viewport {width: 640px;}Pravidlo @viewport můžete použít ve spojení s dotazy @media k tomu, aby se jakýkoliv výřez větší než 960 zmenšil na 960 pixelů, například:
@media screen and (min-width: 960px){@viewport {width: 960px;}}Pravidlo @viewport nám také dovoluje přiblížit stránku ve výchozím nastavení a dokonce nastavit maximální zvětšení:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}Blokování zoomu lze úplně zablokovat tak, že nastavíte vlastnost zoomu uživatele na pevnou. Nicméně přiblížení, zejména na smartphony, je nezbytné pro přístupnost a já bych doporučil používat tuto vlastnost.
Další velmi užitečná vlastnost nám umožňuje uzamknout naši webovou stránku v režimu na šířku nebo na výšku:
@viewport {orientation: landscape;}Zde je špatná zpráva: v současné době toto pravidlo podporuje pouze aplikace Internet Explorer 10 a Opera a vyžaduje předpony prohlížeče -ms- a -o-.
Zatímco to zklamá, nejméně, skutečnost, že funkčnost prohlížeče je již k dispozici ve většině prohlížečů, by měla znamenat, že je to jednoduché pravidlo, které se má vyzdvihnout. Doufejme, že to začneme vidět v nočních stavbách velmi brzy.
Záleží vám na dodržování standardů? Pomáhá W3C pomáhat nebo bránit pokroku na webu? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, obrázek okna přes LostBob Fotografie