7/25/2019 Bevezetés a responsive tervezésbe - 04 Viewport

http://slidepdf.com/reader/full/bevezetes-a-responsive-tervezesbe-04-viewport 1/12

Bevezetés a responsive tervezésbe – Viewport HTML / CSS (HTTP://CODEGUIDE.HU/WEBDESIGN/HTML_CSS/) LAKI ÁDÁM (HTTP://CODEGUIDE.HU/PROFIL/LAKIADAM/) 2014. 05. 21.

Ismerkedjünk meg a responsive tervezés világával. A sorozatban

átvesszük a tervezési szemlélethez kapcsolódó fogalmakat,

területeket.

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 abö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 azoldalból (ami alapesetben a kijelző mérete lenne), a többi esetlegesen

túl csordul a megjelenítési területen.

 (http://codeguide.hu)

7/25/2019 Bevezetés a responsive tervezésbe - 04 Viewport

http://slidepdf.com/reader/full/bevezetes-a-responsive-tervezesbe-04-viewport 2/12

A viewport meta szemléltetése (forrás (http://frugihoyi.wordpress.com/))

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, hanemkicsinyí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!

7/25/2019 Bevezetés a responsive tervezésbe - 04 Viewport

http://slidepdf.com/reader/full/bevezetes-a-responsive-tervezesbe-04-viewport 3/12

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.

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).

<meta name="viewport" content="width=device-width, initial-sc

7/25/2019 Bevezetés a responsive tervezésbe - 04 Viewport

http://slidepdf.com/reader/full/bevezetes-a-responsive-tervezesbe-04-viewport 4/12

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, amitmé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ékekfeldolgozá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ége320px, akkor a következő meta-val igazíthatjuk a nézetablak területét az

7/25/2019 Bevezetés a responsive tervezésbe - 04 Viewport

http://slidepdf.com/reader/full/bevezetes-a-responsive-tervezesbe-04-viewport 5/12

oldalunkhoz.

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:

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 azesetek többségében az oldalainknál csak a szélességet kell megadnunk.

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=320" />

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

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

<meta name="viewport" content="width=device-width, initial-sc

7/25/2019 Bevezetés a responsive tervezésbe - 04 Viewport

http://slidepdf.com/reader/full/bevezetes-a-responsive-tervezesbe-04-viewport 6/12

Az initial-scale tulajdonság segítségével megadhatunk min és max

értéket egyaránt:

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 anagyítás lehetőségét. Figyeljünk rá, hogy csak nagyon indokolt

esetekben használjuk!

@viewport CSS szabály

A W3C elkezdte készíteni a hivatalos viewport

(http://dev.w3.org/csswg/css-device-adapt/#viewport-meta) 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.

<meta name="viewport" content="width=device-width, initial-sc

<meta name="viewport" content="width=device-width, initial-sc

@viewport{

7/25/2019 Bevezetés a responsive tervezésbe - 04 Viewport

http://slidepdf.com/reader/full/bevezetes-a-responsive-tervezesbe-04-viewport 7/12

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.

@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.

  zoom: 1.0;

  width: device-width;

  min-zoom: 1;

  max-zoom: 3;

  zoom: fixed;

}

@-ms-viewport {

  width: device-width;

}

@-o-viewport {

  width: device-width;

}

@viewport {

  width: device-width;

}

@media screen and (min-width: 640px) and (max-width: 1024px)

@viewport { width: 640px; }  ...

}

7/25/2019 Bevezetés a responsive tervezésbe - 04 Viewport

http://slidepdf.com/reader/full/bevezetes-a-responsive-tervezesbe-04-viewport 8/12

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árelkezdett dolgozni a szabványosításon!

Ajánló

W3C (http://dev.w3.org/csswg/css-device-adapt/#viewport-meta)

A sorozat további részeiBevezetés a responsive tervezésbe – Első lépések

(http://codeguide.hu/2014/02/12/bevezetes-responsive-tervezesbe-elso-lepesek/)

Bevezetés a responsive tervezésbe – Media Queries

(http://codeguide.hu/2014/03/05/bevezetes-responsive-tervezesbe-media-

queries/)

Bevezetés a responsive tervezésbe – Rácsszerkezet

(http://codeguide.hu/2014/05/01/bevezetes-responsive-tervezesbe-racsszerkezet/)

Cimkék: Responsive (http://codeguide.hu/tag/responsive/), tervezés

(http://codeguide.hu/tag/tervezes/)

Megosztás:

7/25/2019 Bevezetés a responsive tervezésbe - 04 Viewport

http://slidepdf.com/reader/full/bevezetes-a-responsive-tervezesbe-04-viewport 9/12

Facebook 3 (http://codeguide.hu/2014/05/21/bevezetes-responsive-tervezesbe-viewport/?

share=facebook&nb=1)

Twitter 1 (http://codeguide.hu/2014/05/21/bevezetes-responsive-tervezesbe-viewport/?share=twitter&nb=1)

Google (http://codeguide.hu/2014/05/21/bevezetes-responsive-tervezesbe-viewport/?share=google-plus-

1&nb=1)

Linkedin (http://codeguide.hu/2014/05/21/bevezetes-responsive-tervezesbe-viewport/?share=linkedin&nb=1)

LAKI ÁDÁM (HTTP://CODEGUIDE.HU/PROFIL/LAKIADAM/)

Az érdeklődésem középpontjában főként a webes technikák állnak, igyekszem minél

többet megtudni a CMS rendszerekről, valamint a kliens és a szerveroldali

programnyelvekről.

 (https://www.facebook.com/laki.madazulu) (https://twitter.com/madazulu)

 (https://plus.google.com/u/0/+AdamLaki/posts)

(http://www.linkedin.com/profile/view?id=86470705&trk=nav_responsive_tab_profile)

(http://adamlaki.com/)

7/25/2019 Bevezetés a responsive tervezésbe - 04 Viewport

http://slidepdf.com/reader/full/bevezetes-a-responsive-tervezesbe-04-viewport 10/12

Szakmai cikkek webfejlesztés, webdesign, programozás, android és még sok érdekes témában! Acodeguide egy fiatal szakmai oldal, mely igyekszik minél több ismeretet egy helyenösszegyűjteni.

Tudj meg rólunk többet! (http://codeguide.hu/rolunk/)  

Best of the Week #58•

 — Kérlek! Kiegészítettem ezzelis, hasznos infó! Köszi!

WordPress Toolkit – Socialize•

 — Üdv!Igen, valóban az általademlítettek és még jó pár biztonságibővítmény is említést érdemelne! Ebben a

 Mit jelent Java-ban a Domain, a DTO és aDAO

•

 — Szia! Volnának kérdéseim,itt akartam volna azokat föltenni, viszontnem sikerült, nem látom, hogy elmenti a

 

Egy korábbi WordPress verzióvisszaállítása

•

 — Természetesen igy van. Desajnos ahogy látni a wp.org oldalon vanolyan bővítmény is ami 2009 óta nem volt

 

0 Hozzászólás

7/25/2019 Bevezetés a responsive tervezésbe - 04 Viewport

http://slidepdf.com/reader/full/bevezetes-a-responsive-tervezesbe-04-viewport 11/12

(https://www.facebook.com/codeguide) (https://twitter.com/codeguidehu)

(https://plus.google.com/u/0/b/102643931861084876821/+CodeguideHu/posts)

(http://codeguide.hu/feed/)

Activity (http://codeguide.hu/tag/activity/) animáció (http://codeguide.hu/tag/animacio/)

.htaccess (http://codeguide.hu/tag/htaccess/) AdBlock (http://codeguide.hu/tag/adblock/)

Android (http://codeguide.hu/tag/android/) adapter (http://codeguide.hu/tag/adapter/) AR (http://codeguide.hu/tag/ar/)

Apache (http://codeguide.hu/tag/apache/) Augmented Reality (http://codeguide.hu/tag/augmented-reality/)

Ant (http://codeguide.hu/tag/ant/) API (http://codeguide.hu/tag/api/) algoritmus (http://codeguide.hu/tag/algoritmus/)

.htpasswd (http://codeguide.hu/tag/htpasswd/) apk (http://codeguide.hu/tag/apk/) 3D (http://codeguide.hu/tag/3d/)

AdRotate (http://codeguide.hu/tag/adrotate/) AndAR (http://codeguide.hu/tag/andar/)

Best of (http://codeguide.hu/tag/best-of/) beágyazás (http://codeguide.hu/tag/beagyazas/)

Best of the Week (http://codeguide.hu/tag/best-of-the-week/)

Cikkek (http://codeguide.hu/)

Kódrészletek (http://codeguide.hu/kodreszletek/)

Aktuális (http://codeguide.hu/aktualis/)

Állás (http://codeguide.hu/allas/)

Publikálj! (http://codeguide.hu/publikalj/)

Rólunk (http://codeguide.hu/rolunk/)

Impresszum (http://codeguide.hu/impresszum/)

Publikálj! (http://codeguide.hu/publikalj/)

7/25/2019 Bevezetés a responsive tervezésbe - 04 Viewport

http://slidepdf.com/reader/full/bevezetes-a-responsive-tervezesbe-04-viewport 12/12

 

Néhány jog fenntartva © CodeGuide 2013 - 2014