Invalid RSS feed!

Bevezetés a responsive tervezésbe – Viewport

-

Ismerkedjünk meg a responsive tervezés világával. A sorozatban átvesszük a tervezési szemlélethez kapcsolódó fogalmakat, területeket. 

rwd-cover-3

A viewport tulajdonságot és annak állíthatóságát főként a mobil eszközök megjelenésének köszönhetjük. A viewport nem más mint a böngésző azon területe, ahol a weboldalak megjelennek.

A mobil eszközök térhódításával a tervezőknek szembesülniük kellett a telefon kiesebb fizikai mérete által okozott megjelenítési korlátokkal.  Ha mobil eszközön akarunk megnézni egy nagy méretű weboldalt, akkor csak a beállított viewport értéknek megfelelő részt fogunk látni az oldalból (ami alapesetben a kijelző mérete lenne), a többi esetlegesen túl csordul a megjelenítési területen.

A viewport meta szemléltetése (forrás)
A viewport meta szemléltetése (forrás)

A mobil böngészők a jobb használat érdekében felül írják a kezdeti viewport-ot (vagyis a kijelző fizikai méretét), még pedig jóval nagyobbra. A Safari mobil böngészője esetében a széllesség 980 px lesz. Ezen a szélességen a legtöbb mai oldal bőven elfér, igaz az így megjelenített oldal nem a 100%-os méretében jelenik meg, hanem kicsinyített méretben, amit aztán nagyíthatunk. Ez a megoldás a navigálás szempontjából sokkal kézenfekvőbb, mint az amikor a weboldal területéből csak annyi jelenik meg, amennyi épp elférne a kijelzőn.

 Nézzünk egy rövid, illusztrált példát!

Alap helyzet: elkészítettük életünk első responsive oldalát és megnézzük mobil eszközön. Érdekes módon az oldal a nagyobb kijelzőkre beállított szerkezettel jelenik meg, nem pedig az erre a méretre beállított szerkezettel. Ezt a jelenséget a nézetablak meta tag hiánya okozza. Nem állítottuk be, hogy hogyan jelenjen meg az oldalunk a kisebb kijelzővel rendelkező eszközökön. Nincs más dolgunk, mint a következő sort hozzáadni a HTML dokumentumunk fejlécébe.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
A CodeGuide oldala a viewport meta érték beállítása előtt és után.
A CodeGuide oldala a viewport meta érték beállítása előtt és után.

A fent bemutatott jelenséget, a már említett, a mobil böngészőkben deklarált alap viewport beállítás okozza, vagyis hogy bepréselik a megjelenítendő oldalt a kijelző keretei köze (baloldali ábra).

Tehát viewport (nézetablak) meta elem segítségével felülírhatjuk a böngésző (user agent) által deklarált nézetablakot.

A vioport megértéshez szükségünk van további két fogalomra:

  • initial viewport (kezdeti nézetablak) – azt a viewport-ot jelenti, amit még nem írt felül a UA (user agent), vagy felhasználói stílus
  • actual viewport (tényleges nézetablak) – az a viewport, ami az értékek feldolgozása után jön létre.

Fontos megjegyezni, hogy a  viewport meta tag nem egy hivatalos W3C szabvány, hanem egy az Apple által kifejlesztett megoldás. Mivel az okos telefonok  alapjait lényegében az Apple fektette le, így értelemszerűen ők szembesültek elsőként a nézetablak problémájával. Igaz, hogy a kidolgozott megoldásuk nem hivatalos szabvány, azonban annyira jónak bizonyult, hogy később beépült a többi böngészőbe is, a Safari mellett.

Viewport meta elem és tulajdonságai

Most, hogy tudjuk, mi az a viewport meta és hogy mire való, itt az ideje megnézni miként szabhatjuk testre. A meta elemen belül a  content tulajdonság értékadásával szabályozhatjuk a fő tulajdonságait és azok értékét. A tulajdonság – érték párokat vesszővel elválasztva kapcsolhatjuk össze.

Eszköz szélesség – width

A width tulajdonsággal értelemszerűen a viewport terület szélességét szabályozhatjuk. Például, ha a telefonra készített oldalunk szélessége 320px, akkor a következő meta-val igazíthatjuk a nézetablak területét az oldalunkhoz.

<meta name="viewport" content="width=320" />

Ha több felbontású eszközre készítettük az oldalunkat, akkor választhatjuk a dinamikus érték megadást, az eszköz fizikai kijelzőmérete alapján:

<meta name="viewport" content="width=device-width" />

Eszköz magasság – height

A width-hez hasonlóan természetesen itt is van height tulajdonságunk, amit azonban kevésbé használunk, mivel a napjainkban készített oldalaknál a vertikális irány (le/fel görgetünk) a meghatározó, így az esetek többségében az oldalainknál csak a szélességet kell megadnunk.

<meta name="viewport" content="width=device-height" />

Initial-scale tulajdonság

A megfelelő megjelenítés érdekében tudjuk manipulálni a nagyítás mértékét.

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

Az initial-scale tulajdonság segítségével megadhatunk min és max értéket egyaránt:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0" />

A user-scalable tulajdonságát “no” értékre állítva letilthatjuk a felhasználói zoomolást. Ilyenkor célszerű a minimum/maximum scale tulajdonságot az initial-scale tulajdonsággal azonosra állítani. Valószínűleg nem túl szerencsés, ha a felhasználótól elvesszük a nagyítás lehetőségét. Figyeljünk rá, hogy csak nagyon indokolt esetekben használjuk!

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">

@viewport CSS szabály

A W3C elkezdte készíteni a hivatalos viewport szabványt. Mivel a viewport lényegében a megjelenésért felel, így az általuk kidolgozott szabványban a CSS-ben van a helye. A szabvány jelenleg még vázlat stádiumban van, azonban az IE 10 már támogatja.

A viewport-ot CSS-ben ugyanazokkal a tulajdonságokkal használhatjuk, mint HTML-ben a meta tag-et. Főbb eltérés, hogy az initial-scale tulajdonság helyett itt zoom-ot kell használnunk.

@viewport{
  zoom: 1.0;
  width: device-width;
  min-zoom: 1;
  max-zoom: 3;
  zoom: fixed;
}

Ha szeretnénk letiltani a felhasználói közelítést, akkor a zoom tulajdonságnak a fixed értéket kell megadnunk.

Jelenleg, Opera és IE 10 támogatja, azonban a prefix-eket célszerű használnunk.

@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

@viewport média lekérdezéssel

Azzal, hogy a viewport-ot a CSS-ben kezeljük lesz egy előnyünk. Egészen egyszerűen állíthatunk be Media Query segítségével különböző kijelző felbontásokhoz, más és más viewport értéket.

@media screen and (min-width: 640px) and (max-width: 1024px) {
  @viewport { width: 640px; }
  ...
}

Szabványról lévén szó, valószínű, hogy előbb, vagy utóbb ez lesz az elfogadott, így érdemes ezzel is megismerkednünk!

Összefoglalás

A nézet ablak beállításoknak köszönhetően akár dinamikusan is beállíthatjuk a megjelenítéshez használt terület méreteit. A viewport meta egy nagyon fontos része a responsive tervezésnek. Igaz, hogy jelenleg, az Apple által kidolgozott megoldás az elterjedt, de a W3C már elkezdett dolgozni a szabványosításon!

Ajánló

W3C

A sorozat további részei

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.