wake-up-neo.net

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

Wir entwickeln derzeit eine reaktionsschnelle Web-App (Newsreader), mit der Benutzer zwischen Inhalten mit Registerkarten wechseln und vertikal in Inhalten mit Registerkarten blättern können.

Ein gängiger Lösungsansatz für das Problem besteht darin, einen Wrapper div zu haben, der das Browser-Ansichtsfenster ausfüllt, overflow auf hidden oder auto setzt und dann einen horizontalen Bildlauf durchführt und/oder senkrecht hinein.

Dieser Ansatz ist großartig, hat aber einen Hauptnachteil: Da die Höhe des Dokuments genau der des Browser-Ansichtsfensters entspricht, verbirgt der mobile Browser die Adressleiste/das Navigationsmenü nicht .

Es gibt zahlreiche Hacks und Viewport-Eigenschaften , die es uns ermöglichen, mehr Platz auf dem Bildschirm zu bekommen, aber keine ist so effektiv wie minimal-ui (Eingeführt in iOS 7.1).

Gestern gab es die Nachricht, dass iOS 8 beta4 minimal-ui Von Mobile Safari entfernt hat (siehe Webkit-Abschnitt in iOS 8 Release Notes ), was uns zu Fragen veranlasste:

Q1. Ist es immer noch möglich, die Adressleiste auf Mobile Safari auszublenden?

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

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

Mit soft fullscreen meine ich eigentlich ohne das meta tag mobile-web-app-capable.

Unsere Web-App ist so konzipiert, dass sie zugänglich ist. Jede Seite kann mit einem Lesezeichen versehen oder über das native Browsermenü freigegeben werden. Durch Hinzufügen von mobile-web-app-capable Verhindern wir, dass Benutzer ein solches Menü aufrufen (wenn es auf dem Homescreen gespeichert ist), was die Benutzer verwirrt und verärgert.

minimal-ui War früher der Mittelweg und hat das Menü standardmäßig ausgeblendet, aber mit einem Fingertipp darauf zugreifen können - obwohl Apple hat es möglicherweise entfernt aufgrund anderer Zugänglichkeitsprobleme (z. B. Benutzer, die nicht wissen, wo sie tippen müssen, um das Menü zu aktivieren).

Q3. Lohnt sich ein Fullscreen-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 (dasselbe gilt für Chrome unter Android).

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

Würde gerne ein paar Alternativen hören (außer eine native App zu erstellen).

182
bitinn

Die Ansichtsfenstereigenschaft minimal-ui wird in iOS 8 nicht mehr unterstützt . Die Minimal-ui selbst ist jedoch nicht verschwunden. Der Benutzer kann die Minimal-UI mit einer "Touch-Drag-Down" -Geste eingeben.

Es gibt verschiedene Voraussetzungen und Hindernisse, um den Ansichtszustand zu verwalten, z. Damit minimal-ui funktioniert, muss genügend Inhalt vorhanden sein, damit der Benutzer scrollen kann. Damit die minimale Benutzeroberfläche erhalten bleibt, muss der Bildlauf des Fensters beim Laden der Seite und nach einer Änderung der Ausrichtung versetzt werden. Es gibt jedoch keine Möglichkeit, die Dimensionen der Minimal-UI mit der Variablen screen zu berechnen, und daher keine Möglichkeit, festzustellen, wann sich der Benutzer in der Minimal-UI befindet. Ich im Voraus.

Diese Beobachtungen sind das Ergebnis von Untersuchungen im Rahmen der Entwicklung von BrimView Manager für iOS 8. Die Endimplementierung funktioniert folgendermaßen:

Beim Laden der Seite erstellt Brim ein Laufbandelement. Das Laufbandelement wird verwendet, um dem Benutzer Platz zum Scrollen zu geben. Durch das Vorhandensein des Laufbandelements wird sichergestellt, dass der Benutzer die Minimal-UI-Ansicht aufrufen kann und diese weiterhin angezeigt wird, wenn der Benutzer die Seite neu lädt oder die Geräteorientierung ändert. Es ist für den Benutzer die ganze Zeit unsichtbar. Dieses Element hat die ID brim-treadmill.

Beim Laden der Seite oder nach dem Ändern der Ausrichtung verwendet Brim Scream , um festzustellen, ob sich die Seite in der Minimal-UI-Ansicht befindet (Seite, die zuvor in Minimal-UI war und war) Reloaded bleibt in der Minimal-UI, wenn die Höhe des Inhalts größer als die Höhe des Ansichtsfensters ist.

Wenn sich die Seite in der Minimal-UI befindet, deaktiviert Brim das Scrollen des Dokuments (dies geschieht auf eine sichere Weise , die sich nicht auf den Inhalt des Hauptelements auswirkt). Durch Deaktivieren des Dokumentenscrollens wird verhindert, dass die Minimal-Benutzeroberfläche beim Scrollen nach oben versehentlich verlassen wird. Gemäß der ursprünglichen iOS 7.1-Spezifikation wird durch Tippen auf die obere Leiste der Rest des Chroms wiederhergestellt.

Das Endergebnis sieht so aus:

Brim in iOS simulator.

Aus Dokumentationsgründen und für den Fall, dass Sie es vorziehen, eine eigene Implementierung zu schreiben, sollten Sie beachten, dass Sie Scream nicht verwenden können, um zu erkennen, ob sich das Gerät direkt nach dem in der Minimal-UI befindet directionchange -Ereignis, da window -Dimensionen nicht die neue Ausrichtung widerspiegeln, bis die Rotationsanimation beendet ist. Sie müssen einen Listener an das Ereignis orientationchangeend anhängen.

Scream und directionchangeend wurden im Rahmen dieses Projekts entwickelt.

82
Gajus

Da es keine programmgesteuerte Möglichkeit gibt, minimal-ui Nachzuahmen, haben wir eine andere Problemumgehung gefunden, indem wir calc() und die bekannte Höhe der iOS-Adressleiste zu unserem Vorteil verwendet haben:

Die folgende Demoseite ( auch auf Gist verfügbar, weitere technische Details dort ) fordert den Benutzer zum Scrollen auf, was dann einen Soft-Vollbildmodus (Adressleiste/Menü ausblenden) auslöst, bei dem Kopf- und Inhaltszeile die neue füllen Ansichtsfenster.

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

Verabschiede dich einfach von minimal-ui (fürs Erste)

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

Ich habe mich mit dem Problem beschäftigt, während ich mit meinem js-Framework für HTML5-Apps gearbeitet habe. Nach vielen Lösungsversuchen mit jeweils eigenen 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 am Ende jede Form von Minimal-UI verhindert, sodass zumindest meine Bildschirmhöhe immer gleich ist und Sie immer wissen, welchen tatsächlichen Platz Sie haben habe für deine app.

Mit der Zeit haben genügend Benutzer mehr Platz.


BEARBEITEN

Wie ich es mache

Dies ist zu Demonstrationszwecken 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 #main 's Hö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. Dies bedeutet auch, dass Sie sich mit der Aktualisierung befassen müssen.

  2. Ich blockiere das Überscrollen, wenn ich die Grenzen der Schriftrolle erreiche. Dieses ist etwas tiefer in meinem Code, aber ich denke, Sie können auch das Prinzip diese Antwort für grundlegende Funktionen befolgen. Ich denke, es könnte ein bisschen Flickr werden, aber ich werde den Job machen.


Siehe die Demo (auf einem iPhone)

Als Randbemerkung: Auch diese App ist als Lesezeichen zu kennzeichnen, da sie ein internes Routing zum Hashing von Adressen verwendet, aber ich habe auch einen Prompt-iOS-Benutzer hinzugefügt, um ihn zu meiner Startseite hinzuzufügen. Ich fühle, dass dieser Weg Loyalität und wiederkehrenden Besuchern hilft (und so ist der verlorene Raum zurück).

9

Die einfachste Möglichkeit, dies zu beheben, bestand darin, die Höhe der body- und html-Elemente für jede Anforderung, 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%; }

Schau es dir an unter https://www.360jungle.com/virtual-tour/25

7
Stephen Garside

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

Wie Sie bereits herausgefunden haben, können Sie dieses Problem umgehen, indem Sie am unteren Rand Polster hinzufügen:

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-ios8 - Klasse zu <html> Hinzufügt.

2
Razor

Es ist IS möglich, mit etwas wie dem folgenden Beispiel, das ich mit Hilfe der Arbeit von ( https://Gist.github.com/bitinn/1700068a276fb29740a7 ) zusammengestellt habe ganz arbeiten auf iOS 11:

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 scrollen kann, zum Beispiel: höhe: calc (100% + 40px);

Vollständiges Beispiel unten und Link zum Anzeigen 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

1
Code Freeze

Ich möchte meine Gedanken kommentieren/teilweise beantworten/teilen. Ich benutze die overflow-y: scroll-Technik für ein großes Projekt von mir. Die Verwendung hat zwei wesentliche Vorteile.

a) Sie können eine Schublade mit Aktionsschaltflächen am unteren Bildschirmrand verwenden. Wenn das Dokument gescrollt wird und die untere Leiste ausgeblendet wird, wird durch Tippen auf eine Schaltfläche am unteren Bildschirmrand zuerst die untere Leiste angezeigt und kann dann angeklickt werden. Außerdem verursacht die Funktionsweise dieses Dings Probleme mit Modals, die Schaltflächen ganz unten haben.

b) Wenn Sie ein übergelaufenes Element verwenden, werden bei größeren CSS-Änderungen nur die Elemente auf dem sichtbaren Bildschirm neu gezeichnet. Dies gab mir eine enorme Leistungssteigerung, wenn ich Javascript verwendete, um CSS von mehreren Elementen im laufenden Betrieb zu ändern. Wenn Sie beispielsweise eine Liste mit 20 Elementen haben, die neu gezeichnet werden müssen, und nur zwei davon im übergelaufenen Element auf dem Bildschirm angezeigt werden, werden nur diese neu gezeichnet, während der Rest beim Scrollen neu gezeichnet wird. Ohne es werden alle 20 Elemente neu lackiert.

..natürlich hängt es vom Projekt ab und ob Sie eine der genannten Funktionen benötigen. Google verwendet übergelaufene Elemente für Google Mail, um die unter a) beschriebene Funktionalität zu nutzen. Imo, es lohnt sich, auch wenn man bedenkt, dass ältere Iphones nur eine geringe Höhe haben (372px, wie Sie sagten).

1
scooterlord

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

PWAs eröffnen eine Reihe von interessanten Optionen für die Entwicklung, die Sie nicht verpassen sollten. Ich habe bereits ein paar gemacht, lesen Sie dieses öffentliche und private Ausschreibungshandbuch für Designer (Spanisch). nd hier ist eine englische Erklärung von der CosmicJS Seite

0
ganar