Znacznik viewport określa sposób wyświetlania strony na urządzeniach mobilnych – pozwala ustawić opcje skalowania, w tym także domyślne przybliżenie. W niniejszym wpisie skupię się na przybliżeniu składni owego znacznika i przede wszystkim określeniu kiedy i jak go używać.
Coraz więcej front-end developerów używa meta-tagu viewport, co cieszy – dobrze znać możliwości nowoczesnych stron internetowych, jeszcze lepiej z nich korzystać. Niemniej jednak niniejszy wpis jest sponsorowany przez często nieprawidłowe używanie tego tagu i ma na celu pomóc lepiej zrozumieć jego działanie.
Znacznik ten, podobnie inne meta-znaczniki musi znajdować się w sekcji HEAD, a jego składnia wygląda następująco:
1 | <meta name="viewport" content="..."> |
Wartością atrybutu content powinna być lista par dyrektywa-wartość określających sposób wyświetlania strony na urządzeniach mobilnych. W polu tym możemy wpisać wiele różnych dyrektyw, oddzielając je przecinkami.
Dostępne dyrektywy meta-tagu viewport
Użycie jakichkolwiek z poniższych dyrektyw jest opcjonalne. Ponadto, nie wszystkie dyrektywy są obsługiwane przez wszystkie urządzenia mobilne, więc czasem ich użycie nie będzie miało żadnego skutku (pełne wsparcie zapewniają tylko przeglądarki z silnikiem WebKit).
- width, height – określają szerokość i wysokość wyświetlanego obszaru strony. Możemy podać wartość liczbową (w pikselach), np.
1<meta name="viewport" content="width=320, height=480">
Dla dyrektywy width możemy również podać specjalną wartość device-width, której użycie powoduje, że szerokość obszaru wyświetlania jest równa szerokości ekranu urządzenia (tzn. strona jest rozciągnięta w 100% na ekranie urządzenia).
Dla dyrektywy height możemy użyć analogicznej wartości, device-height.
- initial-scale – w dyrektywie tej ustawiamy domyślne przybliżenie (zoom) dla strony. Wartość ta jest zazwyczaj zależna od przeglądarki, lecz możemy wymusić by nasza mobilna wersja strony domyślnie wyświetlała się w 10-krotnym przybliżeniu:
1<meta name="viewport" content="initial-scale=10">
Możemy ją również pokazać w całej swej okazałości, bez skalowania:
1<meta name="viewport" content="initial-scale=1"> - minimum-scale, maximum-scale – jak łatwo się domyślić, dyrektywy te określają minimalne i maksymalne przybliżenie/oddalenie strony w obszarze przeglądarki. Minimalny współczynnik skalowania nie może być mniejszy niż 0, natomiast maksymalny nie może być większy niż 10. Prosty przykład użycia:
1<meta name="viewport" content="minimum-scale=1, maximum-scale=5">
- user-scalable – pozwala włączyć, bądź też wyłączyć skalowanie strony. Jako wartość przyjmuje anglojęzyczne yes lub no.
1<meta name="viewport" content="user-scalable=yes">
Nigdy nie używaj maximum-scale=1.0!
Teraz, kiedy znasz już składnię meta-tagu viewport warto wspomnieć o najważniejszym (co, nawiasem mówiąc, zainspirowało mnie do niniejszego wpisu).
Otóż ze względu na użyteczność (accessibility) strony nigdy nie wyłączaj możliwości skalowania swojej strony. Co z tym się wiąże, nie używaj niniejszej, często bezmyślnie kopiowanej składni (nawet jeśli Twoja strona jest responsywna):
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> |
Również ustawienie dyrektywy user-scalable na no jest wysoce niewskazane!
1 | <meta name="viewport" content="user-scalable=no"> |
Tym oto prostym sposobem możesz zablokować możliwość powiększania treści Twojej strony. To z kolei może sprawić, że posiadacze urządzeń z małymi wyświetlaczami oraz osoby ze słabym wzrokiem nie będą szczególnie zachęcone do dalszego korzystania z takiej strony.
Jak zatem używać meta-tagu viewport?
Znacznik ten mówi o tym, jak strona powinna być wyświetlana na urządzeniu mobilnym. Zatem jeśli Twoja strona nie jest dostosowana do urządzeń mobilnych, możesz całkowicie pominąć użycie meta-tagu viewport.
Jeśli natomiast strona jest dostosowana do urządzeń mobilnych (dzięki użyciu CSS3: Media Queries, liquid layout lub po prostu przez serwowanie dedykowanej wersji strony) możesz użyć poniższej składni:
1 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
W ten sposób strona zostanie rozciągnięta do 100% szerokości obszaru ekranu oraz pozostanie w skali 1:1 z możliwością skalowania.
W tym przypadku możemy również pominąć użycie dyrektywy initial-scale:
1 | <meta name="viewport" content="width=device-width"> |
Niemniej jednak użycie powyższego kodu w przypadku, gdy nie posiadamy responsywnej wersji strony spowoduje wyświetlenie tylko jej skrawka (a dokładniej lewego górnego rogu), np. 320×480 [px] dla starszych wersji iPhone. Oczywiście będziemy mogli powiększać, pomniejszać oraz przesuwać stronę na wyświetlaczu urządzenia, mimo to lepiej na starcie zaserwować stronę w całej okazałości (a decyzję o powiększeniu wybranego fragmentu pozostawić użytkownikowi).
[…] składni owego znacznika i przede wszystkim określeniu kiedy i jak go używać. więcej » pogrzeb ten link! kategoria: HTML / CSS Mobilne Usability, […]
[…] 3. Meta-tag viewport http://blog.kamilbrenk.pl/meta-tag-viewport-kiedy-i-jak-uzywac/ […]
a w jaki sposób można zapobiec rozciąganiu się strony przy przekręceniu urządzenia, jeśli nie atrybutem maximum-scale? Pozdrawiam
@huma: metatag viewport nie służy do takich rzeczy. Wygląd strony definiujesz w CSS.
Kamilu świetne podsumowanie! Huma jeśli Twoja strona postawiona jest na WordPress możesz dziś bez problemu poszukać jakiejś darmowej skórki lub kupić naprawdę fajne już ok 35 dolarów. Zazwyczaj płatne szablony są dobrze dopracowane zarówno na tradycyjny komputer jak i na urządzenia mobilne.
Właśnie takich informacji szukałem! Czy to są kroki prowadzące do zmiany strony na responsywną? Pozdrawiam.
@jmc: od tego wypadałoby zacząć. Później jeszcze tylko kilka regułek Media Queries i innych sztuczek i będzie RWD :-)
A czy istnieje jakiś sposób na to, aby wyłączyć automatyczne powiększanie się strony responsywnej, gdy użytkownik klika w pole input na urządzeniu mobilnym.
Po pojawieniu się klawiatury strona powiększa się ok. 10% – da się to jakoś wyłączyć, ale przy pozostawieniu możliwości ręcznego powiększania strony?
Pawle, ustaw w polu tekstowym wielkość czcionki na 16px. To powinno rozwiązać Twój problem.
Dzięki za sponsorowany artykuł. Wreszcie dowiedziałem się czegoś więcej o znaczniku viewport. W miarę zrozumiały i czytelny artykuł.