SSF-U - フルスクリーン表示の統一規格

定義

SSF-U規格は、フルスクリーン表示のセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています。

構造とセマンティクス

環境の準備

HTMLファイルで正しく動作させるには、値が width=device-width, initial-scale=1.0, viewport-fit=cover である viewport メタタグが必須です。

コンテンツは、「ノッチ」 やシステムインジケーターのHomeの下にある領域を含め、画面の物理的な全領域を使用します。コンテナやパネルは、重要なコンテンツが切り取られることなく、画面全体に合わせて正しく拡大縮小される必要があります。

動的高さ

主要な測定単位である dvb は、ブラウザのパネルが表示・非表示される際に利用可能なスペースを再計算するのに役立ちます：

.fullscreen {
  min-block-size: 100dvb; /* 動的な高さ */
}

アクセシビリティ

最新のスマートフォンでは、画面下部がシステムジェスチャーバー env(safe-area-inset-bottom) 用に確保されており、下部のボタンをタップした際にアプリが誤って閉じられるのを防ぎます：

.bottom-action-panel {
  padding-block-end: calc(var(--safe-offset) + env(safe-area-inset-bottom));
}

「下へ」アイコン

折り曲げラインより下にコンテンツが存在することをユーザーに通知するため、この変数を使用することで、アイコンが常にパネルの上にあるようにします：

.scroll-indicator {
  inset-block-end: calc(5px + env(safe-area-inset-bottom));
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

ンタラクティブ性と視覚的な反応

スクロールとキーボードの制御

ゴムバンドスクロールを防ぐには、次のコードを使用できます：

.main-screen {
  overscroll-behavior-block: none;
}

完全な実装例

:root {
  --safe-offset: 16px; /* ボタンやアイコンの基本的な余白 */
}

.fullscreen {
  min-block-size: 100dvb;
  display: flex;
  flex-direction: column;
  overscroll-behavior-block: none;
}

.bottom-action-panel {
  position: fixed;
  inset-block-end: 0;
  inline-size: 100%;
  padding-block-end: calc(var(--safe-offset) + env(safe-area-inset-bottom));
  background-color: #ffffff;
}

.scroll-indicator {
  position: absolute;
  inset-block-end: calc(5px + env(safe-area-inset-bottom));
  inset-inline-start: 50%;
  transform: translateX(-50%);
}