Ustawianie poziomu powiększenia w przeglądarce mobilnej

Question

Projektuję stronę internetową pod kątem dostępu mobilnego i chcę ustawić szerokość strony, wysokość i rozmiary przycisków, aby wyświetlały się wypełniając ekran. Na przykład, jeśli użytkownik korzysta z HTC HD, cały ekran miałby rozmiar 480 x 800 z przyciskiem o rozmiarze 240x200. Jednak IE Mobile i Opera ładują stronę z pewnym poziomem zoomu, więc przyciski są zbyt duże lub zbyt małe. Jak mogę odczytać bieżący poziom powiększenia w javascript lub ustawić go z javascript?

Answer 1

Nie należy polegać na korzystaniu z JavaScript na urządzeniach mobilnych, ponieważ nadal nie jest on powszechnie obsługiwany we wszystkich telefonach. Zamiast tego należy ustawić szerokość strony tak, aby była taka sama jak szerokość przeglądarki, aby strony wyglądały na 100%, np. body {width: 100%; margin: 0; padding: 0;}

Jeśli chodzi o przyciski, należy użyć względnych wartości lub użyć różnych rozmiarów obrazu, jeśli można wykryć szerokość przeglądarki przed załadowaniem strony.

Answer 2

Zajrzyj do <meta name="viewport">. Jest obsługiwany na wielu różnych platformach mobilnych, w tym (AFAIK) iPhone, Android, Blackberry, Opera Mobile, a nawet IE6 Mobile. Zasadniczo pozwala to ustawić szerokość urządzenia, poziom powiększenia i maksymalny/minimalny zoom. Spójrz na Apple developer site i więcej informacji.

Można również użyć zapytań o media CSS, aby wykryć kształt i rozmiar przeglądarki i odpowiednio wyświetlić różne układy (itp.). Ponownie, są one dość szeroko obsługiwane, a Apple developer site ma więcej informacji.