Przejdź do treści

HTML / Nagłówek i treść

Skalowanie <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>
gdzie jako "parametr1=wartość1, parametr2=wartość2..." należy podać rozdzieloną przecinkami listę parametrów wraz z przypisanymi im wartościami:
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.

Czytaj dalej

Aby kontynuować kurs przejdź do poprzedniego lub następnego artykułu:

Zobacz także

Komentarze

Zobacz więcej komentarzy

Facebook