nikkeyl

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

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

248

3 分。

定義

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%);
}

類似カテゴリ:

関連記事

  • アドバイスReactコンポーネントの構造

    Reactコンポーネントの構造

    各Reactコンポーネントがどのような外観であるべきか、私の考え

    422

    13 分。

  • 基準SST - タブに関する統一規格

    SST - タブに関する統一規格

    SST規格は、タブのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています

    62

    11 分。

  • 基準SSA - アコーディオンの統一標準

    SSA - アコーディオンの統一標準

    SSA規格は、アコーディオンのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定めています

    258

    4 分。

  • アドバイスウェブサイトにおける悪い慣行

    ウェブサイトにおける悪い慣行

    ウェブデザインにおける致命的なミスの分析。スライダー、自動再生、重いページがコンバージョン率やGoogleでの検索順位を低下させる理由

    232

    2 分。

  • 基準SSP - ページネーションの統一規格

    SSP - ページネーションの統一規格

    SSP規格は、ページネーションのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています

    240

    3 分。

  • 基準SSPS - プロジェクト構造の統一基準

    SSPS - プロジェクト構造の統一基準

    SSPS標準は、プロジェクト内のファイルおよびフォルダの構造と命名に関する要件を規定しています

    345

    3 分。

  • すべての記事

ご連絡ください