たきです。
先日投稿したこちらの記事。↓
iPhoneのバーが邪魔！対策を教えてほしい.. - たきぶろぐ
当サイトに設置しているボトムナビがiPhone Xの場合、「ホームインジケータ」というバーが被ってしまい、ホームインジケータが邪魔だ！ということを書いていたのですが、しばらく時がたって強引に幕引きをしましたので、その方法をご紹介したいと思います。
padding-bottom:env()が効かない
軽く前回の記事を振り返ってみますが、ボトムナビに「padding-bottom:env」を指定すれば、セーフエリアの分が底上げされ、解決するといったものですが、テーマの仕様なのか、当サイトではこれが効きませんでした。
ですが、「margin-bottom:env()」にするとなぜかうまく動作しました。しかし、marginだとボトムナビの下に隙間が空き、見栄えがあまり良くありません。
空のdiv要素をつくる
この問題は空のdiv要素をつくり、CSSでスタイルを指定することで何とか解決させることができました。
上の画像はイメージですが、大体こんな感じです。
まず、ボトムナビを作成し、ボトムナビとはまた別に空のdiv要素をつくります。
そして、空のdiv要素にCSSでボトムナビと同じ背景色と同じ高さ、位置、そしてz-indexを指定します。z-indexはボトムナビよりも小さな値になるようにします。
僕のサイトのHTMLとCSSはこんな感じです。
[ HTML ]
<div class="nav-wrap"></div>
[ CSS ]
.nav{
margin-bottom:constant(safe-area-inset-bottom) !important;
margin-bottom:env(safe-area-inset-bottom) !important;
}
.nav-wrap{
background:#fff;
position:fixed;
bottom:0;
z-index:1;
width:100%;
height:55px;
}
これでボトムナビをmarginで底上げしても、セーフエリアに背景色がついて隙間からコンテンツがチラ見えするということもなくなりました。
デメリットも
ダブルタップしないとナビが動作しない
これiPhone XというかSafariの仕様なのか、ボトムナビを底上げしてホームインジケータと被らないようにしても、なぜかボトムナビがダブルタップしないと動作しないんですよね。
僕はAndroidでiPhone Xの表示は姉のスマホで確認させてもらってるんですけど、Androidの標準ブラウザ? Chromeでは問題なくワンタップで動作します。
ただ、なぜか姉のiPhone XRのブラウザ、Safariではダブルタップしないと動作しないんですよね。
こればっかりは解決方法も見つかりませんでした。
空のdiv要素はあまり好ましくない(かも)
ネットでググってみたところ、空のdiv要素は好ましくないという意見もあれば、別に気にしなくていいという意見があります。
僕はSEOについては全くの素人なのでどちらが正しいかは分かりませんが、div要素って本来は「ひとかたまりの範囲」を定義しているもので、そのかたまりに何も入っていないというのはdiv要素の本来の使い方ではないとは思います。
ここら辺に関してはSEOなりCSSなりHTMLなどに詳しい方に伺う必要がありますので、僕からは（かも）ってことで明言は避けさせていただきます(笑)
100％解決とまではいかないものの、最悪の状況からは抜け出せました(笑)
今の僕の知識ではこれが限界でした(泣)
