jQueryのwindow.resizeで、iPhoneでスクロールするとリサイズがかかってしまいます。

Question

###前提・実現したいこと
幅798pxをブレイクポイントにして、windowリサイズでアコーディオンメニューの開閉を制御したいです。

###ソースコード

$(window).resize(function() {
	if (window.innerWidth <= 768) {
		body.hide();
	}else if(window.innerWidth > 768) {
		body.show();
	}
});

この記述ですとiPhoneでスクロールした時にresizeがかかり、
要素が消えてしまいます。どのように記述するのがよろしいのでしょうか？

Answer 1

iPhoneではスクロール中に常にリサイズイベントが発火し続ける仕様のようです。
今回のケースでは上の方がおっしゃっているようにCSSのメディアクエリで制御した方が良いと思いますが、
もしJSのウィンドウリサイズで何か制御をしたいのであれば、
こちらのブログを参考にウィンドウのリサイズが終わった時に1度だけ実行されるように
スクリプトを書き換えてみると良いかもしれません。

Answer 2

こちらの記事が参考になるかもしれません。
他の方が仰っているメディアクエリの方が向いているケースかもしれないです。

• jQueryでiPhone/iPadの向きを検出する

Answer 3

cssのmedia queryを使ってみてはどうでしょうか。

レスポンシブの基本、メディアクエリの書き方