[解決済み] iOS 8でビューポートプロパティ "minimal-ui "が削除されましたが、他に "ソフトフルスクリーン "の解決策はありますか？

質問

(これは複数のパートからなる質問ですが、できるだけシナリオを要約するようにします)

現在、レスポンシブWebアプリ（ニュースリーダー）を構築中で、ユーザーがタブ化されたコンテンツ間をスワイプしたり、各タブ化されたコンテンツ内で縦にスクロールしたりできるようにしています。

この問題に対する一般的なアプローチは、ラッパーである div を設定し、ブラウザのビューポートをいっぱいにして overflow から hidden または auto で、その中で水平方向や垂直方向にスクロールします。

この方法は素晴らしいのですが、一つ大きな欠点があります。 ドキュメントの高さはブラウザのビューポートとまったく同じであるため、モバイルブラウザはアドレスバーやナビゲーションメニューを隠すことができません。 .

があります。 多数のハックとビューポートプロパティ は、より多くの画面領域を確保することを可能にしますが、これほどまでに効果的なものはありません。 minimal-ui (iOS 7.1で導入）。

昨日、iOS 8 beta4 で削除されたというニュースがありました。 minimal-ui の Webkit セクションを参照してください。 iOS 8 リリースノート という疑問がありました。

Q1. Mobile Safariでもアドレスバーを非表示にすることはできますか？

私たちが知る限り、iOS 7 は応答しなくなりました。 に対して window.scrollTo ハックする場合、縦長レイアウトを採用するか、あるいは mobile-web-app-capable .

Q2. ソフトフルスクリーンのような体験はやはり可能なのでしょうか？

By ソフトフルスクリーン を使用しないことを意味しています。 mobile-web-app-capable メタタグを使用します。

私たちのウェブアプリはアクセスしやすいように作られており、どのページもネイティブブラウザのメニューを使ってブックマークしたり共有したりすることができます。そのため mobile-web-app-capable ホームスクリーンに保存されている場合）、ユーザーがそのようなメニューを呼び出せないようにし、ユーザーを混乱させ、反感を持たせています。

minimal-ui 以前は、デフォルトでメニューを隠すという中道路線でしたが タップでアクセスできるようにする -- しかし、Appleは他のアクセシビリティに関する懸念（ユーザーがどこをタップすればメニューが起動するのかわからないなど）から、これを削除したのかもしれません。

Q3. フルスクリーン体験は手間をかける価値がありますか？

と思われるでしょう。 フルスクリーンAPI がiOSにすぐに来るとは思えませんが、仮にそうなったとしても、メニューがアクセス可能な状態に保たれるとは思えません（AndroidのChromeも同様です）。

この場合、モバイルサファリはそのままで、ビューポートの高さを考慮すればよいのかもしれません（iPhone 5以上の場合、460 = 568 - 108、この108にはOSバー、アドレスバー、ナビゲーションメニューが含まれます、iPhone 4以前は372）。

ネイティブアプリを作る以外の）代替案をぜひ教えてください。

どのように解決するのですか？

minimal-ui の viewport プロパティは サポート終了 iOS 8 では しかし、ミニマムUIそのものがなくなったわけではありません。ユーザーは、"タッチ-ドラッグダウン"のジェスチャーで、ミニマルUIに入ることができます。

例えば、ミニマルUIが機能するためには、ユーザーがスクロールできる十分なコンテンツが必要であり、ミニマルUIが持続するためには、ページロード時と方向転換後にウィンドウスクロールがオフセットされなければならないなど、ビュー状態を管理するにはいくつかの前提条件と障害があります。しかし の寸法を計算する方法はありません。 を使用して screen という変数があり、ユーザーがいつミニマルUIにいるのかを事前に知ることができません。

このような考察は、「Skype」の開発の一環として行われた研究の結果です。 Brim - iOS 8用ビューマネージャー . 最終的な実装は次のように動作します。

ページが読み込まれると、Brimはtreadmill要素を作成します。 トレッドミル要素は、ユーザーにスクロールするためのスペースを提供するために使用されます。トレッドミル要素があることで を表示することができます。 また、ユーザーがページを再読み込みしたり、ページを変更したりした場合でも デバイスの向き ユーザーからは常に見えない。この 要素のIDは brim-treadmill .

ページの読み込み時や向きを変えた後、Brimは 悲鳴 にあるかどうかを検出します。 ミニマルUI表示（以前ミニマルUIで表示されていたページが コンテンツがリロードされても、コンテンツの高さが低ければ ビューポートの高さより大きい)。

ページがミニマルUIにあるとき、Brimはスクロールを無効化します。 ドキュメントを作成します（これは 安全な 方法 に影響を与えない を使用することができます。） ドキュメントスクロールの無効化 上方向にスクロールする際に、誤ってminimal-uiから離脱することを防止します。 iOS 7.1のオリジナル仕様のように、トップバーをタップすると、そのバーが表示されます。 の残りのクロームを表示します。

最終的にはこのようになります。

説明のために、また、独自の実装を書きたい場合のために、次のことを書いておきます。 悲鳴 の直後にデバイスがミニマルUIにあるかどうかを検出するためです。 方向転換 イベント window ディメンジョンに新しい方向が反映されるのは、回転アニメーションが終了してからです。のリスナーを追加する必要があります。 方向転換終了 イベントが発生します。

悲鳴 と オリエンテーション終了 は、このプロジェクトの一環として開発されました。