今日、改めてプロジェクトを見てみると、ウィンドウのリスニングイベントrezise、orientationchange、DOMContentLoadedのコールバック関数で、いずれもsetTimeoutを使ってremの計算をリフレッシュしていました。これを見た後、なぜremの計算を行うためにsetTimeoutを追加する必要があるのか戸惑い、関連情報を調べたところ、互換性の問題であることがわかりました。この問題をメモしておきました。
具体的には
orientationchange イベント コールバック関数をトリガーする際に、互換性の問題があります。違いは、windows.innerWidthとwindows.innerHeightプロパティを取得するコールバック関数にあります。
Androidのブラウザでは、画面の高さと幅を正しく取得するために一定の時間を遅らせる必要があります。コールバック関数のトリガー時にwindows.innerWidthを即座に使用すると、変更されていない方向の高さと幅しか取得できません：
<script type="text/javascript">
alert(window.innerWidth); // デフォルトの縦画面の状態で、画面の幅480pxを取得する。;
window.addEventListener('orientationchange', function() {
alert(window.innerWidth); // orientationchangeコールバックがトリガーされたとき、スクリーン幅は480pxのままだ。;
setTimeout(function() {
alert(window.innerWidth); // 正しい画面幅960pxを得るために300ミリ秒遅延させる。
}, 300);
}, false);
</script>注意： モバイルで横画面と縦画面の切り替えがロックされている場合、orientationchangeイベントは動作しません。
