# ニュース: LIFFアプリおよびLINEミニアプリの「セーフエリア」の取り扱いが厳格化します

LIFFアプリおよびLINEミニアプリの「セーフエリア」の取り扱いが厳格化します

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を指定することで、セーフエリアを無効化し、ディスプレイ全体にレイアウトすることができます。

safe area

セーフエリアについて詳しくは、『Apple Developer』の「Layout Guides and Safe Area (opens new window)」を参照してください。