4

Portraitまたはに回転したときにモバイル画面の高さを確認するために、以下のコードを書きましたLandscape。

window.addEventListener("orientationchange", function(event) {
  rotateScreen();
}, false);

function rotateScreen() {
  alert(window.orientation)
  alert($(window).height())
}

に回転させるとPortrait0, 294 になります。 に回転させるとLandscape90, 419 になり$(document).ready()ます。

$(document).ready(function(){
  alert($(window).height())
})

モバイルを に回転させるとPortraitの高さが得られ、にLandscapeモバイルを回転させるとLandscapeの高さが得られるようですPortrait。誰かがそれを修正する方法を提案できますか?

ありがとう

4

2 に答える 2

10

resizeイベントは、 orientationchangeイベントの後にトリガーされます。ただし、サイズ変更は、仮想キーボードの表示など、他のことによってもトリガーされる可能性があります。

したがって、これを回避するには、最初にorientationchangeをリッスンし、それが発生したら、サイズ変更リスナーを追加します。orientationchangeが完了すると、サイズ変更イベントが発生します。完了したら、サイズ変更リスナーを削除して、エラーで起動されないようにします

$(window).on('orientationchange', function() {
    var orientationChange = function(evt) {
        rotateScreen();
        $(window).off('resize', orientationChange);
    }
    $(window).on('resize', orientationChange);
});

これにより、一種の疑似 post:orientationChange イベントが効果的に作成されます。（可能であれば、おそらくタイムアウトの使用を避けるでしょう）

于 2013-11-08T15:26:02.280 に答える
2

setTimeoutを追加すると問題が解決する可能性があります。以下のコードを試してください。

function rotateScreen() {
    window.setTimeout(function() {
       alert(window.orientation)
       alert($(window).height())
    }, 500);

}
于 2012-09-17T06:11:00.867 に答える