web-dev-qa-db-ja.com

方向が変わると$（window）.resize（）が起動しますか？

これを使用して、ブラウザウィンドウのサイズが変更されたときにコードを実行する：$(window).resize(callback)

携帯電話とタブレットで向きが変更されたときにも、このコードを実行する必要があります。上記のイベントはこのイベントで発生しますか？

javascriptjqueryscreen-orientation
37
Evanss

一部のデバイス/ブラウザはサポートしていますが、そうでないものもあります。サポートされているブラウザとデバイスを決定する必要があります。

安全な側にしたい場合は、サイズ変更イベントを使用し、その中のサイズを取得/確認する必要があります。目的のデバイスが簡単な向きの変更に対応していることがわかっている場合：

簡単な解決策：

// Listen for orientation changes      
window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    alert(window.orientation);
}, false);

より安全/サポートされている

// Listen for resize changes
window.addEventListener("resize", function() {
    // Get screen size (inner/outerWidth, inner/outerHeight)

}, false);

デビッド・ウォルシュは、サイズ変更と方向変更イベントに関する良い記事を書きました。方向の変更とサイズの詳細はこちら： http://davidwalsh.name/orientation-change

71
Jack Black

私の解決策：

  1. Orientationchangeが実行しない場合にイベントを生成します
  2. サイズ変更時に多くの更新を防ぐためにスロットルを使用します（lodashライブラリなど）
window.addEventListener("resize", throttle(function() {
    //to do when resize
}, 50), false);

window.addEventListener("orientationchange", function() {
    // Generate a resize event if the device doesn't do it
    window.dispatchEvent(new Event("resize"));
}, false);
1
dorian

答えは私見です：いいえ

しかし：

$(window).on('resize orientationchange', function(){
//do stuff
});

あなたがカバーする必要があります

注意、これはブラウザに応じて2回トリガーすることができます

0
Toskan

簡単な解決策は、イベントタイプに基づいて値を渡すことです。

window.addEventListener('resize', function () {
    myFunction('resize');
});

window.addEventListener("orientationchange", function() {
    myFunction('orientation');
});

function myFunction(value) {
    if (value == 'resize') {
       // do something
    } else if (value == 'orientation') {
       // do something else
    }
}
0
John Gimbel