(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, overflow
auf hidden
oder setzt auto
und 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-ui
aus 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.scrollTo
Hack. 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-capable
Meta-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-capable
verhindern wir, dass Benutzer ein solches Menü aufrufen (wenn es auf dem Homescreen gespeichert ist), was die Benutzer verwirrt und antagonisiert.
minimal-ui
Frü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).
Antworten:
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 berechnen
screen
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:
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
window
Abmessungen 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.
quelle
Da es keine programmatische Möglichkeit zur Nachahmung gibt
minimal-ui
, haben wir eine andere Problemumgehung entwickelt, bei der diecalc()
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.
quelle
Verabschieden Sie sich einfach von minimal-ui (für jetzt)
Es 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 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
Dann:
dann setze ich mit js die
#main
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. Es bedeutet auch, dass Sie sich mit der Aktualisierung befassen müssen. Beachten Sie dies.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).
quelle
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.
Überprüfen Sie es unter https://www.360jungle.com/virtual-tour/25
quelle
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:
Das obige CSS sollte unter bestimmten Bedingungen angewendet werden, z. B. wenn UA-Sniffing eine
gt-ios8
Klasse hinzufügt<html>
.quelle
scrollIntoViewIfNeeded
, handelt es sich um eine nicht standardmäßige Ableitung vonscrollIntoView
( developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView ). Wie der Name schon sagt, scrollt die Methode das Element in die Ansicht.true
Der Parameter sagt, dass die Ansicht am oberen Rand des Elements ausgerichtet werden soll. Dies sollte Sie tatsächlich am Scrollen hindern. Die Implementierung ist jedoch fehlerhaft.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).
quelle
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!)
Vollständiger Beispiellink hier: https://repos.codehot.tech/misc/ios-webapp-example2.html
quelle
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
quelle
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.
quelle
I haven't done web design for iOS
- Wenn Sie Webdesign betreiben, tun Sie dies für jede Plattform. Weil das Web auf jeder Plattform ist.