Co je viewport? Viewport je ta část obrazovky, do které se webová stránka právě vykresluje, tedy viditelná plocha okna prohlížeče. Na počítači je velká, na mobilu malá a na výšku úzká. Web o tom sám od sebe neví, a proto se mu velikost viditelné plochy musí sdělit jednou jedinou řádkou v HTML kódu stránky.

Přirovnat se to dá k okénku, kterým se díváte na velkou mapu rozloženou na stole. Mapa je pořád stejná, ale podle velikosti okénka vidíte buď celý kraj, nebo jen jednu ulici. Viewport je právě to okénko a nastavení viewportu říká, jak se má mapa do okénka vejít.

Proč je to důležité? Mobilní telefony se kdysi musely vyrovnat s weby, které vůbec nepočítaly s malou obrazovkou. Naučily se proto předstírat, že mají široký displej, a celou stránku pak zmenšily jako fotografii. Výsledek znáte: text je nečitelně malý a je nutné jej roztahovat prsty. Tomu se předejde právě zmíněnou řádkou, kterou stránka prohlížeči sdělí, že má počítat se skutečnou šířkou zařízení.

Jak poznáte, že máte viewport nastavený správně? Otevřete web v mobilu. Pokud vidíte běžně velký text, sloupce pod sebou a nemusíte nic zvětšovat, je vše v pořádku. Pokud text připomíná zmenšenou stránku z počítače a musíte vodorovně posouvat, nastavení chybí. Bez něj nefunguje ani responzivní design, protože pravidla v CSS reagují právě na šířku viditelné plochy.

Co s tím, když nastavení chybí:

  • Hotové systémy – ve WordPressu a podobných systémech řeší tuto řádku šablona. Chybí-li, je šablona zastaralá a je na čase ji vyměnit.
  • Vlastní web – řádku doplníte do hlavičky stránky, tedy do části mezi značkami head. Soubory upravíte správcem souborů v klientské zóně nebo přes FTP.
  • Hotové sady stylů – například Bootstrap tuto řádku ve svých vzorech uvádí, takže na ni nezapomenete.

Má viewport vliv na vyhledávače? Ano, a zásadní. Vyhledávače hodnotí weby především podle toho, jak vypadají na mobilu. Stránka, kterou návštěvník musí na telefonu zvětšovat, si pohorší v SEO a lidé z ní rychleji odcházejí. Jde přitom o jednu řádku kódu, takže poměr námahy a přínosu je tady mimořádně příznivý. Další kroky popisuje heslo optimalizace webu.

Jedno doporučení na závěr: v nastavení viewportu nezakazujte návštěvníkům přibližování. Někteří lidé si potřebují text zvětšit, aby jej vůbec přečetli, a zakázané přibližování jim v tom brání. Web má být pohodlný pro všechny.