iOS 8で「minimal-ui」ビューポートプロパティが削除されました。他に「ソフトフルスクリーン」ソリューションはありますか？

191

（これはマルチパートの質問です。シナリオをまとめるために最善を尽くします。）

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

この問題に対する一般的なアプローチdivは、ブラウザーのビューポートを埋めるラッパーを使用overflowするhiddenかauto、またはに設定してから、その内部を水平または垂直にスクロールすることです。

このアプローチはすばらしいですが、主な欠点が1つあります。ドキュメントの高さがブラウザーのビューポートとまったく同じであるため、モバイルブラウザーはアドレスバーやナビゲーションメニューを非表示にしません。

画面領域を拡大するためのハッキングとビューポートプロパティは数多くありますが、minimal-ui（iOS 7.1で導入された）ほど効果的なものはありません。

iOS 8 beta4がminimal-uiMobile Safariから削除されたというニュースが昨日届きました（iOS 8リリースノートの Webkitセクションを参照）。

Q1。Mobile Safariのアドレスバーを非表示にすることはまだ可能ですか？

私たちの知る限りでは、iOS 7 はハッキングに応答しなくなりましたwindow.scrollTo。これは、垂直レイアウトを採用するか、を使用しない限り、より小さな画面スペースで生活する必要があることを示唆していますmobile-web-app-capable。

Q2。同様のソフトフルスクリーンエクスペリエンスを引き続き使用できますか？

ソフトフルスクリーン私は実際に使用しなくても意味mobile-web-app-capableメタタグを。

私たちのウェブアプリはアクセスしやすいように構築されており、ネイティブのブラウザーメニューを使用して、どのページにもブックマークを付けたり共有したりできます。追加するmobile-web-app-capableことで、ユーザーがそのようなメニューを（ホーム画面に保存されたときに）呼び出すことができなくなり、ユーザーを混乱させたり、敵に反対したりします。

minimal-ui以前は中立で、メニューはデフォルトで非表示になっていますが、タップでアクセスできるようになっています。ただし、他のアクセシビリティの問題（ユーザーがタップしてメニューをアクティブにする場所がわからないなど）のためにAppleがメニューを削除した可能性があります。

Q3。フルスクリーンエクスペリエンスは問題の価値がありますか？

フルスクリーンAPIはまもなくiOSに搭載されなくなるようですが、iOSに搭載されている場合でも、メニューにアクセスできるようになる方法はわかりません（AndroidのChromeでも同じです）。

この場合、モバイルサファリをそのままにして、ビューポートの高さを考慮に入れる必要があります（iPhone 5以降の場合は460 = 568-108で、108にはOSバー、アドレスバー、ナビゲーションメニューが含まれます。iPhone4または古い、それは372です）。

（ネイティブアプリの構築以外に）いくつかの代替案を聞きたいです。

— Bitinn
ソース

参照stackoverflow.com/questions/18793072/...を最小限-UIは、いくつかのアプリに重要であることができる理由の詳細については。

— bitinn 2014

1

iOS 7でも同じ問題に遭遇しました。スワイプ/スクロールイベントでWebアプリを構築しようとしているのですが、iOS8ベータ4でonScrollイベントをテストしたところ、動作しました。ios8-scroll-events.heroku.com それがまったく役立つかどうかは不明ですが、それでうまくいきます。

— Devin McInnis 2014

同じトラブルに遭遇した。現時点では、以下のcalc（）関数が唯一の答えであるため、javascriptの「修正」のみです。より良い決定を知っている場合は、このスレッドを更新してください。宜しくお願いします。

— A1exandr 2014

86

minimal-uiビューポートプロパティはiOS 8ではサポートされなくなりました。ただし、minimal-ui自体はなくなっていません。ユーザーは、「タッチアンドドラッグ」ジェスチャーで最小UIを入力できます。

ビューの状態を管理するには、いくつかの前提条件と障害があります。たとえば、minimal-uiを機能させるには、ユーザーがスクロールできる十分なコンテンツが必要です。minimal-uiが持続するためには、ページの読み込み時と方向変更後にウィンドウのスクロールをオフセットする必要があります。ただし、変数を使用して最小UIの次元を計算する方法はないscreenので、ユーザーが最小UIにいることを事前に知る方法はありません。

これらの観察結果は、iOS 8用のBrim –ビューマネージャーの開発の一環として行われた調査の結果です。最終的な実装は次のように機能します。

ページが読み込まれると、Brimはトレッドミル要素を作成します。Treadmill要素は、ユーザーにスクロールするスペースを与えるために使用されます。トレッドミル要素が存在することで、ユーザーはminimal-uiビューに入ることができ、ユーザーがページをリロードしたりデバイスの向きを変更したりしても、継続して表示されます。それは、ユーザーには常に見えません。この要素にはIDがありますbrim-treadmill。

ページの読み込み時、または方向を変更した後、BrimはScreamを使用して、ページが最小UIビューにあるかどうかを検出します（以前に最小UIでリロードされたページは、コンテンツの高さが最小の場合、最小UIに残りますビューポートの高さよりも大きい）。

ページがminimal-uiの場合、Brimはドキュメントのスクロールを無効にします（これは、メイン要素のコンテンツに影響を与えない安全な方法で行われます）。ドキュメントのスクロールを無効にすると、上にスクロールするときに誤って最小UIのままになるのを防ぎます。元のiOS 7.1仕様に従って、上部のバーをタップすると、残りのクロムが表示されます。

最終結果は次のようになります。

iOSシミュレータのつば。

ドキュメントのために、そしてあなたがあなた自身の実装を作成することを好む場合には、それはあなたが使用できないことは注目に値するスクリームのデバイスは後に、最小限の-UIストレートであるかどうかを検出するためにorientationchangeのため、イベントwindow寸法がするまで、新しい方向を反映していません回転アニメーションは終了しました。リスナーをorientationchangeendイベントにアタッチする必要があります。

Screamとorientationchangeendは、このプロジェクトの一環として開発されました。

— ガジュス
ソース

3

これは私の元の回答よりもはるかに拡張性があり、さらに良い解決策が到着するまで新しい回答としてマークされます:)

— bitinn '11 / 11/12

4

いい感じ！最初のスクロールなしでminimal-uiを強制できますか？

— INT

50

これは本当に終わりのない話です。私はHTMLのゲーム開発者で、iOS 7.1のminimal-uiは問題なく動作しました。これは、アプリをフルスクリーンで実行し、同時に画面の下部でタッチできる唯一の方法でした。ページのスワイプでのソリューションはいいですが、ない良い十分:(アップルは、我々はしてください、ゲームのフルスクリーンAPIの適切な実施を必要としています。

— ペトルアーバン

4

@ピーター：私はこれ以上同意できませんでした。この修正が7.1で発表されたとき、主要なCTAを画面の下部に固定する新しいチェックアウト購入フローをすばやく展開しました。それは非常に「ネイティブ」でシームレスだと感じました。これは正確な問題だと思います。考えてみれば、Webアプリがネイティブであると感じることはAppleにとって最善のことではありません。それは実際には、App Storeの独占との直接的な対立です。これがIMOであり、それほど意味のある機能が修正され、意図的に削除された唯一の正当な理由です。＃my2Cents :)

— Jose Browne

2

@PetrUrban私は、Appleがあなたがあなたのゲームを電話ギャップアプリとして公開することをあなたがWeb経由で提供することを許可するよりも好むことを確信していると確信しています。サファリの広告ブロッカーを許可するという彼らの最近の決定はこの考えを固めています。

— Patrick Gunderson、2015

20

を模倣するプログラム的な方法はないため、既知のiOSアドレスバーの高さをminimal-ui使用して、別の回避策を考え出しましたcalc()。

次のデモページ（要旨、より詳細な技術詳細も参照可能）は、ユーザーにスクロールを促すプロンプトを表示し、それからソフトフルスクリーン（アドレスバー/メニューを非表示）がトリガーされ、ヘッダーとコンテンツが新しいビューポートに表示されます。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Test</title>

    <style>
        html, body {
            height: 100%;
        }

        html {
            background-color: red;
        }

        body {
            background-color: blue;
            margin: 0;
        }

        div.header {
            width: 100%;
            height: 40px;
            background-color: green;
            overflow: hidden;
        }

        div.content {
            height: 100%;
            height: calc(100% - 40px);
            width: 100%;
            background-color: purple;
            overflow: hidden;
        }

        div.cover {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            display: none;
        }

        @media screen and (width: 320px) {
            html {
                height: calc(100% + 72px);
            }

            div.cover {
                display: block;
            }
        }
    </style>
    <script>
        var timeout;

        window.addEventListener('scroll', function(ev) {

            if (timeout) {
                clearTimeout(timeout);
            }

            timeout = setTimeout(function() {

                if (window.scrollY > 0) {
                    var cover = document.querySelector('div.cover');
                    cover.style.display = 'none';
                }

            }, 200);

        });
    </script>
</head>
<body>

    <div class="header">
        <p>header</p>
    </div>
    <div class="content">
        <p>content</p>
    </div>
    <div class="cover">
        <p>scroll to soft fullscreen</p>
    </div>

</body>
</html>

— Bitinn
ソース

10

ミニマルUIに別れを告げる（今のところ）

それは事実でminimal-uiあり、有用であると同時に有害である可能性があり、私はトレードオフが今より新しい、より大きなiPhoneに有利な別のバランスを持っていると思います。

私はHTML5アプリ用のjsフレームワークで作業しながら問題に対処してきました。多くの解決策を試みましたが、それぞれに欠点がありましたが、6より前のiPhoneで失われたスペースを検討することにしました。

要するに、私はどのような形のminimal-uiも阻止することになったので、少なくとも私の画面の高さは常に同じであり、あなたは常にあなたがあなたのアプリのためにあなたが実際にどのようなスペースを持っているかを知っています。

時間の助けを借りて、十分な数のユーザーがより多くのスペースを確保します。

編集

どうやって

これはデモの目的で少し簡略化されていますが、うまくいくはずです。あなたがメインコンテナを持っていると仮定します

html, body, #main {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.view {
  width: 100%;
  height: 100%;
  overflow: scroll;
}

次に：

次に、jsを使用して、#mainの高さをウィンドウで使用可能な高さに設定します。これは、iOSとAndroidの両方で見つかった他のスクロールバグへの対処にも役立ちます。また、更新方法についても対処する必要があることを意味します。
スクロールの境界に達したときに、オーバースクロールをブロックします。これは私のコードでもう少し深いですが、基本的な機能についてはこの回答の原則に従うこともできると思います。少しはじけるかもしれませんが、うまくいきます。

デモを見る（iPhoneの場合）

補足として：このアプリも、ハッシュ化されたアドレスへの内部ルーティングを使用するため、ブックマーク可能ですが、iOSユーザーに家に追加するように促すプロンプトも追加しました。この方法は、忠誠心とリピーターを助ける（そして失われたスペースが戻ってきた）と思います。

— フランチェスコ・フラポルティ
ソース

minimal-uiを無効にすることは、私には非常に合理的に思えます。その方法の簡単な説明を含めてください！

— イシュトPálinkás

あなたは正しい、私は少しハウツーを追加しました。他の多くの方法が機能します。

— Francesco Frapporti 2014年

1

iPhone 5によると、iOS8ではデモが機能しません

— dmr07

お知らせいただきありがとうございます。以前は機能していたため、更新が必要です。あなたはサファリにいますか？それが機能しないとはどういう意味ですか？

— Francesco Frapporti

7

これを修正するために見つけた最も簡単な方法は、ユーザーエージェントがiphoneであるすべてのリクエストに対して、bodyおよびhtml要素の高さを100.1％に設定することでした。これは横向きモードでのみ機能しますが、必要なのはそれだけです。

html.iphone, 
html.iphone body { height: 100.1%; }

https://www.360jungle.com/virtual-tour/25で確認してください。

— スティーブンガーサイド
ソース

@Stephenに感謝します。身長：100.1％が助けてくれました。しかし、iPhone（iOS 11.1.1）Safariで360jungle.com/virtual-tour/25を開いて下部のボタンをクリックすると、アドレスとツールバーが表示されました。これは、ボタンが表示の終わりに近すぎるためです。モバイルモードでは別の場所に移動した方がいいと思います。

— Téwa

2

ここでの根本的な問題は、コンテンツがビューポート以下の場合、iOS8サファリが下にスクロールしてもアドレスバーを非表示にしないようです。

すでにご存じのとおり、下部にパディングを追加すると、この問題を回避できます。

html {
    /* enough space to scroll up to get fullscreen on iOS8 */
    padding-bottom: 80px;
}

// sort of emulate safari's "bounce back to top" scroll
window.addEventListener('scroll', function(ev) {
    // avoids scrolling when the focused element is e.g. an input
    if (
        !document.activeElement
        || document.activeElement === document.body
    ) {
        document.body.scrollIntoViewIfNeeded(true);
    }
});

上記のcssは条件付きで適用する必要があります。たとえば、UAスニッフィングでgt-ios8クラスをに追加し<html>ます。

— かみそり
ソース

1

このJSは正確に何をしますか？

— Ben Sinclair

を参照している場合scrollIntoViewIfNeeded、それはscrollIntoView（developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView）の非標準の派生です。名前が示すように、このメソッドは要素をビューにスクロールします。trueパラメータは、ビューを要素の上部に揃えることを示します。これにより、実際にはスクロールできなくなります。ただし、実装には欠陥があります。

— Gajus 2014年

1

コメント/一部回答/考えを共有したい。私は、overflow-y：scrollテクニックを使用して、私の次の大きなプロジェクトに取り組んでいます。これを使用すると、2つの主要な利点があります。

a）画面下部にあるアクションボタン付きの引き出しを使用できます。ドキュメントがスクロールしてボトムバーが消えた場合、画面の下部にあるボタンをタップすると、最初にボトムバーが表示され、次にクリック可能になります。また、これが機能する方法は、一番下にボタンがあるモーダルで問題を引き起こします。

b）オーバーフローした要素を使用する場合、CSSに大きな変更があった場合に再描画されるのは、表示可能な画面にあるものだけです。これにより、JavaScriptを使用して複数の要素のCSSをその場で変更するときに、パフォーマンスが大幅に向上しました。たとえば、再描画する必要のある20個の要素のリストがあり、そのうち2つだけがオーバーフロー要素に画面上にある場合、スクロール時に残りの要素が再描画されている間、それらのみが再描画されます。これがなければ、20の要素すべてが再描画されます。

..もちろん、それはプロジェクトに依存し、私が述べた機能のいずれかが必要かどうかにも依存します。Googleは、gmailのオーバーフロー要素を使用して、a）で説明した機能を使用します。イモ、古いiphoneの高さの低さ（あなたが言ったように372px）を考慮しても、それはしばらくの価値があります。

— スクーターロード
ソース

1

iOS 11では十分に機能しなかった（https://gist.github.com/bitinn/1700068a276fb29740a7）の作業の助けを借りて以下の例のようにまとめたものを使用することは可能です。

iOS 11.03で動作する変更されたコードは次のとおりです。動作するかどうかコメントしてください。

重要なのは、ブラウザがスクロールできるように、BODYにサイズを追加することです。例：height：calc（100％+ 40px）;

以下の完全なサンプルとブラウザで表示するリンク（テストしてください！）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeHots iOS WebApp Minimal UI via Scroll Test</title>

    <style>
        html, body {
            height: 100%;
        }
        html {
            background-color: red;
        }
        body {
            background-color: blue;
            /* important to allow page to scroll */
            height: calc(100% + 40px);
            margin: 0;
        }
        div.header {
            width: 100%;
            height: 40px;
            background-color: green;
            overflow: hidden;
        }
        div.content {
            height: 100%;
            height: calc(100% - 40px);
            width: 100%;
            background-color: purple;
            overflow: hidden;
        }
        div.cover {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            display: none;
        }
        @media screen and (width: 320px) {
            html {
                height: calc(100% + 72px);
            }
            div.cover {
                display: block;
            }
        }
    </style>
    <script>
        var timeout;

        function interceptTouchMove(){
            // and disable the touchmove features 
            window.addEventListener("touchmove", (event)=>{
                if (!event.target.classList.contains('scrollable')) {
                    // no more scrolling
                    event.preventDefault();
                }
            }, false); 
        }

        function scrollDetect(event){
            // wait for the result to settle
            if( timeout ) clearTimeout(timeout);

            timeout = setTimeout(function() {
                console.log( 'scrolled up detected..' );
                if (window.scrollY > 35) {
                    console.log( ' .. moved up enough to go into minimal UI mode. cover off and locking touchmove!');
                    // hide the fixed scroll-cover
                    var cover = document.querySelector('div.cover');
                    cover.style.display = 'none';

                    // push back down to designated start-point. (as it sometimes overscrolls (this is jQuery implementation I used))
                    window.scrollY = 40;

                    // and disable the touchmove features 
                    interceptTouchMove();

                    // turn off scroll checker
                    window.removeEventListener('scroll', scrollDetect );                
                }
            }, 200);            
        }

        // listen to scroll to know when in minimal-ui mode.
        window.addEventListener('scroll', scrollDetect, false );
    </script>
</head>
<body>

    <div class="header">
        <p>header zone</p>
    </div>
    <div class="content">
        <p>content</p>
    </div>
    <div class="cover">
        <p>scroll to soft fullscreen</p>
    </div>

</body>

ここに完全な例のリンク：https : //repos.codehot.tech/misc/ios-webapp-example2.html

— コードフリーズ
ソース

1

iOSとAndroidの両方でWebアプリケーションをフルスクリーンで実行することは可能です。これはPWAと呼ばれ、かなりの努力の結果、この問題を回避する唯一の方法でした。

PWAは、見逃してはならない多くの興味深い開発オプションを開きます。私はすでにカップルを作成しました。デザイナー向けの公開および非公開の入札マニュアル（スペイン語）を確認してください。そして、これはCosmicJSサイトからの英語の説明です

— ガナー
ソース

-2

私はiOSのWebデザインを行っていませんが、WWDCセッションとドキュメントで見たことを思い出すと、Mobile Safariの検索バーとOS全体のナビゲーションバーが自動的にサイズ変更と縮小されて、より多くのコンテンツが表示されるようになりました。

これをiPhoneのSafariでテストすると、下にスクロールしてページのコンテンツをさらに表示すると、ナビゲーション/検索バーが自動的に非表示になります。

おそらく、アドレスバー/ナビゲーションバーをそのままにして、フルスクリーンエクスペリエンスを作成しないのが最善です。Appleがすぐにそうするのを見ることはない。そして、多くても、アドレスバーの表示/非表示を自動的に制御することはできません。

もちろん、あなたは特にiPhone 4または4Sで画面の領域を失っていますが、Beta 4の時点では代替手段がないようです。

— iFeli
ソース

1

iOS7以降のこの機能を知っていましたが、上記の説明を参照してください。ドキュメントの高さはブラウザーのビューポートとまったく同じであるため、ドキュメントレベルでスクロールが行われないため、モバイルブラウザーはアドレスバー/ナビゲーションメニューを非表示にしません。

— bitinn 2014

1

ベータ4でその機能が削除されたため、これは制限事項の一部になる可能性があります。Appleがアドレスバーを自動的に制御し、開発者がアドレスバーにアクセスできないようにしている可能性があります。

— iFeli 14

8

I haven't done web design for iOS-あなたがウェブデザインをしているなら、あなたはすべてのプラットフォームのためにそれをします。ウェブはすべてのプラットフォーム上にあるからです。

— ProblemsOfSumit

4

@Sumit Webでの作業は普遍的ですが、各ブラウザーとその基盤となるフレームワークには特定のCSS属性があることを知っています。そのため、Chromeには、SafariとFireFox、およびその逆では使用できない属性がある場合があります。

— iFeli