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

定義

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

構造とセマンティクス

環境の準備

正しく動作させるためには、HTMLファイルに以下のメタタグを記述する必要があります：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

• 目的： コンテンツが、画面上部の「ノッチ」部分やホームボタンなどのシステムインジケーターを含む、画面の物理的な全領域を使用するようにします。
• 効果： コンテナやパネルが画面全体に合わせて正しく拡大縮小され、重要なコンテンツが切り取られることがありません。

動的高さ

• 主な単位： dvb；
• 動作： ブラウザのパネルが表示・非表示になった際に、利用可能なスペースを再計算します；
• 使用例:

.fullscreen {
  min-height: 100vh; /* 旧式ブラウザ向けのフォールバック */
  min-height: 100dvb; /* 動的高さ */
}

• 結果: min-height: 100dvb を指定したコンテナは、重要なコンテンツが常に完全に表示されることを保証します。

アクセシビリティ

セーフエリア: env(safe-area-inset-bottom)

• 現代のスマートフォンでは、画面の下部がシステム用のジェスチャーバー用に確保されています;

• 使用方法:

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

• 効果: 下部のボタンをタップした際に、アプリが意図せず折りたたまれるのを防ぎます。

「下へ」アイコン

• 目的： 折り曲げラインより下にコンテンツが存在することをユーザーに通知します；

• 配置:

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

• 結果: アイコンは常にシステムスクロールバーの上に表示されます。

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

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

• Overscroll-behavior:

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

• ページ全体をスクロールした際の「バウンド」効果を防ぎます；

• Keyboard awareness: 画面キーボードが表示されると dvb 単位が自動的に縮小され、入力フィールドが隠れるのを防ぎます。

完全な実装例

:root {
  --safe-offset: 16px; /* ボタンやアイコン用の基本マージン */
}

.fullscreen {
  min-height: 100vh;
  min-height: 100dvb;
  display: flex;
  flex-direction: column;
  overscroll-behavior-y: none;
}

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

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

視覚的なレスポンス：

• コンテンツは画面の高さの変化に正しく適応します；
• 下部のボタンと「下へ」アイコンは常に表示されたままです；
• ページのスクロールやキーボードの表示によって、インターフェースが崩れることはありません。