【CSS,JS】iPhoneサファリの時、下部バーのせいで見切れる

2019年4月19日

全画面表示のモーダル等の際、下部に設置している要素がかぶってしまったりすることがあると思います。それの対策になります。

0.参考サイト

iOSデバイスの画面サイズ一覧 (iOS 6)

iPhone Safariで画面の下に出てくるメニューバーとたたかう

1.方法

cssならば100vh

JSならば window.innerHeightで取得するか、$(window).innerHeightを取得して、モーダル等に設定してあげる。

もしくは、上記にリンクのある iOSデバイスの画面サイズ一覧でバーが表示されている時のサイズを考え実装するなどが良いかと思います。上記のリンクはiOS6用なので、新しいやつがあればソッチのほうがいいですね(見つからなかった)