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?

Pojďme si nejprve říct, co to ten viewport vlastně je. V kontextu webdesignu jde o označení pro výřez dokumentu viditelný v okně prohlížeče.

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.

Píšu ebook o responzivním designu, pomozte mi prosím předobjednáním

11. 1. 2017 na blogu

Ano, je to tak. Už nějadou dobu pracuji na novém ebooku. O procesu tvorby responzivních webů, o svých zkušenostech s ním a taky trochu o principech dnešního webdesignu. Bude rozsáhlejší, barevnější a detailnější než jeho starší sourozenec.

Majitelé „m tečka“ webů pozor: Google bude mobile-first

10. 11. 2016 na blogu

Google už oficiálně představil svůj záměr začít indexovat a řadit primárně z pohledu uživatele mobilních zařízení.

Kurz „Responzivní design“

Responzivní design

Přijďte probrat principy, které s nástupem smartphonů a tabletů změnily tvorbu webů. Vezmeme to pořádně do hloubky a vše si vyzkoušíte. Kurz vede Martin Michálek. Příští termín: 9. března.

Termíny dalších veřejných školení

23. února Dnešní webová kodéřina
23. března Optimalizace rychlosti načítání
4. dubna SVG
20. dubna Bootstrap
11. května Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč