ウェブサイトの固定フッターメニューが iPhone X の Safari で使いづらい問題の対応を考える

---

スマートフォンの画面が大きくなったことから、指に近い位置、すなわちフッター部に固定でウェブサイトの主要ナビゲーションを置くことが増えた。しかしながら、前面すべてがディスプレイとなった iPhone X の Safari で Tab Bars の表示をなくした状態では、画面最下部のリンクをタップするために、2タップ必要になってしまうため、操作性が低下してしまう。

---

Safari で画面をスクロールすると画面下部の Tab Bars が消え、より多くの情報を見ることができるようになるが、画面最下部のリンクをタップしても画面は遷移せず、まず Tab Bars が表示され、その後タップできるようになる。

主要コンテンツにアクセスしやすいようにという配慮が、これでは台無しである。

Apple のウェブサイトにも...

---

Apple のウェブサイトでは、グローバルナビゲーション、各コンテンツごとのローカルナビゲーションが上部にあるので概ね問題ないが、それでも一部ページでフッター固定メニューがあり、2 タップ必要だった（上の図は iPhone X  のページで「デザインとディスプレイ」をタップした時のスクリーンショット）。

どこからタップできるのか

全画面表示時に Tab Bars が表示されずに、そのままタップできるのはどこからなのか。何度も繰り返しタップしてギリギリの範囲を確認したところ、どうやら全画面表示した時は、標準の UI コンポーネントである Tab Bars の高さより上でないとタップできないようである（正確性は保証しかねます。だいたいです）。

---

84px より上に固定ナビゲーションをおけばよいかというと、それでは、画面に対してナビゲーションの割合が大きすぎるし、コンテンツが見づらくなる。

対応を考える

それでは、固定フッターメニューを使いたい時にはどうしたらよいか（固定フッターメニューを使わない、上部に固定するという代替案はおいておく）。物理的に全画面表示時は下から 84px タップできないということであれば、全画面表示時には、フッター固定メニューを隠すという処理を行えばよいのではないだろうか。フッター固定メニューの表示/非表示を Safari の Tab Bars の表示/非表示にあわせるのである。

おそらく、jQuery の resize イベントをごにょごにょすればできるのではないかと思い試してみたところ、意図する動きにすることができた。

---

下にスクロールして全画面表示になると「フッター固定部分」が消え、上にスクロールして Tab Bars が表示されると「フッター固定部分」が表示される。これでウェブサイトの固定フッターメニューが iPhone X の Safari で使いづらい問題が解決できる気がする。この表示/非表示の対応と 2 タップ、どちらの操作性が優れているか。自分の運営するサイトに組み込んで様子をみてみることとする。

---