CSS, HTML i PHP

Meta-tag viewport – czym jest oraz jak i kiedy go stosować?

Żyjemy w czasach, kiedy urządzenia mobilne są bardzo często wykorzystywane do przeglądania sieci. To, w jaki sposób nasza strona – zazwyczaj tworzona pod kątem komputerów i laptopów – zależy od nas. Właśnie tu do gry wchodzi znacznik viewport. Określa on to, w jaki sposób wyświetla sięnasza strona na telefonach i tabletach, pozwalając między innymi ustawić domyślne przybliżenie, jak również jej zachowanie przy powiększaniu i pomniejszaniu. Jak jednak w odpowiedni sposób z tego tagu?

Zacznijmy od tego, że viewport jest jednym z meta-tagów i podobnie, jak całą resztę stosuje się go w sekcji HEAD strony. Tak oto prezentuje się jego budowa:

<meta name="viewport" content="(...)">

W polu content jesteśmy w stanie wpisać dyrektywy, według których ma podążać cały meta-tag.

Lista dyrektyw

Każda z dyrektyw dla meta-tagu viewport jest całkowicie opcjonalna – część z nich nie jest ponadto obsługiwana przez wszystkie przeglądarki internetowe. Pewne jest jednak, że dyrektywy są wspierane przez przeglądarki z silnikiem WebKit. A zatem większość dostępnych przeglądarek powinna je obsługiwać.

  • initial scale

Najważniejsza dyrektywa, która ustala domyślnie przybliżenie strony (zoom), które jest wioczne od razu po wejściu na nią. Wartość ta ustalana jest przez samą przeglądarkę, ale możemy „zmusić” ją do określonego zachowania (wstawiając wartość 5, określamy pięciokrotne przybliżenie). Najczęściej stosowaną definicją jest tutaj „1”, oznaczające pokazywanie strony bez żadnego skalowania (przybliżania czy oddalania):

<meta name="viewport" content="initial-scale=1">
  • minimum-scale, maximum-scale

Argumenty te określają, jak bardzo możemy przybliżyć i oddalić stronę w jej wersji mobilnej. Nie można ustalić mniejszej niż 0 i większej niż 10 wartości.

<meta name="viewport" content="minimum-scale=1, maximum-scale=9">
  • user-scalable

Za pomocą tego arguemntu definiujemy, czy użytkownik może przybliżać i oddalać stronę na swoim urządzeniu. Wpisujemy tutaj yes lub no.

<meta name="viewport" content="user-scalable=yes">
  • width, height

Argumenty te definiują szerokość i wysokość obszaru, który jest pokazywany użytkownikom mobilnej wersji strony internetowej. Wartość jest podawana w pikselach, ale bez „px”. Można także zastosować device-widthdevice-height zamiast wartości liczbowej, żeby pobierać szerokość i wysokość z urządzenia. Przykładowy kod:

<meta name="viewport" content="width=1024, height=760">

Kiedy stosować viewport?

Jeżeli nasza strona nie posiada swojej wersji mobilnej, a zatem nie jest responsywna i nie zawiera w sobie kodu pozwalającego na jej schludny wygląd na łamach platform mobilnych, możemy sobie darować korzystanie z tego tagu – nasza strona i tak domyślnie będzie się wczytywała „cała”, w wielkim oddaleniu – użytkownik sam ją sobie powiększy, aby dopasować ją do swoich potrzeb.Jeżeli jednak korzystamy z Media Queries (CSS3), możemy przejść do implementacji meta-tagu viewport.

Jak poprawnie stosować meta-tag viewport?

Zdecydowanie najczęstszym i najbardziej poprawnym wykorzystaniem tego meta-taga jest to zaprezentowane poniżej:

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

Dzięki niemu w domyślnych ustawieniach strona nie będzie skalowana (ale użytkownik będzie miał możliwość jej przybliżenia lub oddalenia), a rozciągać się będzie na 100% szerokości ekranu, na którym będzie wykorzystana.

0 polubień