ホーム > 技術情報 > iPadだけ勝手にメニューが開く理由-javascript-

iPadだけ勝手にメニューが開く理由-javascript-

投稿日 : 2017年09月14日   更新日 : 2019年10月12日
カテゴリー : PHP/javascript/CSS / 技術情報
iPadだけ勝手にメニューが開く理由-javascript-の画像

こんにちわ、PHPエンジニアのエンジニア婦人(@naho_osada)です。
私はPHPエンジニアとして6年~の経験があります。WordPressは2年~の経験があります。その他、jQuery、HTML、CSSも使用します。
ここでは主に過去に納品した案件や自サイト運営(エンジニア婦人ノート)で遭遇したことについて書いています。

ウェブページを作っていると、端末やOSバージョンによって動いたり動かなかったりする事案がよくあります。

ちょっと前まではIE8ガーIE11ガーなんてよくぐちぐちしていましたが、最近はそれは減りました。それでもたまにあります。Edgeで動くんだけど、IE11だとダメとか。さすがにIE8はもう対応しなくなった

一昔前のフィーチャーフォンのときはさぞ大変な労力だったろうとお察しします。その頃はまだ学生だ。

本日は端末によるもの、iPadだけなんか誤動作してるんだけどどうして?というのが持ち込まれたので、その原因調査と解決をした話です。 

問題

アコーディオンメニューありますよね。クリックするとばっと開いて、クリックするとばっと閉じるもの。スマホサイトの上にあるある、PCサイト(あまり)ないない … ①

PCで見ているとさほど必要ではないのですが、スマホだとグローバルナビ(上部のメイン帯のこと)でよく対応します。小さい画面でそんなもん見えてても邪魔だし操作し辛いからね。

それで、「画面領域(幅と高さ)を変えたときにスマホ表示とPC表示に切り替える」っていうjs対応もセットでやることが多いです。 … ②

これはPC画面でブラウザ表示領域を減らしていって、設定した幅でスマホ表示と切り替わるか、で動作確認します。

表示したときの画面幅で判定して、そのあと画面幅を変えてもスマホ表示とPC表示切り替えないっていうことも多いのです。その方がエコだとは思います。大体普通に見ている人はわざわざ画面幅頻繁に変えないだろうし。

本来、これは問題なく実装できるんですが、この度めでたくiPad(Safari)だけ

「スクロールするとボタン押してないのにアコーディオン開く」

現象が起きました。

思考経過

以下、原因追及のためのステップをメモ。

クリックイベントが誤動作しているのか? 

調べたところ、そういうわけではありませんでした。

スクロールとクリックがiPadだと同一視されている?

そんな風にも感じず。それだったら他のスマホ端末でも起こりそうなものなのに(その他スマホ端末では起こらなかった)

iPadの仕様?

端的に言えば正解でした。

原因

iPad(Safari)は、ブラウザを下方スクロールするときに、トップのアドレスバー部分が小さくなります。

これが上の②の処理、「ブラウザ画面領域が変わったからメニューを開く」を呼んでしまっていました。window.resize呼んでいたわけ。

jsとしては全く問題がなく、正しく動作していたのですが、こちらの書き方がまずかったんですね。

対処

以下の処理に変更しました。

  1. 表示したときに画面幅を取得しておき、resizeが働いたときに現在の画面幅を記録する。
  2. 現在の画面幅と表示したときの画面幅を比較し、幅が変わっていたらメニューを表示して画面幅を再取得する。変わっていない場合は何もしない。

以前よりもこっちのほうがよりエコ運転ですね。

iPad(Safari)の仕様だったので、他の端末では起こらなかったんですね。スクロールしてアドレスバー小さくなるとかないし、PCも。

これでiPadでもアコーディオンメニューが勝手に開くことはなくなりました。

楽しい物造りを

NaoLight

自分のブログやサイトを、楽しく作ってもらえたら。

プログラムを使って望み通りに、拡張しやすく、自分の思うように。

できたときに、すごく楽しい!と思ったら。

控えめに言って、「最高です」。

NaoLight -NAOT-(なおらいと、なおと、と呼んでください)はそんな思いをカタチにする、WordPressのテーマです。

ご購入はこちらからお願いします(BOOTHへ移動します)。

Nao Light-NAOT-公式サイト