Nagłówek i treść - HTML
Skalowanie strony <meta "viewport">
W jaki sposób przeskalować rozmiar strony WWW? Jak przygotować stronę RWD (Responsive Web Design)?
<head> <meta name="viewport" content="parametr1=wartość1, parametr2=wartość2..."> </head>
- width
- Określa początkową szerokość obszaru wyświetlania przeglądarki. Może być określona bezpośrednio w pikselach albo za pomocą specjalnego słowa kluczowego device-width, które oznacza pełną szerokość obszaru wyświetlania.
- height
- Określa początkową wysokość obszaru wyświetlania przeglądarki. Może być określona bezpośrednio w pikselach albo za pomocą specjalnego słowa kluczowego device-height, które oznacza pełną wysokość obszaru wyświetlania.
- initial-scale
- Wartość od 0.0 do 10.0 (należy posługiwać się kropką dziesiętną, a nie przecinkiem!) określająca początkowy stopień przeskalowania strony. Im większa wartość tym bardziej będzie powiększona zawartość strony.
- minimum-scale
- Wartość od 0.0 do 10.0 określająca minimalny stopień, do którego użytkownik będzie mógł przeskalować stronę. Jest to przydatne w przypadku, gdy nasza strona nie wygląda zbyt dobrze, kiedy jest za bardzo pomniejszona. Pamiętajmy jednak, że stanowi to ingerencję w preferencje użytkowników i dlatego przeglądarki mogą blokować to polecenie.
- maximum-scale
- Wartość od 0.0 do 10.0 określająca maksymalny stopień, do którego użytkownik będzie mógł przeskalować stronę. Przeglądarki mogą blokować to polecenie.
- user-scalable
- Może przyjąć następujące wartości:
- yes - domyślnie
- no - możliwość skalowania strony zostanie zablokowana (przeglądarki mogą ignorować to polecenie z uwagi na preferencje użytkownika)
Polecenie to jest szczególnie przydatne na urządzeniach mobilnych takich jak smartfony czy tablety. Ponieważ ekran przeglądarek mobilnych zwykle jest dość małych rozmiarów, strona może być odpowiednio powiększana, tak aby jej zawartość była dobrze czytelna. W pewnym zakresie możemy sterować tym zachowaniem za pomocą powyższego polecenia. W szczególności możemy zaprojektować stronę z użyciem techniki Responsive Web Design (w skrócie: RWD), tak aby automatycznie dopasowywała się do dostępnej szerokości ekranu przeglądarki [zobacz: Zapytania mediów]. W takim przypadku w nagłówku strony powinniśmy wstawić następujące polecenie:
<meta name="viewport" content="width=device-width, initial-scale=1">
Dzięki temu dokument HTML zostanie wyświetlony w taki sposób, aby nie wymagał od użytkownika dalszego powiększania. W przeciwnym razie przeglądarka mobilna starałaby się wyświetlić stronę w rozdzielczości typowej dla przeglądarek używanych na standardowych komputerach, co zwykle oznaczałoby zdecydowanie zbyt mały rozmiar tekstu, aby nadawał się do wygodnego czytania.