スマホの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関連の記述をしていれば、選択肢の一つとして疑ってみましょう。

最後に一言

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

この記事が参考になったら「いいね!」

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


SNSのシェアはこちらから!

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

PROFILE

yoshi

運営者のYoshiと申します。WEB制作は、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。