ホームページ > ウェブフロントエンド > CSSチュートリアル > 「minimal-ui」ビューポート プロパティを使用せずに iOS 8 でソフト フルスクリーン エクスペリエンスを実現するにはどうすればよいでしょうか?

「minimal-ui」ビューポート プロパティを使用せずに iOS 8 でソフト フルスクリーン エクスペリエンスを実現するにはどうすればよいでしょうか?

Susan Sarandon
リリース: 2024-12-12 12:16:17
オリジナル
705 人が閲覧しました

How Can We Achieve a Soft Fullscreen Experience on iOS 8 Without the `minimal-ui` Viewport Property?

iOS 8 は「minimal-ui」ビューポート プロパティを削除: ソフト フルスクリーンの回避策

iOS 8 ベータ 4 のリリースにより、次のような疑問が生じます。 : minimal-ui ビューポートなしで iOS デバイス上に「ソフト フルスクリーン」ユーザー エクスペリエンスを作成できますか? property?

懸念事項: アドレス バーの可視性

全画面エクスペリエンスに関する課題の 1 つは、アドレス バーとナビゲーション メニューの非表示です。従来は、ラッパー div をビューポートに埋め込み、オーバーフローを非表示または自動に設定することで、この問題に対処できました。ただし、この方法では、ブラウザーがこれらの要素を非表示にすることはできません。

改訂された戦略

minimal-ui プロパティはサポートされなくなりましたが、概念は残ります。ユーザーは引き続き「タッチ&ドラッグダウン」ジェスチャでアクセスできます。このビュー ステートを効果的に管理し、最小限の UI の寸法を計算するために、Brim - iOS 8 用ビュー マネージャー のようなサードパーティ ソリューションが登場しました。

Brim の実装

Brim の実装以下が含まれます:

  1. minimal-ui アクティベーションに十分なコンテンツを確保するために、非表示の「トレッドミル」要素を作成します。
  2. Scream を使用して、ページが minimum-ui モードであるかどうかを検出します。
  3. 誤操作を防ぐために、minimal-ui ではドキュメントのスクロールを無効にします。

Brim の利点

その結果、最小限の UI ビューへの出入りがスムーズになり、妥協することなくフルスクリーン エクスペリエンスをユーザーに提供できます。ブラウザの機能とアクセシビリティ。

追加考慮事項

Scream を使用したデバイスの向きの検出は、回転アニメーションが終了した後でのみ信頼できることに注意することが重要です。

結論

minimum-ui ビューポート プロパティの削除は挫折のように思えるかもしれませんが、Brim のようなソリューションは、iOS で「ソフト フルスクリーン」エクスペリエンスを実現するための代替方法を提供しています。 8 つのデバイスで、画面領域の必要性とアクセシビリティおよびユーザー満足度のバランスをとります。

以上が「minimal-ui」ビューポート プロパティを使用せずに iOS 8 でソフト フルスクリーン エクスペリエンスを実現するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート