たきです。
今日は怒ってます（）
僕のブログには画面の下に固定式のバーがありますよね。（ボトムナビゲーションという）固定式にすることでスクロールしてもいちいち上に戻る必要がなく、便利なものだと思うのですが、iPhone Xだとそうはいかないようです。
ホームインジケータが邪魔くさい
iPhone Xからノッチやホームインジケータというバーが登場し、「セーフエリア」という概念が誕生しました。
その結果、iPhone Xでは設置したボトムナビゲーションの一部が隠れてしまいました。
画像のように見事に隠れてしまっています。
実は隠れているだけでなく、このバーと被っているところは2回タップしないとリンク先に移動することができないんですよね。
Android10のジェスチャーナビでは問題なし
Android10で登場したiPhone Xをパクったようなジェスチャーナビではボトムナビが隠れるという問題は発生しません。
ジェスチャーナビがあるエリアはそもそも黒帯で、ウェブサイトなどのコンテンツは表示されないようになっています。
iPhone XのホームインジケータとAndroid10のジェスチャーナビの違いはこの点だと思います。
その他の操作はほぼほぼ同じだと思います。こちらのサイトでも同じことが書かれていますね。
「Androidの新しいジェスチャーはiPhone Xそっくり | TechCrunch Japan」
対策は？
対策はあるにはあるんです。
僕のブログに設置しているボトムナビは実は自作ではなく、元となったものをアレンジしたもので、元となったものを作成された方が対策を公開しています。
「iPhone X で固定フッターやボトムメニューが被る時の対処法 - Bambi's BLOG @ hatena」
ここではmetaタグ「<meta name="viewport" content='"initial-scale=1, viewport-fit=cover'">」をheadに記入し、CSSに「padding-bottom:env(safe-area-inset-bottom);」と記入するだけと紹介しています。
でも、僕はなぜかできませんでした(泣)
スペルチェックもし、classも自分が使用しているものに変え、間違えはないはずなのですが、できませんでした(泣)
ナビをdiv要素で包んであげて、そのdivに先ほどの「padding-bottom:env(safe-area-inset-bottom);」を指定するという悪あがき(?)もしてみました。
でも、できませんでした(泣)
最終的に「margin-bottom:env(safe-area-inset-bottom);」で何とかかぶらないようにはできましたが...。
marginで指定するとナビには被らなくなるのですが、バーの下に隙間が生まれてしまい、その隙間から記事が見えてしまうという事態に。
これも先ほどやった、ナビを背景色を指定したdiv要素で包んであげて、そのdivに先ほどの「padding-bottom:env(safe-area-inset-bottom);」を指定するという悪あがき(?)もしてみましたが、背景色をCSSで指定すると今度はなぜか「margin-bottom:env(safe-area-inset-bottom);」が効かなくなり、ボトムナビがまたホームインジケータにかぶってしまいました。
今はとりあえず「margin-bottom:env(safe-area-inset-bottom);」と指定して4枚目の写真の状態で放置しています。
僕の知識、力量不足ではありますけど、iPhone Xの仕様がそもそも腹立つんですよね。完全に八つ当たりですね(笑)。
Androidみたいにおとなしくホームインジケータの表示されているエリアを黒帯にすればいいものを..。
誰か対策あったら教えてください(泣)
