Responzivni dizajn

Početna Layout Web stranice Viewport Jedinice mjere Media query

Što je viewport?

Viewport je prostor unutar kojeg se sadržaj stranice pojavljuje, a veličina viewport-a ovisi o veličini uređaja na kojem se stranica prikazuje.Postavljanjem ispravnog viewporta, sadržaj stranice će se prilagoditi različitim uređajima i korisnicima, čineći ga lakšim za čitanje i navigaciju.

Korištenjem viewporta možemo postaviti upute kako će stranica izgledati na uređajima s različitim veličinama ekrana. Bez ispravno postavljenog viewporta, web stranica će izgledati preveliko na mobilnim uređajima, prisiljavajući korisnike da zumiraju ili pomiču stranicu.

Postavljanjem ispravnog viewporta, sadržaj stranice će se prilagoditi različitim uređajima i korisnicima. Postavljanje initial-scale=1.0 znači da korisnik neće biti suočen s nepotrebnim povećanjem stranice pri prvom učitavanju na svom uređaju, čime je olakšano pregledavanje.

Oznaka za viewport

meta name="viewport" content="width=device-width, initial-scale=1.0"

width=device-width: postavlja širinu viewporta na širinu zaslona uređaja.
initial-scale=1.0: početni faktor uvećanja ili smanjenja prilikom učitavanja stranice. Postavljanjem vrijednosti na 1.0, stranica se učitava u izvornom obliku, ako je vrijednost veća od 1.0, stranica će biti uvećana ili ako je manja stranica će biti smanjena.