明滅するプログラマの思索

WEBエンジニアとして勤務している一介の男が、日々気づいたことをまとめるブログです

ウェブビューアプリの表示領域が iPhone X で崩れる問題

ウェブビューをベースにしたアプリの表示領域が、iPhone X だと崩れてしまう場合があります。
早い話が、ウェブビューの表示領域内に余計なスクロールが生まれ、CSSなどで固定させても動かせてしまうような状態になります。
これは iPhone X で刷新された表示領域の概念の違いによって起きているようです。

こんなときは、とりあえずウェブビュー内のHTMLの<meta name="viewport" />content="viewport-fit=cover"を追加してやります。

<meta name="viewport" content="width=640,height=1136,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover" />

こんな感じですね。
これでウェブビュー内の表示が固定されます。