Tři viewporty na mobilních zařízeních

Dozvíte se, co je layoutový, co vizuální a co ideální viewport.

Co to ale ten viewport vlastně je? V kontextu webdesignu jde o označení pro výřez stránky viditelný v okně prohlížeče. Na zařízeních, kde je možné měnit velikost okna (typicky počítačích), tedy viewport představuje šířku a výšku okna bez rozhraní prohlížeče.

Za co může první iPhone?

Nejdříve ale k historickému kontextu. První iPhone přišel v roce 2006 do situace, kdy byl prakticky každý web navržený pro velké displeje. S tím se dítko Steva Jobse snažilo vypořádat zmenšením layoutu webu a přidáním možností konkrétní části zvětšovat.

Zároveň první iPhone tajně doufal, že začnou vznikat weby přizpůsobené malým obrazovkám. Proto přišel s možností, jak mu webaři mohou sdělit, že si právě s tímto dali práci. My pro to používáme meta značku pro viewport. V důsledku se tím sjednotí šířka layoutového viewportu se šířkou ideálního viewportu.

Ano, viewport na mobilech není jen jeden. Budeme používat terminologii Petera-Paula Kocha a rozlišovat viewporty layoutové, vizuální a ideální. quirksmode.org/mobile/metaviewport

Layoutový a vizuální viewport

Viewport layoutový a vizuální. Při použití správné meta značky jsou oba při načtení responzivní stránky na všech zařízeních stejně velké

Layoutový viewport

Plocha, do které se vykresluje layout stránky napsaný v CSS.

Pokud vložíte meta značku pro viewport, má stejné rozměry jako vnitřní část okna prohlížeče. Svou velikost ale mění, když uživatel zoomuje, zvětšuje nebo zmenšuje viditelnou část stránky.

Když na meta značku zapomenete, použije se výchozí šířka layoutového viewportu a web se vykreslí do ní:

  • IE10 na Win8: 1024 pixelů
  • iOS a Android: 980 pixelů

Javascriptem zjistíte rozměry layoutového viewportu pomocí:

document.documentElement.clientWidth
document.documentElement.clientHeight

K layoutovému viewportu se vztahují Media Queries pro velikost okna min-width a max-width.

Vizuální viewport

„Průzor“, přes který se díváte na layoutový viewport, a tedy stránku samotnou. Neobsahuje ovládací prvky prohlížeče. Vizuální viewport zůstává pořád stejný.

Javascriptem zjistíte rozměry vizuálního viewportu pomocí:

window.innerWidth
window.innerHeight

Ideální viewport

Ideální viewport je trochu z jiné kategorie než dva předchozí. Hodnotu totiž určuje výrobce prohlížeče. Představuje ideální rozměry layoutového viewportu, a tedy webové stránky zobrazované na používaném zařízení.

Ideální viewport získáte, když vydělíte hardwarové rozlišení hodnotou resolution (nebo postaru device-pixel-ratio).

Pojďme se teď podívat na rozměry jednotlivých viewportů pro pár vybraných mobilních zařízení:

Hardwarové rozlišení Výchozí layoutový viewport Ideální viewport device-pixel-ratio
iPhone 4 / iOS6 / Safari 640 × 960 980 × 1091 320 × 480 2
iPad Air / iOS8.1 / Safari 1536 × 2048 980 × 1225 768 × 1024 2
Lumia 630 / WP8.1 / IE11 480 × 800 1024 × 1554 480 × 800 1
Galaxy S5 / Android 4.4 / Android Browser 1080 × 1920 980 × 1532 360 × 640 3
Nexus 6 / Android 5 / Android Browser 1440 × 2560 980 × 1402 360 × 592 4

Proč nepoužívat screen.widthmin-device-width?

Javascriptem se u některých prohlížečů dá ideální viewport zjistit pomocí screen.width a screen.height. Jiné ovšem zase vracejí šířku a výšku displeje v hardwarových pixelech. Dělá to třeba Android Browser až do verze 4.2.

Javascriptové vlastnosti ideálního viewportu mají své protějšky v Media Queries min-device-width a min-device-height, ale ani ty se z těchto důvodů nepoužívají.

Můžete pokračovat článkem o meta značce pro viewport nebo viewportu na Windows.

Video: Viewporty na mobilních zařízeních

Praktická demonstrace viewportů na mobilních zařízeních a jak se k nim dostat v Javascriptu.

Komentáře