以前制作したレスポンシブなWebサイトを、久しぶりにiOSでチェックしてみたらなんだか様子がおかしい。
どうやらjQueryのorientationchangeイベントを検出できていないらしい・・・
$(window).on('resize orientationchange scroll', function(obj) { if (obj.type == 'resize') { // リサイズ時 } elseif (obj.type == 'orientationchange') { // 向き変更時 } elseif (obj.type == 'scroll') { // スクロール時 } });
このように、orientationchangeとscrollを同時に検出しようとしている場合。
当然、デバイスの向きを変えた場合はorientationchangeイベント、スクロールした場合はscrollイベントの検出を期待するのですが、どういうわけかどちらもscrollイベントになってしまう。
orientationchangeイベントだけにすればちゃんと検出できます。
向きを変えると多少スクロールしてしまいますから、おそらくその瞬間にscrollイベントを優先して検出してしまっているのでしょう。
素直にscrollイベントだけ分離させます。
$(window).on('resize orientationchange', function(obj) { if (obj.type == 'resize') { // リサイズ時 } elseif (obj.type == 'orientationchange') { // 向き変更時 } }); $(window).on('scroll', function() { // スクロール時 });