スマホのChromeはURLバーを非表示にする時にresize処理がされるのでjsレスポン設計は要注意!

web制作

スマホでGoogle Chromeを見ると、スクロールによって、画面トップにあるURLバーが表示されたり非表示になったりします。

※URLバー表示の状態

※スクロールによって、URLバーが非表示になる

この時に注意なのが、ブラウザでresizeの処理がされることです。

jsなどで、resize時の処理をしていなければ問題はないのですが、「load resize」のタイミングで「innerWidth」などのレスポンシブな動作をさせようとする時にエラーが起きる可能性があります。

たとえば、イベントハンドラon click要素について、上記の関数内に記述していると、スマホのスクロールによるURLバーresizeによって、on click要素が重複して読み込まれてしまって、動作しなくなるケースがあります。

もしスマホで動作確認をしていて、click要素などで動作しないものがあった時は、スクロールによるresizeが原因となっている可能性もあるので、もしresize関連の記述をしていれば、選択肢の一つとして疑ってみましょう。

最後に一言

固定にするかナシにするか、どっちかにして欲しい・・・。

本記事を気に入って頂けたら、facebookの「いいね!」を是非!

スマホのChromeはURLバーを非表示にする時にresize処理がされるのでjsレスポン設計は要注意!


本記事のシェアはこちらから!

  • このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

本ブログ・WebMakeBlog KIYOTATSUを運営しているYoshiと申します。普段はWEB制作をやっています。得意なのは要件定義や構築で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。