web-dev-qa-db-ja.com

画面回転後にscreen.width / screen.heightが更新されない

IPhoneデバイス（iPhone 7、iOS 10、他のiPhoneも同様）でこの問題が発生しています。JavaScriptで、orientationchangeイベントをインターセプトした場合、ハンドラー内で、screen.widthとscreen.heightは同じままです（回転前）。

これはビューポートの設定に依存している可能性があるため、これは.htmlファイルでビューポートを宣言する方法です。

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

Chromeのシミュレートされた視覚化ではすべてが正常に機能します。

よろしくお願いします。

javascriptiosiphonescreen-orientation
14
Gabriele D'Antona

私の知る限り、画面の幅/高さは回転後にデバイスで変更されません。デバイスが回転しているかどうかを確認するには、これらのプロパティを読み取ることができます

  1. window.orientation：この値は0から+ 90/-90に変わります
  2. window.innerHeight/innerWidth：この値は交換されます
  3. document.documentElement.clientHeight/clientWidth：この値は交換されます

残念ながら、この動作はすべてのAndroid/iOS/Windowデバイス間で一貫していません。 この図 でかなり説明されていると思います。

15
dloeda

iOSでは、画面のサイズを縦長のように返していました。彼らはiOS 8で（ネイティブクラスで）変更しましたが、Safariで変更するのを忘れたか、互換性を保つためにそのままにしていた可能性があります。

向きに基づいた実際のサイズが必要な場合は、window.innerWidthおよびwindow.innerHeight

ビューポートメタタグの有無にかかわらず、同じ値を取得します

Chromeシミュレートされた視覚化では正常に動作します。シミュレーションされた視覚化の画面サイズを返す必要があるためですが、デバイスに基づいて実行されるOSをシミュレートしていません。そのため、実際のデバイスと同じ値を取得できません（この場合、実際のデバイスは適切な値を返しません）

6
jcesarmobile

CSSは方向の変更を検出できません。

JavaScriptを使用して方向の変更を取得します。

関数を次のように追加します

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

これにより、windowにevent Handlerが追加され、方向が変更されたときにwidthのbodyが変更されます。

orientationchange の詳細リファレンス

1
Sagar V

jQuery mobileには、方向変更イベントを処理する onOrienntetionChange イベントがあり、手動で方向を変更する$(window).orientationchange();関数があります。

0
Yashar Aliabbasi