Androidでスクロールできなくなるバグ

Android2.3端末で、画面をスクロールできなくなる症状に遭遇。

調べてみると、iframeとdhisplay:noneの合わせ技で発生するらしい。

javascriptでつくった1ページ内に「タブ」や「アコーディオン」で複数のコンテンツを切り替えられるページへ
「Youtubeのプレイヤー」や「ソーシャルボタン」などのiframeが内包されている構造は要注意!

対策

iframeをなるべく使用しないコト。

iframeの使用がさけられない場合は、
display:none での表示・非表示の制御ではなく
remove(削除)と再配置で表示・非表示を制御する仕組みへ変更すると
バグ発生条件を満たせなくなるため、スクロールできなくなる症状は回避できます。

参考サイト:
Androidで全くスクロールできないバグ

iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize

回転イベントorientationchange

画面が回転したときに何かさせたいときはorientationchangeで設定できます。
※Androidは2.2から対応しました。2.1の端末では動きません。

$(window).on(“orientationchange”,function(){
	alert("画面が回転しました"); // ここに実行したい処理を書く
});

回転したときだけ実行する場合は、これでいけますが
ページ読み込み直後にも処理を実行したい場合だったら、
resizeもセットで設定します。

$(window).on(“orientationchange resize”,function(){
	alert("この端末の横幅は"+window.innerWidth+"pxです");
});

サンプルページ

“iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize”の続きを読む