screen.width/screen.height nie aktualizuje się po obróceniu ekranu

Question

Mam ten problem na urządzeniu iPhone (iPhone 7, iOS 10, ale także innych iPhone'ach): w javascript, jeśli przechwycę orientację, wewnątrz program obsługi, szerokość ekranu i ekran. wysokość pozostaje taka sama (jak przed rotacją).

Ponieważ może to zależeć od ustawień rzutni, to jak moja rzutnia jest zadeklarowana w pliku .html:

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

Wszystko działa poprawnie w symulowanym wizualizacji Chrome.

Z góry dziękuję za pomoc.

Answer 1

Z tego co wiem, szerokość/wysokość nie zmieni się w urządzeniu po obrocie. Aby sprawdzić, czy urządzenie jest obrócony można odczytać te właściwości

1. window.orientation: zmiana ta wartość od 0 do + 90/-90
2. window.innerHeight/innerWidth: Te wartości są zamieniane
3. document.documentElement.clientHeight/clientWidth: Te wartości są zamieniane

Niestety, takie zachowanie nie jest c działa na wszystkich urządzeniach z systemem Android/iOS/Window. Myślę, że w this figura jest dość wyjaśniona.

Answer 2

System iOS służy do zwracania rozmiaru ekranu, tak jakby był portretowy. Zmienili to na iOS 8 (w klasach rodzimych), ale mogli zapomnieć zrobić to dla Safari, a może zachowali to w ten sposób dla zgodności.

Jeśli chcesz prawdziwa wielkość na podstawie orientacji można użyć window.innerWidth i window.innerHeight

dostaję te same wartości, z lub bez znacznika meta rzutni

Współpracuje z Chrome symulowanym wizualizacji bo nim zwraca rozmiar ekranu symulowanej wizualizacji, tak jak powinien, ale nie symuluje systemu operacyjnego, w którym powinien działać w oparciu o urządzenie, więc nie otrzymasz takich samych wartości jak na prawdziwym urządzeniu (w tym przypadku w którym prawdziwe urządzenie nie zwraca dobrych wartości)

Answer 3

jQuery mobile ma zdarzenie, które obsługuje zdarzenie zmiany orientacji, i istnieje funkcja $(window).orientationchange(); do ręcznej zmiany orientacji.

Answer 4

CSS nie może wykryć zmiany orientacji.

Użyj JavaScript, aby otrzymać zmianę orientacyjną.

Dodaj funkcję jako

window.addEventListener("orientationchange", function() { 
    document.body.style.width = window.innerWidth; 
}); 

To doda event Handler do window zmianę width z body gdy orientacja jest zmieniana.

Więcej informacji na temat orientationchange