iOS 8 hat die Ansichtsfenster-Eigenschaft "minimal-ui" entfernt. Gibt es andere "weiche Vollbild" -Lösungen?

(Dies ist eine mehrteilige Frage. Ich werde mein Bestes geben, um das Szenario zusammenzufassen.)

Derzeit erstellen wir eine reaktionsschnelle Web-App (Newsreader), mit der Benutzer zwischen Inhalten mit Registerkarten wechseln und in jedem Inhalt mit Registerkarten vertikal scrollen können.

Ein gängiger Ansatz für das Problem besteht darin, einen Wrapper zu haben div, der das Browser-Ansichtsfenster ausfüllt, overflowauf hiddenoder setzt autound dann horizontal und / oder vertikal darin scrollt.

Dieser Ansatz ist großartig, hat jedoch einen Hauptnachteil: Da die Höhe des Dokuments genau der des Browser-Ansichtsfensters entspricht, wird die Adressleiste / das Navigationsmenü vom mobilen Browser nicht ausgeblendet .

Es gibt zahlreiche Hacks und Ansichtsfenster-Eigenschaften , die es uns ermöglichen, mehr Bildschirmfläche zu erhalten, aber keine ist so effektiv wie minimal-ui(eingeführt in iOS 7.1).

Gestern kam die Nachricht, dass iOS 8 Beta4 minimal-uiaus Mobile Safari entfernt wurde (siehe Abschnitt Webkit in den Versionshinweisen zu iOS 8 ), was uns wunderte:

Q1. Ist es weiterhin möglich, die Adressleiste in Mobile Safari auszublenden?

Soweit wir wissen, reagiert iOS 7 nicht mehr auf den window.scrollToHack. Dies deutet darauf hin, dass wir mit dem kleineren Bildschirmbereich leben müssen, es sei denn, wir verwenden ein vertikales Layout oder verwenden es mobile-web-app-capable.

Q2. Ist es immer noch möglich, ein ähnliches weiches Vollbild-Erlebnis zu haben?

Mit weichem Vollbild meine ich wirklich ohne Verwendung des mobile-web-app-capableMeta-Tags.

Unsere Web-App ist so aufgebaut, dass sie zugänglich ist. Jede Seite kann über das native Browser-Menü mit einem Lesezeichen versehen oder geteilt werden. Durch das Hinzufügen mobile-web-app-capableverhindern wir, dass Benutzer ein solches Menü aufrufen (wenn es auf dem Homescreen gespeichert ist), was die Benutzer verwirrt und antagonisiert.

minimal-uiFrüher war dies der Mittelweg, bei dem das Menü standardmäßig ausgeblendet wurde, aber mit einem Fingertipp zugänglich blieb - obwohl Apple es möglicherweise aufgrund anderer Bedenken hinsichtlich der Barrierefreiheit entfernt hat (z. B. wenn Benutzer nicht wissen, wo sie tippen müssen, um das Menü zu aktivieren).

Q3. Lohnt sich ein Vollbild-Erlebnis?

Es scheint, dass eine Vollbild-API nicht in Kürze für iOS verfügbar sein wird, aber selbst wenn dies der Fall ist, sehe ich nicht, wie das Menü zugänglich bleibt (dies gilt auch für Chrome unter Android).

In diesem Fall sollten wir die mobile Safari möglicherweise einfach so lassen, wie sie ist, und die Höhe des Ansichtsfensters berücksichtigen (für das iPhone 5+ beträgt sie 460 = 568 - 108, wobei 108 die Betriebssystemleiste, die Adressleiste und das Navigationsmenü enthält, für das iPhone 4 oder älter, es ist 372).

Würde gerne einige Alternativen hören (neben dem Erstellen einer nativen App).

Die Eigenschaft "Minimal-UI-Ansichtsfenster" wird nicht mehr unterstützt in iOS 8 . Die Minimal-UI selbst ist jedoch nicht mehr vorhanden. Der Benutzer kann die Minimal-Benutzeroberfläche mit einer "Touch-Drag-Down" -Geste eingeben.

Es gibt verschiedene Voraussetzungen und Hindernisse für die Verwaltung des Ansichtsstatus, z. B. damit die minimale Benutzeroberfläche funktioniert, muss genügend Inhalt vorhanden sein, damit der Benutzer einen Bildlauf durchführen kann. Damit die minimale Benutzeroberfläche erhalten bleibt, muss der Bildlauf beim Laden der Seite und nach Änderung der Ausrichtung versetzt sein. Es gibt jedoch keine Möglichkeit, die Abmessungen der Minimal-UI mit der zu berechnenscreen Variablen zu berechnen, und daher keine Möglichkeit, im Voraus zu sagen, wann sich der Benutzer in der Minimal-UI befindet.

Diese Beobachtungen sind ein Ergebnis von Untersuchungen im Rahmen der Entwicklung des Brim - View Managers für iOS 8 . Die Endimplementierung funktioniert folgendermaßen:

Wenn die Seite geladen wird, erstellt Brim ein Laufbandelement. Das Laufbandelement wird verwendet, um dem Benutzer Platz zum Scrollen zu geben. Das Vorhandensein des Laufbandelements stellt sicher, dass der Benutzer die Minimal-UI-Ansicht aufrufen kann und dass sie weiterhin besteht, wenn der Benutzer die Seite neu lädt oder die Geräteausrichtung ändert. Es ist für den Benutzer die ganze Zeit unsichtbar. Dieses Element hat eine IDbrim-treadmill .

Beim Laden der Seite oder nach dem Ändern der Ausrichtung verwendet Brim Scream , ob sich die Seite in der Minimal-UI-Ansicht befindet (eine Seite, die zuvor in Minimal-UI war und neu geladen wurde, bleibt in der Minimal-UI, wenn die Inhaltshöhe beträgt größer als die Höhe des Ansichtsfensters).

Wenn sich die Seite in der minimalen Benutzeroberfläche befindet, deaktiviert Brim das Scrollen des Dokuments (dies geschieht auf sichere Weise , ohne den Inhalt des Hauptelements zu beeinträchtigen). Durch Deaktivieren des Bildlaufs von Dokumenten wird verhindert, dass beim Scrollen nach oben versehentlich die minimale Benutzeroberfläche verlassen wird. Gemäß der ursprünglichen iOS 7.1-Spezifikation bringt das Tippen auf die obere Leiste den Rest des Chroms zurück.

Das Endergebnis sieht folgendermaßen aus:

Aus Gründen der Dokumentation und für den Fall, dass Sie lieber Ihre eigene Implementierung schreiben möchten, ist es erwähnenswert, dass Sie Scream nicht verwenden können, um zu erkennen, ob sich das Gerät direkt nach dem Orientierungsänderungsereignis in einer minimalen Benutzeroberfläche befindet, da die windowAbmessungen die neue Ausrichtung erst am widerspiegeln Rotationsanimation ist beendet. Sie müssen dem Orientierungsänderungsereignis einen Listener hinzufügen.

Schrei und Orientierungswechsel wurden im Rahmen dieses Projekts entwickelt.

Da es keine programmatische Möglichkeit zur Nachahmung gibt minimal-ui, haben wir eine andere Problemumgehung entwickelt, bei der die calc()bekannte Höhe der iOS-Adressleiste zu unserem Vorteil verwendet wird:

Die folgende Demoseite ( auch im Kern verfügbar, weitere technische Details dort ) fordert den Benutzer zum Scrollen auf, wodurch ein Soft-Vollbildmodus (Adressleiste / Menü ausblenden) ausgelöst wird, in dem Kopfzeile und Inhalt das neue Ansichtsfenster ausfüllen.

<!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>

Verabschieden Sie sich einfach von minimal-ui (für jetzt)

Es ist wahr, minimal-uikönnte sowohl nützlich als auch schädlich sein, und ich nehme an, der Kompromiss hat jetzt ein anderes Gleichgewicht zugunsten neuerer, größerer iPhones.

Ich habe mich mit dem Problem befasst, während ich mit meinem js-Framework für HTML5-Apps gearbeitet habe. Nach vielen Lösungsversuchen mit jeweils ihren Nachteilen habe ich mich der Überlegung ergeben, dass auf iPhones vor 6 Speicherplatz verloren gegangen ist. Angesichts der Situation denke ich, dass das einzige solide und vorhersehbare Verhalten ein vorbestimmtes ist.

Kurz gesagt, ich habe letztendlich jede Form von Minimal-UI verhindert , sodass zumindest meine Bildschirmhöhe immer gleich ist und Sie immer wissen, welchen tatsächlichen Speicherplatz Sie für Ihre App haben.

Mit Hilfe der Zeit haben genügend Benutzer mehr Platz.

BEARBEITEN

Wie ich es mache

Dies ist für Demozwecke etwas vereinfacht, sollte aber für Sie funktionieren. Angenommen, Sie haben einen Hauptcontainer

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

Dann:

1. dann setze ich mit js die #mainHöhe auf die verfügbare Höhe des Fensters. Dies hilft auch beim Umgang mit anderen Bildlauffehlern, die sowohl in iOS als auch in Android auftreten. Es bedeutet auch, dass Sie sich mit der Aktualisierung befassen müssen. Beachten Sie dies.

2. Ich blockiere das Über-Scrollen, wenn ich die Grenzen der Schriftrolle erreiche. Dieser ist etwas tiefer in meinem Code, aber ich denke, Sie können auch das Prinzip dieser Antwort für grundlegende Funktionen befolgen . Ich denke, es könnte ein wenig flimmern, aber es wird den Job machen.

Sehen Sie sich die Demo an (auf einem iPhone)

Als Nebenbemerkung: Auch diese App ist mit einem Lesezeichen versehen, da sie ein internes Routing zum Hashing von Adressen verwendet. Ich habe jedoch auch eine Aufforderung für iOS-Benutzer hinzugefügt, diese zu Hause hinzuzufügen. Ich denke, dieser Weg hilft der Loyalität und den wiederkehrenden Besuchern (und so ist der verlorene Platz zurück).

Der einfachste Weg, dies zu beheben, bestand darin, die Höhe der Body- und HTML-Elemente für jede Anfrage, bei der der Benutzeragent ein iPhone war, auf 100,1% zu setzen. Dies funktioniert nur im Querformat, aber das ist alles, was ich brauchte.

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

Überprüfen Sie es unter https://www.360jungle.com/virtual-tour/25

Das Hauptproblem hier scheint, dass iOS8-Safari die Adressleiste beim Scrollen nach unten nicht verbirgt, wenn der Inhalt gleich oder kleiner als das Ansichtsfenster ist.

Wie Sie bereits herausgefunden haben, kann dieses Problem durch Hinzufügen von Polstern am unteren Rand umgangen werden:

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

Das obige CSS sollte unter bestimmten Bedingungen angewendet werden, z. B. wenn UA-Sniffing eine gt-ios8Klasse hinzufügt <html>.

Ich möchte meine Gedanken kommentieren / teilweise beantworten / teilen. Ich verwende die Overflow-y: Scroll-Technik für ein großes bevorstehendes Projekt von mir. Die Verwendung hat zwei große Vorteile.

a) Sie können eine Schublade mit Aktionstasten am unteren Bildschirmrand verwenden. Wenn das Dokument einen Bildlauf durchführt und die untere Leiste verschwindet, wird durch Tippen auf eine Schaltfläche am unteren Bildschirmrand zuerst die untere Leiste angezeigt und kann dann angeklickt werden. Auch die Art und Weise, wie dieses Ding funktioniert, verursacht Probleme mit Modalen, die Schaltflächen ganz unten haben.

b) Wenn Sie ein überflogenes Element verwenden, werden bei größeren CSS-Änderungen nur die Elemente auf dem sichtbaren Bildschirm neu gestrichen. Dies gab mir einen enormen Leistungsschub bei der Verwendung von Javascript, um das CSS mehrerer Elemente im laufenden Betrieb zu ändern. Wenn Sie beispielsweise eine Liste mit 20 Elementen haben, die neu gestrichen werden müssen, und nur zwei davon im übergelaufenen Element auf dem Bildschirm angezeigt werden, werden nur diese neu gestrichen, während der Rest beim Scrollen neu gestrichen wird. Ohne sie werden alle 20 Elemente neu gestrichen.

..natürlich kommt es auf das Projekt an und ob Sie eine der von mir genannten Funktionen benötigen. Google verwendet übergelaufene Elemente für Google Mail, um die unter a) beschriebenen Funktionen zu nutzen. Imo, es lohnt sich, auch wenn man die geringe Höhe älterer iPhones berücksichtigt (372px, wie Sie sagten).

Es ist möglich, etwas wie das folgende Beispiel zu verwenden, das ich mit Hilfe der Arbeit von ( https://gist.github.com/bitinn/1700068a276fb29740a7) zusammengestellt habe ) zusammengestellt habe, das unter iOS 11 nicht ganz funktioniert hat:

Hier ist der geänderte Code, der unter iOS 11.03 funktioniert. Bitte kommentieren Sie, ob er für Sie funktioniert hat.

Der Schlüssel fügt BODY eine gewisse Größe hinzu, damit der Browser einen Bildlauf durchführen kann, z. B .: Height: calc (100% + 40px);

Vollständiges Beispiel unten & Link zur Anzeige in Ihrem Browser (bitte testen!)

<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>

Vollständiger Beispiellink hier: https://repos.codehot.tech/misc/ios-webapp-example2.html

Es ist möglich, eine Webanwendung sowohl unter iOS als auch unter Android im Vollbildmodus auszuführen. Sie wird als PWA bezeichnet und war nach viel harter Arbeit der einzige Weg, um dieses Problem zu umgehen.

PWAs eröffnen eine Reihe interessanter Entwicklungsoptionen, die man sich nicht entgehen lassen sollte. Ich habe bereits ein paar gemacht, lesen Sie dieses Handbuch für öffentliche und private Ausschreibungen für Designer (Spanisch). Und hier ist eine englische Erklärung von der CosmicJS-Site

Ich habe noch kein Webdesign für iOS erstellt, aber nach dem, was ich in den WWDC-Sitzungen und in der Dokumentation gesehen habe, werden die Suchleiste in Mobile Safari und die Navigationsleisten im gesamten Betriebssystem jetzt automatisch in der Größe geändert und verkleinert, um mehr Inhalte anzuzeigen.

Sie können dies in Safari auf einem iPhone testen und feststellen, dass die Navigations- / Suchleiste automatisch ausgeblendet wird, wenn Sie nach unten scrollen, um weitere Inhalte auf einer Seite anzuzeigen.

Vielleicht ist es am besten, die Adressleiste / Navigationsleiste unverändert zu lassen und kein Vollbild zu erstellen. Ich sehe Apple nicht so schnell. Und höchstens steuern sie nicht automatisch, wann die Adressleiste ein- / ausgeblendet wird.

Sicher, Sie verlieren Bildschirmfläche, insbesondere auf einem iPhone 4 oder 4S, aber ab Beta 4 scheint es keine Alternative zu geben.