https://zenn.dev/jackmiwamiwa/articles/ios-bottom-fixed

ios15でアドレスバーを「シングルタブ」に変更して、下固定のボタンをクリックするとボタンが反応しないでsafariのメニューボタンが出てきてしまうため、その時に対応したことになります。（状態については下の画像のような状態です。）

今回、検証用として制作したものは以下になります。

1. htmlのmetaタグにviewport-fit=coverを追加

デフォルトだとviewport-fit=autoのため、ページの全部分に対応させたい場合はviewport-fit=coverに変更することでページの端から端まで表示されるようになります。

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

2. cssで下に余白分の追加

2-1. safe-areaの追加

iOS11からsafe-area-inset-{top | right | bottom | left}の値が追加されたため、以下の追加

2-2. 44pxの追加

2-1の方法のみだと以下のような状態でクリックできるエリアがほとんどないため、padding-bottom: 44pxを追加

(黒線とsafariのナビメニューの間の1pxくらいがクリックできる場所です。)

変更後はこのようなイメージになります。

3. iphone, safariの確認を行う

2-2までの対応の場合、safari以外のブラウザだと以下の問題・状態になってしまうため、safariのみに適応できるようにする。