JS姿勢変更リスナーは、iOS上で焼成ないが、Android上でそれが

Question

が、私はこのコードを持っている：

window.addEventListener("orientationchange", orientation); 

をしかし、それは、iOS 10.3を実行しているiPhone SEにorientation()を発射されていないが、それはモトに発射ですAndroid 5.1を実行しているG。

画面の幅に応じて変更する必要があります。私はwindow.innerWidthとscreen.widthを使用しています（ブラウザの違い）。

マイorientation()は以下の通りです：

cpr = Math.floor(window.innerWidth/100) - 3; 
if (navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/Android/i)) cpr = Math.min(Math.floor(screen.width/100) - 1, 8); 
if (!cpr || cpr <= 0) cpr = 1; 
id('times').innerHTML = ""; 
updateTimes(); 

コードが正常に動作し、それだけのiOS上で動作していません。私はChromeのdevツールのデバイスビューアで試してみました。これは、画面サイズとブラウザ/デバイスのスタイリング/コード/ユーザーエージェントをテストするために、異なる特定の電話やデバイスを使用できるようにするものです。そこではうまくいった。

私はこれに関する他のすべてのスタックオーバーフローの質問を見てみましたが、私の問題には答えませんでした。

ウェブサイトはhttp://rucubing.bitballoon.comでご覧になれます。

ありがとうございます！

Answer 1

私はresizeイベントで同様の問題があります。 理由は、this pageです。

最近まで、モバイルサファリは、ビューポートのサイズを変更した後、ページレイアウト後にresizeイベントを正しくポストしました。しかし、それはもはや事実ではない。代わりに、ページが完全にレイアウトされる前に投稿されます。 onresizeコールバックのclientWidth、clientHeight、getBoundingClientRectなどに依存するJavaScriptはすべて破棄されます。

orientationchangeイベントは、ページが完全にレイアウトされる前に発生する可能性があります。したがって、window.innerWidthは誤った値を返します。

EDIT：

最近、私はdocument.documentElement.clientWidthが正しい値を返すことがわかります。たぶんこれがあなたを助けることができます。