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

IT/web

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

※URLバー表示の状態

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

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

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

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

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

最後に一言

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

この記事をSNSでシェアする?

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


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

PROFILE

yoshi

KIYOTATSU(キヨタツ)を運営しているウェブ制作者のYoshiです。得意な分野はディレクションとコーディングです。デザインはシンプルなものだけ可能です。他、色々と随時習得中です。