screen.width/screen.height nicht nach der Bildschirmrotation

Question

Ich habe dieses Problem auf einem iPhone-Gerät (iPhone 7, iOS 10, aber auch andere iPhones auch): in Javascript, wenn ich das orientationchange-Ereignis abfangen, drinnen Der Handler, screen.width und screen.height bleiben gleich (wie vor der Rotation).

Da dies von den Darstellungseinstellungen abhängen kann, das ist, wie mein Ansichtsfenster in der HTML-Datei deklariert ist:

arbeitet

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

Alles in Chrome simulierter Visualisierungen in Ordnung.

Vielen Dank im Voraus für Ihre Hilfe.

Answer 1

Soweit ich weiß Bildschirm die Breite/Höhe wird nicht im Gerät nach der Drehung ändern. Um zu überprüfen, ob das Gerät gedreht wird Sie diese Eigenschaften lesen konnte

1. window.orientation: Dieser Wert Änderung von 0 bis + 90/-90
2. window.innerHeight/innerwidth: Diese Werte werden vertauscht
3. document.documentElement.clientHeight/client: diese Werte

Leider getauscht werden, ist dieses Verhalten nicht c konsistent über alle Android/iOS/Windows-Geräte. Ich denke in this Figur ist ziemlich erklärt.

Answer 2

iOS verwendet, um die Größe des Bildschirms, als ob es im Hochformat war. Sie haben es auf iOS 8 (auf den nativen Klassen) geändert, aber sie haben es vielleicht vergessen, es für Safari zu tun, oder vielleicht haben sie es aus Kompatibilitätsgründen beibehalten.

Wenn Sie die reale Größe der Orientierung basierend möchten, können Sie verwenden window.innerWidth und window.innerHeight

ich die gleichen Werte mit oder ohne die Darstellungs Meta-Tag bekommen

Es funktioniert gut auf Chrome simuliert Visualisierung, weil es gibt die Bildschirmgröße der simulierten Visualisierung an, wie es sein sollte, aber es simuliert nicht das Betriebssystem, auf dem es basierend auf dem Gerät ausgeführt werden sollte, so dass Sie nicht die gleichen Werte wie auf einem echten Gerät erhalten (in diesem Fall) in dem das reale Gerät keine guten Werte liefert)

Answer 3

jQuery mobile hat das Ereignis onOrienntetionChange, bei dem das Ereignis für die Ereignisausrichtung geändert wird, und es gibt die Funktion $(window).orientationchange();, um die Ausrichtung manuell zu ändern.

Answer 4

CSS kann die Orientierungsänderung nicht erkennen.

Verwenden Sie JavaScript, um die Orientierungsänderung zu erhalten.

Fügen Sie die Funktion als

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

Dies entspricht einer event Handler zu window hinzufügen die width von body, wenn die Ausrichtung geändert wird sich ändern.

Weitere Referenz auf orientationchange