Wersja mobilna strony – skalowanie serwisu

Jak zmusić przeglądarkę w urządzeniu mobilnym do skalowania strony www? Okazuje się że sprawa jest bardzo prosta i nie wymaga nawet ingerencji w szablony strony www a zmiany w strukturze HTML-a dotyczą zaledwie nagłówka.

Viewport który odpowiedzialny jest za logikę wyświetlania strony w przeglądarce smartfona oraz za jej skalowanie definiujemy za w sekcji meta nagłówka strony www. Viewport przechwytuje skalowanie czy zmianę orientacji ekranu za pomocą zdarzeń onresize i onorientationchange w języku javascript.

W zależności od wielkości ekranu możemy ustawić wielkość viewportu do określonych rozmiarów:

< meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" / >

Mamy tutaj podaną na stałe szerokość i wysokość (240px i 320px), zgodę na skalowanie ekranu (powiększanie go) – user-scalable=yes (ustawienie tego parametru na 0 yser-scalable=0 zablokuje nam możliwość powiększania ekranu).

Jak widać na powyższym przykładzie dyrektywom viewport można przypisać zarówno parametry wartościowe jak i tzw. tokeny.

Initial-scale – ustawia początkową wartość współczynnika powiększenia strony i z regóły jest to taka wielkość dzięki której cała strona widoczna jest w oknie przeglądarki.
Maximum-scale – określa maksymalne powiększenie strony w oknie przeglądarki.

< meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" / >

Powyższy przykład, dostosuje szerokość wyświetlanej strony do maksymalnej szerokości ekranu urządzenia na którym wyświetlana zostaje strona – width=device-width, defaultowo wyświetla całą zawartość strony bez powiększania (initial-scale=1.0) oraz blokuje możliwość skalowania strony (user-scalable=no)

Źródło

Leave a Reply