Tworzę stronę internetową specjalnie dla urządzeń mobilnych. W szczególności jest jedna strona, którą najlepiej oglądać w trybie poziomym.
Czy istnieje sposób na wykrycie, czy użytkownik odwiedzający tę stronę przegląda ją w trybie pionowym, a jeśli tak, wyświetl komunikat informujący użytkownika, że stronę najlepiej oglądać w trybie poziomym? Jeśli użytkownik przegląda go już w trybie poziomym, nie pojawi się żaden komunikat.
Więc w zasadzie, chcę miejscem do wykrywania orientacji rzutni, jeśli jest orientacja pionowa , a następnie wyświetla komunikat alertu informując użytkownika, że ta strona jest najlepiej oglądać w Krajobrazowego trybie.
orientationchange
wydarzeniem. Pokaże starą orientację zamiast nowej orientacji. Ta odpowiedź działa dobrze w połączeniu zorientationchange
wydarzeniem.Możesz także użyć tego
window.matchMedia
, którego używam i preferuję, ponieważ bardzo przypomina składnię CSS:Testowany na iPadzie 2.
źródło
David Walsh ma lepsze podejście do sprawy.
Podczas tych zmian właściwość window.orientation może ulec zmianie. Wartość 0 oznacza widok pionowy, -90 oznacza, że urządzenie jest obrócone poziomo w prawo, a 90 oznacza, że urządzenie jest obrócone poziomo w lewo.
http://davidwalsh.name/orientation-change
źródło
Możesz użyć CSS3:
źródło
Można to zrobić na kilka sposobów, na przykład:
window.orientation
wartośćinnerHeight
vs.innerWidth
Możesz dostosować jedną z poniższych metod.
Sprawdź, czy urządzenie jest w trybie pionowym
Sprawdź, czy urządzenie jest w trybie poziomym
Przykładowe użycie
Jak wykryć zmianę orientacji?
źródło
Myślę, że bardziej stabilnym rozwiązaniem jest użycie ekranu zamiast okna, ponieważ może to być zarówno - poziomy lub pionowy, jeśli zmienisz rozmiar okna przeglądarki na komputerze stacjonarnym.
źródło
Aby zastosować wszystkie te wspaniałe komentarze do mojego codziennego kodowania, aby zachować ciągłość między wszystkimi moimi aplikacjami, postanowiłem użyć następujących elementów zarówno w moim jquery, jak i jquery mobile code.
źródło
Nie próbuj naprawiać zapytań window.orientation (0, 90 itd. Nie oznacza portretu, krajobrazu itp.):
http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/
Nawet na iOS7, w zależności od tego, jak wejdziesz do przeglądarki, 0 nie zawsze jest portretem
źródło
Po eksperymentach odkryłem, że obrócenie urządzenia orientującego się zawsze wywoła
resize
zdarzenie okna przeglądarki . Więc w swoim module obsługi zmiany rozmiaru wystarczy wywołać funkcję taką jak:źródło
Połączyłem dwa rozwiązania i działa dobrze dla mnie.
źródło
Nie zgadzam się z najczęściej głosowaną odpowiedzią. Użyj
screen
i niewindow
To właściwy sposób, aby to zrobić. Jeśli obliczysz za pomocą
window.height
, będziesz mieć problemy z Androidem. Gdy klawiatura jest otwarta, okno się kurczy. Więc użyj ekranu zamiast okna.To
screen.orientation.type
dobra odpowiedź, ale z IE. https://caniuse.com/#search=screen.orientationźródło
Uzyskaj orientację (w dowolnym momencie w kodzie js) za pośrednictwem
Kiedy
window.orientation
wraca0
lub180
jesteś w trybie pionowym , powracasz90
lub270
jesteś w trybie poziomym .źródło
Tylko CCS
W niektórych przypadkach możesz chcieć dodać mały fragment kodu, aby przeładować stronę po obróceniu urządzenia przez użytkownika, aby CSS był poprawnie renderowany:
źródło
źródło
źródło
kolejna alternatywa dla określenia orientacji na podstawie porównania szerokości / wysokości:
Używasz go przy zdarzeniu „zmiana rozmiaru”:
źródło
iOS nie aktualizuje się
screen.width
iscreen.height
gdy zmienia się orientacja. System Android nie aktualizuje sięwindow.orientation
po zmianie.Moje rozwiązanie tego problemu:
Możesz wykryć tę zmianę orientacji na Androidzie i iOS za pomocą następującego kodu:
Jeśli
onorientationchange
zdarzenie nie jest obsługiwane, związanym zdarzeniem będzieresize
zdarzenie.źródło
Jeśli masz najnowsze przeglądarki,
window.orientation
może nie działać. W takim przypadku użyj następującego kodu, aby uzyskać kąt -To wciąż technologia eksperymentalna, możesz sprawdzić kompatybilność przeglądarki tutaj
źródło
Dzięki tobyodavies za przewodnictwo.
Aby otrzymać komunikat ostrzegawczy na podstawie orientacji urządzenia mobilnego, musisz zaimplementować następujący skrypt w
function setHeight() {
źródło
Zamiast 270 może wynosić -90 (minus 90).
źródło
Rozszerza to poprzednią odpowiedź. Najlepszym rozwiązaniem, jakie znalazłem, jest stworzenie nieszkodliwego atrybutu CSS, który pojawia się tylko wtedy, gdy zapytanie medialne CSS3 jest spełnione, a następnie przeprowadzenie testu JS dla tego atrybutu.
Na przykład w CSS masz:
Następnie przejdziesz do JavaScript (używam jQuery do zabawy). Deklaracje kolorów mogą być dziwne, więc możesz użyć czegoś innego, ale jest to najbardziej niezawodna metoda, jaką znalazłem do testowania. Następnie możesz po prostu użyć zdarzenia zmiany rozmiaru, aby odebrać po przełączeniu. Złóż to wszystko dla:
Najlepszą częścią tego jest to, że w momencie pisania tej odpowiedzi nie wydaje się mieć żadnego wpływu na interfejsy pulpitu, ponieważ (ogólnie) nie przekazują (jak się wydaje) żadnego argumentu na temat orientacji strony.
źródło
Oto najlepsza metoda, jaką znalazłem, na podstawie artykułu Davida Walsha ( Wykryj zmianę orientacji na urządzeniach mobilnych )
Wyjaśnienie:
Window.matchMedia () jest rodzimą metodą, która pozwala zdefiniować regułę zapytania o media i sprawdzić jej ważność w dowolnym momencie.
Uważam, że przydatne jest dołączenie
onchange
detektora do zwracanej wartości tej metody. Przykład:źródło
Użyłem dla systemu Android „API Orientacji ekranu”
Aby sprawdzić bieżącą orientację, wywołaj console.log (screen.orientation.type) (i może screen.orientation.angle).
Wyniki: portret-podstawowy | portretowo-wtórne | krajobraz podstawowy | krajobraz wtórny
Poniżej znajduje się mój kod, mam nadzieję, że będzie pomocny:
źródło
źródło
Obiekt okna w JavaScript na urządzeniach z iOS ma właściwość orientacji, za pomocą której można określić obrót urządzenia. Poniżej przedstawiono wartości window.orientation dla urządzeń z systemem iOS (np. IPhone, iPad, iPod) w różnych orientacjach.
To rozwiązanie działa również na urządzeniach z Androidem. Sprawdziłem w natywnej przeglądarce Androida (przeglądarce internetowej) i przeglądarce Chrome, nawet w starych wersjach.
źródło
Tego używam.
Realizacja
źródło
źródło
Istnieje sposób, dzięki któremu można wykryć, czy użytkownik przełączył urządzenie w tryb portretowy
screen.orientation
Wystarczy użyć poniższego kodu:
Teraz
onchange
zostanie zwolniony, gdy użytkownik odwróci urządzenie, a ostrzeżenie wyskoczy, gdy użytkownik użyje trybu portretowego.źródło
Należy zwrócić uwagę na
window.orientation
to, że wróci,undefined
jeśli nie korzystasz z urządzenia mobilnego. Dobra funkcja do sprawdzania orientacji może wyglądaćx
następującowindow.orientation
:Nazwij to tak:
źródło
Lub możesz po prostu użyć tego ..
źródło