iOS版およびiPadOS版LINE v11.0.0以降、「セーフエリア」の取り扱いが厳格化します。
今後は、iPhone Xなど角丸のディスプレイを持つデバイスにおいて、画面サイズをFullに指定したLIFFアプリおよびLINEミニアプリをディスプレイ全体を覆うレイアウトで表示するには、<meta>タグにviewport-fit=coverを指定する必要があります。
"viewport-fit=cover"指定の例
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
ただし、現行のiOSおよびiPadOSによる不具合のため、LINE v11.0.0では、<meta>タグにviewport-fit=coverを指定してもセーフエリアが無効化されないことが確認されています。今後のLINEのバージョンアップで修正を予定しています。
LINE v11.0.0でセーフエリアを無効化するには
LINE v11.0.0でも、ディスプレイ全体にレイアウトしたい場合は、viewport-fit=coverを指定したうえで、CSSで<html>タグにheight: 100vhを指定することで、セーフエリアを無効化できます。
html { height: 100vh; }
「セーフエリア」とは
iOSおよびiPadOSの「セーフエリア」とは、角丸のディスプレイを持つデバイスで、ヘッダー/フッター部分に余白を残し、安全にレイアウトできる領域のことを指します。通常HTML内の<meta>タグにviewport-fit=coverを指定することで、セーフエリアを無効化し、ディスプレイ全体にレイアウトすることができます。
セーフエリアについて詳しくは、『Apple Developer』の「Layout Guides and Safe Area (opens new window)」を参照してください。