Piszę stronę internetową skierowaną na iPhone'a. Chciałbym ustawić klasę na elemencie <body>, gdy zmieni się orientacja iPhone'a (tj. Gdy użytkownik zmieni telefon w tryb poziomy i/lub portretowy).Jak wykryć, kiedy iPhone przechodzi w tryb poziomy za pomocą JavaScript? Czy jest jakieś wydarzenie?
Czy mogę wykryć tę zmianę za pomocą JavaScript? Czy jest jakieś wydarzenie?
Tak, przez zdarzenie onorientationchange i właściwość window.orientation.
Można sprawdzić szerokość ciała dokument. Jeśli nagle stanie się mniejszy lub większy, wiesz co się stało. Możesz zmierzyć go z przerwą.
window.setInterval(function() {
// check body with here and compare with global variable that holds the last measurement
// you may set a boolean isLandscape = true if the body with became bigger.
}, 50);
Nie jestem do końca pewien, czy to zadziała: 'document.body.clientWidth' wydaje się zwracać tę samą wartość w układzie pionowym i poziomym (przynajmniej na stronie, nad którą pracuję). Mogą być jednak inne właściwości, które możesz sprawdzić. –
Musisz użyć czegoś takiego jak getComputedStyle i poprosić o obliczoną szerokość znacznika body. Jeśli to nie zadziała w safari, spróbuj currentStyle. Upewnij się również, że znacznik body otrzymuje szerokość = 100%. – Thanks
Tak, to może zadziałać. Po prostu pojęcie wymiarów Mobile Safari wydaje się nieco abstrakcyjne ze względu na skalowanie ekranu iPhone'a. Wydaje się, że w rzeczywistości nie ma większej szerokości piksela (jeśli chodzi o układ), gdy przechodzi w krajobraz, mimo że dostępnych jest więcej fizycznych pikseli. Tak naprawdę nie sprawdziłem, co poszczególne właściwości zwracają jednak. –
To także eleganckie rozwiązanie. – Thanks
FYI Usunięto wymóg logowania się do Safari Reference Library firmy Apple. –
@Pullets Forever - ah, doskonale, dziękuję. Zaktualizowano odpowiednio. –