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

Co je layoutový a co vizuální viewport? Co přesně přesně vyjadřuje device-pixel-ratio a proč nepoužívat screen.width v Javascriptu nebo min-device-width v CSS?

Na zařízeních, kde je možné měnit velikost okna, typicky desktopových, tedy viewport představuje šířku a výšku okna bez rozhraní prohlížeče.

Správná legrace s viewportem ovšem začíná na moderních smartphonech a tabletech. Hlavně proto, že tam viewport není jen jeden. Budeme používat terminologii Petera-Paula Kocha a rozlišovat viewport layoutový, vizuální a ideální.

Layoutový a vizuální viewport

Layoutový viewport

Plocha, do které se vykresluje layout stránky. Layout napsaný v CSS se počítá právě z něj. A pro pořádek – z pohledu CSS je layoutový viewport tzv. „initial containing block“.

Šířka výchozí layoutového viewportu je na mobilních platformách podobná:

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

Vezměme například tento zápis ručního nastavení viewportu:

<meta name="viewport" content="width=1000">

Tím nastavíme sířku layoutového viewportu na 1000 pixelů.

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

document.documentElement.clientWidth
document.documentElement.clientHeight

K layoutovému viewportu se vztahují Media Queries dotazy na 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.

Při prvním vykreslení stránky na mobilním zařízení je obvykle velikost vizuálního viewportu stejná s layoutovým. Když ale například uživatel zoomuje stránku, zvětšuje nebo zmenšuje layoutový viewport. Vizuální zůstává pořád stejný.

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

window.innerWidth
window.innerHeight

Ideální viewport

Ideální viewport je trochu z jiné kategorie než ty dva předchozí. Je to hodnota určená výrobcem 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 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

Layoutový viewport na rozměry ideálního viewportu

U skoro všech responzivních webů chcete layoutový viewport nastavit na rozměry ideálního viewportu. Uděláte to pomocí správné meta značky pro viewport a kousku CSS:

<meta name="viewport" 
  content="width=device-width, initial-scale=1">
@-ms-viewport { 
  width: device-width 
}

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. Některé ovšem vracejí šířku a výšku displeje v hardwarových pixelech. Dělá to třeba Android Browser až do verze 4.2, takže je tato hodnota v praxi dost nepoužitelná.

Javascriptové vlastnosti ideálního viewportu mají své protějšky v Media Queries min-device-width a min-device-height a i ty jsou tedy nejen díky tomu nepříliš použitelné.

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

comments powered by Disqus

Podobné články

zařazené v kategorii Responzivní design.

Responzivní SVG

26. 6. 2017 v příručce

Další ukázka z e-booku „Vzhůru do (responzivního) webdesignu“. Jak bez hacků zařídit pružné zobrazování SVG ve všech prohlížečích? A jak na plně responzivní SVG s přizpůsobivým obsahem?

Picture, nová značka pro vkládání obrázků

21. 6. 2017 v příručce

Aktualiace textu o novém tagu, umožňujícím definování variant obrázku pro různé stavy v responzivním webdesignu.

Vydal jsem nový e-book: „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“
Jak navrhovat a implementovat responzivní UI?

Více informací