Apples iPhone X hat einen Bildschirm, der die gesamte Vorderseite des Telefons bedeckt, mit Ausnahme einer „Kerbe“, um Platz für eine Kamera und verschiedene andere Komponenten zu schaffen. Dies führt zu einigen ungünstigen Situationen für das Screendesign, wie z. B. die Beschränkung von Websites auf einen „sicheren Bereich“ und weiße Balken an den Rändern. Es ist keine große Kunst, sie zu entfernen, ein background-color für den Body reicht aus. Oder Sie erweitern die Website auf die gesamte Fläche (Kerbe zum Teufel) und fügen viewport-fit=cover zu Ihrem Meta-Viewport-Tag hinzu.
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
Dann liegt es an Ihnen, etwaige Überlappungen zu berücksichtigen, die normalerweise vom sicheren Bereich abgedeckt worden wären. Es gibt neues CSS, das Ihnen dabei hilft. Stephen Radford dokumentiert
Um Anpassungen zu ermöglichen, die erforderlich sein könnten, enthält die iOS 11-Version von Safari einige Konstanten, die verwendet werden können, wenn
viewport-fit=coveraktiv ist.
safe-area-inset-topsafe-area-inset-rightsafe-area-inset-leftsafe-area-inset-bottomDies kann zu
margin,paddingoder absoluten Positionierungswerten wietopoderlefthinzugefügt werden.Ich habe Folgendes zum Hauptcontainer auf der Website hinzugefügt.
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
(Update: Als das iPhone X auf den Markt kam, wurde constant() anstelle von env() verwendet, aber ab Version 11.2 wurde constant() zugunsten des standardisierten env() entfernt).
Es gibt eine weitere ungünstige Situation mit der Kerbe, dem sicheren Bereich und der festen Positionierung. Darryl Pogue berichtet
Wo sich iOS 11 von früheren Versionen unterscheidet, ist, dass der Webview-Inhalt nun die sicheren Bereiche respektiert. Das bedeutet, dass, wenn Sie eine Header-Leiste haben, die ein Element mit fester Positionierung und
top: 0ist, sie zunächst 20 Pixel unterhalb des oberen Bildschirmrands angezeigt wird: ausgerichtet an der Unterseite der Statusleiste. Wenn Sie nach unten scrollen, bewegt sie sich hinter die Statusleiste. Wenn Sie nach oben scrollen, fällt sie wieder unter die Statusleiste (wodurch eine unschöne Lücke entsteht, durch die der Inhalt in der 20-Pixel-Lücke sichtbar wird).Wie schlimm es ist, sehen Sie in diesem Videoclip
Glücklicherweise ist dies auch eine einfache Lösung, da die Ergänzung viewport-fit=cover zum Meta-Viewport-Tag dies behebt.
Wenn Sie diesen Viewport abdecken wollen, müssen Sie wahrscheinlich etwas clever sein, um versteckte Inhalte zu vermeiden!
Ich glaube, ich habe das Kerbenproblem im Querformat behoben 🍾 #iphoneX pic.twitter.com/hGytyO3DRV
— Vojta Stavik (@vojtastavik) 13. September 2017
Das scheint ein sehr schlechter Design-Schritt von Apple zu sein. Ich möchte Entwickler wirklich ermutigen, die weißen Balken einfach beizubehalten, und die Benutzer einfach denken zu lassen: „Wow, dieses Telefon ist nicht sehr gut für die Anzeige von Webinhalten geeignet.“ Wir sollten keine solchen browserspezifischen „Fixes“ machen müssen (lassen Sie es uns beim Namen nennen… einen „Hack“).
Teilt jemand diesen Standpunkt?
Ich stimme vollkommen zu. Noch schlimmer ist, dass es kein „browserspezifischer Fix“ ist (als wären wir wieder im IE6-Zeitalter…), sondern ein Fix, der nur für **einen Browser auf einem einzigen Gerät** gilt. Uff.
Stimme zu 100 %.
Die Geschichte hat gezeigt, dass Apple ziemlich unfähig zu klugen Designentscheidungen ist, wenn Jobs nicht dabei ist.
Ich stimme zu. Wir reden hier von einem weiteren Internet Explorer.
Ich teile Ihre Gedanken auf jeden Fall. Ein paar Zeilen herstellerspezifischen Codes hinzuzufügen, um speziell das iPhone X zu behandeln, fühlt sich falsch an.
Sie haben Recht, ich teile das vollkommen!
Leider werden einige große Unternehmen clevere Lösungen einführen, und die Benutzer werden sehen, dass die weißen Balken nur auf einigen Websites vorhanden sind und annehmen, dass die Website schuld ist.
Ich stimme zu 100%.
1 Like für Sie :))
Ich stimme Ihnen vollkommen zu, die Einführung proprietärer Variablen ist ein schlechter Schritt von Apple.
Wir müssen immer noch einige Vendor-Präfixe verwalten, und die kamen aus dem Nichts mit diesen Werten.
Ich stimme zu. Diese Kerbe ist absolut lächerlich. Sie hätten den gesamten oberen Teil als schwarzen Balken machen sollen, wie beim Samsung S8 (der übrigens ein besseres Verhältnis von Bildschirm zu Gehäuse hat).
Ich tue es!
Das Problem ist, dass Benutzer das Gerät nie beschuldigen, wenn sie damit zufrieden sind. Meiner Erfahrung nach beschuldigen Benutzer immer die Website. Oh, Sie benutzen IE9 und diese moderne, standardkonforme Website sieht nicht gut aus? Muss die Website sein.
Sie hätten fast dasselbe Argument über das Viewport-Meta-Tag im Jahr 2007 machen können.
Um fair zu Apple zu sein, ist
viewport-fitTeil eines bestehenden Standards, der sich speziell mit nicht-rechteckigen Bildschirmen befasst. Sie haben es hier bestimmungsgemäß verwendet.Was die neuen CSS-Konstanten betrifft, so wurden diese zur Standardisierung bei der CSS Working Group eingereicht. ( Ursprünglicher Vorschlag, Pull Request für
constant(), Pull Request für sichere Bereichsvariablen)Stimme zu!! Scheint ein Rückschritt zu sein.
Ich stimme vollkommen zu. Ich verstehe nicht, warum schlechtes Design von Apple das Design diktieren sollte. Wenn Fortschritte bei Geräten gemacht werden, passt sich das Web normalerweise an, um diese anzunehmen (responsives Design für eine Vielzahl von Aspekten, bessere Designregeln für hochauflösende kleine Bildschirme usw.).
Aber sich an schlechtes Design anzupassen, um zu kompensieren, auch wenn es manchmal notwendig ist, scheint ein Rückschritt zu sein. Wie Sie sagten, müssen die Leute es sich ansehen und darüber nachdenken, wie es ein Rückschritt ist.
Oder akzeptieren Sie einfach, dass Sie ein Gerät gekauft haben, das eine Linie im Bildschirm hat.
So oder so, es ist nicht unsere Aufgabe, den Ausgleich zu schaffen.
@Peter: Niemand von uns möchte den IE (Problem-Explorer) unterstützen, aber wir müssen es tun, um Benutzer zu erreichen, die IE immer noch verwenden. Ähnlich wie beim iPhone müssen wir Unterstützung anbieten. Das Traurige ist, dass sein unschönes Design nicht lange Bestand haben wird, aber wir müssen dieses Gerät jahrelang entwerfen und entwickeln.
Ich glaube, dass die Browserfenster unserer zukünftigen Kunden nicht nur immer rechteckig sein werden. Neue Bildschirmtechnologien ermöglichen Bildschirme mit unregelmäßigen Formen, und daher glaube ich, dass dies über Apple hinausgeht. Die Veränderung kommt, und wir Entwickler müssen sie annehmen.
viewport-fit=coverscheint meiner Meinung nach ein guter Weg zu sein, dies zu lösen.Ungewöhnlich geformte Bildschirme erfordern nicht zwangsläufig benutzerdefinierte Programmierung. Deshalb ist das hier Mist. Diese Elemente, die beim Scrollen ein- und ausspringen? Mist, hässlich und schrecklich für die Benutzer, unser Publikum.
Und für jede mögliche Bildschirmform und alle möglichen Unterschiede je nach Ausrichtung benutzerdefinierte Codes schreiben zu müssen? Bah, Sie verschwenden Ihre Zeit und Ihr Geld oder das Ihrer Arbeitgeber oder Kunden.
Überlegen Sie, wie unser Code aussehen würde, wenn wir 300 verschiedene Bildschirmtypen codieren müssten?
Generell gibt es bereits ungewöhnliche Bildschirme, und in den nächsten Jahren werden wir sehen, wie weit verbreitet das wird. Aber nur weil Apple es getan hat, werde ich das auf keinen Fall sofort übernehmen. Ich habe das jahrelang immer wieder erlebt.
Und schließlich werden alle sagen, wie großartig Apple wieder ist, wenn es „mutig“ genug ist, zu einem rechteckigen Viewport zurückzukehren. Denn es gibt keinen Weg, wie jemand herausfinden wird, wie eine Kamera durch einen Bildschirm sieht, ohne eine Kerbe, oder? (ha, ich habe schon ein paar Ideen)
Ich sage voraus, keine Frontkameras und Sensoren mit Kerbe. :P Und diese Technologie ist schon ein Jahr alt. (Ich habe vor 10 Jahren transparente Bildschirme gesehen)
http://www.dailymail.co.uk/sciencetech/article-3822108/Panasonic-reveals-invisible-TV-Prototype-OLED-screen-turns-transparent-glass-not-use.html
Ehrlich gesagt: Als Webentwickler ist es unsere Aufgabe, kreativ zu sein, Lösungen für seltsame Verhaltensweisen von Software und Hardware zu finden und allen Benutzern das beste Erlebnis zu bieten.
Ein Gerät, das eindeutig anders und schwer anzupassen ist, aber bald einen riesigen Markt erobern könnte, einfach zu ignorieren, ist eine schlechte Entscheidung. Erinnert mich an Leute (hauptsächlich Blackberry-Benutzer), die dachten, ein Telefon ohne physische Tasten sei Müll. Sehen Sie, wo Sie landen, wenn Sie Dinge ignorieren, nur weil Sie sich ändern müssen?
Natürlich bedeutet es Arbeit, natürlich werden Sie dafür wahrscheinlich nicht bezahlt, aber vielleicht müssen wir dies für verschiedene Geräte implementieren, die Apple bald folgen, und es kann bald einen Standard entwickeln, der solche Probleme aufweist.
Ich nicht.
Apple nutzt die CSS-Standards bestimmungsgemäß; vielleicht sollten Sie deren Blogbeitrag lesen, bevor Sie entscheiden, dass es ein Hack ist: Designing Websites for iPhone X.
Hier ist der Code
Zusammen mit
viewport=fitin<meta>ist das kein großes Problem. Obwohl Apple es so implementiert, ist dies ein CSS-Standard.Das einzige Problem ist, dass das W3C
constantinenvumbenannt hat; bis das iPhone X tatsächlich ausgeliefert wird (Anfang November), werden wir das stattdessen verwenden.Im Vergleich zu all den Schikanen, die wir für die Unterstützung von IE gemacht haben, ist das ein Spaziergang.
Ältere Browser überspringen
@supportsund neuere tun automatisch das Richtige. Das iPhone wird nicht das einzige Gerät sein, das CSS Round Display Level 1 nutzt.Wir sollen doch mobile first und zukunftssicher sein, oder?
Willkommen in der Zukunft. ;-)
@Max
Anstatt unsere Meinungen und Erfahrungen zu debattieren, die variieren werden. Ich schlage ein reales Beispiel für das abgründige Versagen der Kerbe im Bildschirm und die angebliche Idee, mehrere „geformte“ Bildschirmtypen zu unterstützen, vor.
https://www.essential.com/
vs
https://www.apple.com/iphone-x/
Was sind die Abmessungen der Kerbe bei beiden? Wo befindet sie sich? Überträgt das Gerät den Standort der Kerbe an den Browser und CSS?
Nach allem, was ich gelesen habe, teilt Apple der Software nichts über die Kerbe mit. Nur, dass es ein allgemeines Ding namens „sicherer Bereich“ gibt. Was für mich einen Standard-Rechteck-View bedeutet.
Schnellvorlauf 5 Jahre mit 100 verschiedenen Bildschirmtypen und -größen, mehreren Versionen von Apples eigenen Geräten mit unterschiedlichen Kerbengrößen und in Ihrem Code können Sie nicht sagen, auf welchem Bildschirm Sie anzeigen oder wie groß die Kerbe ist. Oder sogar, auf welcher Seite (potenziell) die Kerbe überhaupt liegt.
Ist Kerbe überhaupt eine Kerbe? Was ist, wenn es eine Schräge oder eine Kurve ist, dann was?
Wenn Apple uns zwingt, uns mit dieser seltsamen Form auseinanderzusetzen, sollten wir viel mehr als nur ein „Safe Area“-Meta-Tag bekommen.
Interessant zu sehen, dass auf Apples Homepage derzeit die weißen Balken angezeigt werden https://ibb.co/iejBg5
Wenn man sich also nicht mit
viewport-fit=coverbeschäftigen möchte, würde das das Problem mit der Titelleiste beheben?Natürlich, wenn Sie oben einen Abstand wünschen, benötigen Sie möglicherweise auch
calc().Leider nicht. Wenn Sie
viewport-fit=covernicht verwenden, befindet sich die Oberseite des Webviews (soweit CSS betroffen ist) tatsächlich unterhalb der Kerbe. Das Verschieben von Elementen aus dem Bildschirm verschiebt sie nicht hinter die Kerbe.Ich möchte nur erwähnen, dass, wenn Sie eine Website erstellen und sie in Safari ausführen lassen, Sie keine Probleme mit Elementen mit
position: fixedhaben werden, da die Safari-Adressleiste die Kerbe oben automatisch behandelt. Mein Blogbeitrag näherte sich dem eher aus der Perspektive von Cordova/Phonegap/Ionic/Meteor-Apps, die eine Vollbild-Website verwenden und sich mit der Kerbe auseinandersetzen müssen.@Darryl Pogue
position: fixedist jetzt in iOS 11 kaputt. Mindestens im Querformat funktioniert es anders als in iOS 10 und früher, und jetzt geht der Inhalt auf kleineren Geräten wie dem iPhone 5 hinter die Adressleiste.Ich weigere mich absolut, einen Bildschirmtyp auf einem Gerät zu unterstützen. Dieses Ding ist tot in Bewegung. Warum? Weil es ein weiteres Telefon mit einer Kerbe gibt, und es ist nicht dieselbe verdammte Größe.
Ich habe meine Lektion gelernt, als ich auf iPad-Bildschirme abzielte, und dann festgestellt, dass das Samsung-Tablet nur ein wenig anders war, aber die iPad-Styles funktionierten darauf einfach nicht.
Täusche mich einmal.
Wenn nun ein „großer“ Teil der Geräte diese Art von Dingen erhält, dann wird es Zeit, sich darum zu kümmern. Wenn Sie ein riesiges Team von Entwicklern haben, die nur nach zusätzlicher Arbeit suchen, viel Spaß. Stylen Sie Ihre Kerbe.
Sie haben Recht, wir haben bereits viele Dinge, um die wir uns Sorgen machen müssen. Stellen Sie sich vor, alle Marken hätten seltsame Bildschirmformen und -proportionen. Der iPhone-Browser sollte das kompensieren.
sieht scheiße aus, Mann.
Sie sollten einige Bilder in diesem Artikel haben, es ergibt für mich wirklich wenig Sinn. Haben nicht alle Telefone einen oberen Bereich für Kamera usw., warum ist es auf dem iPhone X so viel umständlicher? Und weiße Balken am Rand, werden diese nicht normalerweise als Ränder bezeichnet, die für das einfachere Lesen der Seite unerlässlich sind?
Dank der Aufnahme von Vojtas Twitter-Post mit seinem Bild wurde die Sache etwas verständlicher.
Nicht alle Telefone haben den Bildschirm über die Sensoren hinaus erweitert. Tatsächlich tun die meisten das nicht, mit wenigen Ausnahmen, aber diese Ausnahmen sind nicht sehr beliebt.
Dieser japanische Artikel enthält die besten visuellen Diagramme zur Darstellung und zum Verständnis des Konzepts des sicheren Bereichs.
Danke! Das gibt mir einige Ideen, die ich auf unserer Website auf dem neuen iPhone ausprobieren kann.
Das erscheint wie eine so umständliche Lösung für dieses „Problem“ – warum können Apple (oder wahrscheinlich Safari / Chrome) dem Browser keinen Abstand hinzufügen, damit der Rand des Browsers außerhalb der Kerbe liegt?
Warum liegt es an jedem Entwickler, sich an diese Browser-Eigenheit anzupassen? Erinnert mich wieder an die IE6-Tage.
Ich habe keine Zahlen, um meine Behauptung zu untermauern, aber ich glaube, die meisten Web-Browsings auf Handys erfolgen im Hochformat und werden nur in die Landschaft gedreht, um die Lesbarkeit bestimmter Absätze zu erhöhen. Ich glaube, es lohnt sich nicht, die Extra-Meile zu gehen, um diesen geringfügigen Anwendungsfall zu berücksichtigen und das Risiko einzugehen, ihn unleserlich zu machen, wenn er nicht vollständig getestet wird.
Ohne den Artikel zu schmälern, werden diese Informationen zweifellos für einige nützlich sein.
Nun, dieses Problem wird im Hochformat immer noch auftreten, es wird nur oben und unten sein.
Eine größere Frage ist: Wer zur Hölle schaut sich eine Webseite im Querformat auf seinem Handy an?
Ich dachte dasselbe, Nathan. Ich kann Ihnen nicht sagen, wann ich das letzte Mal horizontal auf meinem Handy gesurft habe. Es ist einfach keine gute Praxis, da man nicht viel sehen kann. Und wenn ein Webdesigner/Entwickler seine Website responsiv gestaltet, wird sie viel besser aussehen, wenn das Telefon vertikal gehalten wird.
hahaha, ich habe dasselbe gedacht :) Aber trotzdem sollte es angesprochen werden.
Ich kann das nicht mehr hassen...
Es setzt wieder ein Zeichen zwischen Ihnen hier und Ihnen dort.
Je mehr die Erfahrung gleich ist, desto besser ist die Konformität für alle Benutzer auf derselben Website. Das Einzige, was gleich ist, ist der Browser. Warum können wir uns nicht einigen?
Wenn ich politisch wäre, würde ich sagen, es ist ein Schritt, um die Benutzer zu trennen, so wie es die extreme Rechte im wirklichen Leben tut.
Um ehrlich zu sein, surfe ich nie im Querformat im Internet. Außer wenn es ein Video gibt, das sowieso im Vollbildmodus angezeigt wird.
Ich freue mich darauf, meine Zeit darauf zu verwenden, für bestimmte Bildschirmformen zu rendern, anstatt mich auf die Erfahrung für meine Benutzer zu konzentrieren.
Behalten Sie diesen Bereich für das iEllipse im Auge, das Telefon mit einem elliptischen Bildschirm. Stellen Sie sicher, dass nichts Wichtiges außerhalb der mittleren 25% des Bildschirms gerendert wird.
Gefolgt vom Galaxy Donut 9. Wo der Bildschirm ein Loch in der Mitte hat, um Ihren Drink abzustellen. Stellen Sie sicher, dass Ihre Website um einen abgerundeten Rechteck (Er ist nicht ganz ein Kreis) gerendert wird.
Entweder das, oder die Hersteller denken, sie sollten sich an akzeptierte Standards halten oder selbst Lösungen entwickeln, anstatt die Lösungen auf die Entwickler zu verlagern, die die Lücke füllen müssen.
https://www.xkcd.com/1889/
Manchmal sind die besten Kommentare auf xkcd.com im Titelattribut der Bilder. Weiß jemand, wie man sie in einem mobilen Browser aufruft? Es macht mich ein wenig traurig, wenn ich auf meinem Handy einen Link zu xkcd sehe, weil ich weiß, dass mir etwas entgehen wird. : (
Hier ist der Wert des Titelattributs aus dem obigen Link.
hyark.
Chrome für Android, Wenn Sie auf das Bild klicken und es gedrückt halten, erscheint der Alt-Text normalerweise im Kontextmenü.
Davon abgesehen, ändern Sie die Adresse von www. zu m. und beim Klicken auf das Bild wird der Alt-Text in einem anderen Div angezeigt.
Nicht das beste Design von Apple, aber ich kann mich nicht erinnern, wann ich das letzte Mal im Querformat im Internet gesurft habe.
Ich werde auf jeden Fall jeden CSS-Hack meiden, um diesem neuen iPhone gerecht zu werden.
Diese ganze Kerbe ist dumm. Apple verlangt einen Vermögen für seine Geräte und sie können nicht einmal ein besseres Gerät entwerfen. Sie waren so entschlossen, ein Telefon mit Ganzbildschirm zu machen, dass sie dachten: Scheiß auf Designer und Entwickler. Warum nicht einfach eine Kamera, die oben aus dem Telefon herausfährt, wenn Sie Ihre Selfies machen müssen?
Weil sie kein Spielzeug für Spione aus den 1980er Jahren entwerfen...
Es ist nicht unser Problem, wenn Apple beschlossen hat, die mobile Ansicht von Websites zu ruinieren. Das ist ihr Problem und nichts, was wir auch nur versuchen sollten zu beheben. Dies sollte nur auf unserer Seite behoben werden, wenn mehr als 2 % der gesamten Website-Besucher von iPhone X surfen. Wie wir wissen, ist das höchst unwahrscheinlich. Jemals.
Genau. Warum sollten wir uns durch Hürden kämpfen, nur weil sie zu „ivory tower“-mäßig sind, um realistische Designentscheidungen zu treffen? Wenn das Telefon Inhalte nicht gut anzeigt, ist das die Schuld des Telefons (und Apples), nicht unsere.
Hier ist ein Vorschlag, wie man damit umgeht: Nichts tun. Ein Unternehmen hat eine dumme Designentscheidung getroffen und will, dass der Rest der Welt dafür bezahlt? Wann haben Sie das letzte Mal einen Browserhersteller für proprietären Müll wie diesen gelobt und sie kamen damit durch? Wenn Internet Explorer diese Dummheit verlangt hätte, hätten alle ihre Spielsachen weggeworfen, warum also nicht auch hier?
Ich stimme vollkommen zu – wenn wir uns weiterhin an ihre schlechten Entscheidungen anpassen, werden sie damit durchkommen. Wenn (und ich weiß, das ist ein wilder Traum) die Welt sich einfach weigert, sich an die Kerbe anzupassen, dann werden Apple und andere das vielleicht bemerken und es zukünftig berücksichtigen.
Das ist eine wirklich beeindruckende Unsinnigkeit.
Apple trifft katastrophal schlechte Designentscheidungen aus seinem Elfenbeinturm. Als lebenslanger Apple-Nutzer kann ich nicht anders, als über das Wasser zu schauen und zu bemerken, dass Samsung die Grenzen auf schöne, ikonische Weise verschiebt, während Apple sich selbst auf die Schulter klopft und Müll produziert.
Ich weigere mich, um diese Hardware-Fehlfunktion herum zu entwerfen.
Entschuldigen Sie, Apple. Machen Sie nächstes Mal nicht so idiotische und selbstgefällige Entscheidungen.
Ich erwäge ernsthaft, zu (schüttelnd) Android zu wechseln.
Haben Sie keine Angst vor Android. Ich habe kürzlich ein Huawei P10 Lite gekauft und dieses Telefon übertrifft das iPhone in vielerlei Hinsicht. Handwerkskunst, Leistung, Speicher, Akku, Ton, Bildschirm… Sogar der Fingerabdrucksensor ist besser und schneller.
Ohne Steve Jobs lebt Apple von seinem alten Ruhm. Wenn Sie sich an die Geschichte von Apple erinnern, als Steve Jobs nicht CEO war und er sich mit Pixar und Next-Computern beschäftigte, machten sie die gleichen Fehler wie jetzt – viele verschiedene Modelle/Produkte und inkonsistentes Design.
schlechtes, schlechtes, schlechtes Design!
Das erinnert mich daran, wie wir – Webentwickler – versucht haben, Ein-Pixel-Chrome-Ränder auf Android-Browsern zu unterdrücken. Wir haben ein Android-Problem gehackt, und es war letztendlich völlig nutzlos, weil es ein Android-Problem und kein HTML/CSS-Problem war. Arbeit, die wir nie hätten machen sollen.
Es gibt einen großartigen Artikel von Jens Meiert, der erklärt, warum wir so etwas nicht tun sollten: https://meiert.com/en/blog/staying-clear-of-user-agents/
Auf der anderen Seite bin ich mir nicht sicher, ob dies ein ähnliches Problem ist. Ich erfahre erst jetzt davon.
Ich sage, die Entwicklergemeinschaft muss einfach geschlossen auftreten und sagen: „Scheiß drauf“ und sich weigern, Designs zu unterstützen, die dieses Niveau an Blödsinn tolerieren.
Wer macht diesen $h!# aus Produktdesign-Sicht und sagt: „Ja, das reicht, lasst uns einen Hack nur für dieses Gerät erstellen“? Oh, ja, verdammt Apple!!
Ich stimme fast allen Kommentaren dazu zu, dass es schlecht ist, dies mit benutzerdefiniertem Code zu unterstützen (es macht mir nichts aus, den Body-Hintergrund einzustellen – das sollte sowieso getan werden), aber alles, was mehr getan wird, um einem einzelnen Browser auf einem einzelnen Gerät entgegenzukommen, ist etwas, das Webdesigner wie die Pest meiden sollten.
Ich würde gerne sehen, wie UI-Entwickler wichtige Elemente IN die „Notch“-Zone platzieren, anstatt sie zu vermeiden. Vielleicht ein Banner für ein Sonderangebot, das nur wir Plebs sehen können, weil wir uns kein iPhone X leisten können. Oder vielleicht ein spezielles Menü. Ich könnte mir einige kreative Verwendungen für die Notch und eine „reiche Schnösel-Maske“ vorstellen.
Das wäre eine viel schönere Nutzung des Bereichs.
Aber Sie müssten sicherstellen, dass das, was Sie dort platzieren, entweder nicht wichtig genug ist, um es auf anderen Geräten anzuzeigen, oder dass es nicht so „fehl am Platz“ ist, dass es auf anderen Geräten seltsam aussieht.
Vojtas Korrektur scheint nur für den extrem einfachen Inhalt seines Beispiels spezifisch zu sein; ich bezweifle, dass eine solche Korrektur mit den meisten Layout-Elementen gut zusammenarbeitet.
Hätte Steve Jobs dieses Maß an Standardabweichung zugelassen? Was genau ist der Vorteil der Notch für die Benutzer? Ein paar mehr Pixel Ansichtsfenster?
Entwickler dazu zu zwingen, komplexe, hacky Workarounds zu erstellen, nur um seltsame Anzeige-Eigenheiten eines einzelnen Browsers auf einem einzelnen Gerät zu befriedigen, ist meiner Meinung nach keine Innovation. Nicht, dass wir das nicht schon einmal gesehen hätten, aber wow, wir sehen es 2017 wieder, mit einem Flaggschiff-Gerät von Apple?
Der Vorteil für Entwickler ist, dass Website-Besitzer wollen oder verlangen werden, dass ihre Websites mit dem neuen Gerät kompatibel sind, was stundenlange Abrechnung für die Implementierung von Workarounds bedeutet.
Das ist eine amüsante Variante des alten „Es ist ein Feature, kein Bug“-Memes.
Zum Teufel damit. Lassen Sie die Websites einfach, wie sie sind. Kluge Benutzer werden das Telefon beschuldigen. Weniger kluge Benutzer werden weiterhin Apple-Produkte kaufen.
Ich weigere mich, ein schreckliches Gerätedesign zu unterstützen.
Ist es seltsam, dass Apple ein Telefon so gestaltet hat? Ja und Nein. So oder so muss ich trotzdem Websites erstellen. Ich werde um diesen Buckel auf dem Weg herum entwerfen müssen. Aber das ist das Leben eines Webentwicklers. Dinge entwerfen, die keinen Sinn ergeben.
Ich schätze diesen Artikel und den Hinweis. Ich werde dies zu meiner Liste von „Hacks“ hinzufügen :)
Ich denke, ein noch größeres Problem dabei ist das Testen. Chrome wird das neue Design wahrscheinlich nicht zum Inspector hinzufügen und nicht viele Leute verwenden Tools wie Browserstack, also es sei denn, Sie besitzen tatsächlich das X, wird es nur eine Sache des Ratens und Hoffens sein, dass es funktioniert.
Wenn Sie einen Mac haben, können Sie im iPhone Simulator testen, der Teil von Xcode 9 ist, einem kostenlosen Download; wenn Sie ein Apple-Entwicklerkonto haben, können Sie Xcode 9 jetzt herunterladen: https://developer.apple.com/xcode/
Um also eine iOS-App zu entwickeln, benötigen Sie einen Mac, und wissen Sie, wenn Sie möchten, dass eine Website/App auf dem iPhone X gut aussieht, benötigen Sie ebenfalls einen Mac!!! Das ist scheiße!!
Warum verwendet Apple nicht den eigentlichen „Mobile Web App Status Bar Style“, um diese weißen Balken zu ändern und fertig? So
<!-- Chrome, Firefox OS und Opera --><meta name="theme-color" content="#ff0000">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#ff0000">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#ff0000">
Bei den meisten Anwendungen, die ich gesehen habe, verwenden sie eine andere Farbe für die Statusleiste als für den Hintergrund. Sie hätten also immer noch unterschiedlich gefärbte Balken an den Seiten des Bildschirms (obwohl sie hoffentlich besser zu Ihrer Farbpalette passen als Weiß).
Ich weiß nicht, warum so viel Hass?
Ich denke, diese Aussage von @grorg macht es sehr deutlich
Ich denke, Sie stellen dies etwas extrem dar, indem Sie andeuten, dass Hass im Spiel ist. Wut und Ekel? Vielleicht, oder höchstwahrscheinlich Verärgerung und Irritation.
Ich denke, die Antwort ist einfach, Hybris seitens Apple. Sie verhalten sich so, dass sie den Eindruck erwecken, dass alle ihre Entscheidungen „gut“ sind. Erinnern Sie sich an die „mutige“ Behauptung für die Entfernung des Kopfhöreranschlusses? (Ich hoffe, Sie haben diese reine Täuschung nicht einfach geschluckt) Denken Sie nicht, dass dies alle anderen Telefone und Benutzer in irgendeiner Weise beeinflussen wird?
Was wäre Apple's iPhone ohne Apps? Der Browser ist eine davon, für die die meisten Leser dieser Seite Entwickler sind. Dennoch kümmern wir uns um ein offenes Ökosystem. Vielleicht sind Sie noch nicht alt genug, um sich an die entsetzliche Last zu erinnern, die uns im Laufe der Jahre auferlegt wurde, um schreckliche Entscheidungen anderer Unternehmen wie Microsoft zu unterstützen. Das wollen wir nie wieder durchmachen. Jemals. Vor allem jetzt, wo wir die Geschichte haben, die uns sehr deutlich zeigt, welchen Weg wir einschlagen und was wir vermeiden sollten.
Und hier kommt Apple und führt ein brandneues Stück Chaos ein. Der von Ihnen verlinkte Kommentar ist aufschlussreich. Aber wundern Sie sich nicht, warum dieser Kommentar überhaupt benötigt wurde? Und warum wurde dies von Apple von Anfang an nicht offen klargestellt? Warum ist es halbwegs auf einer Kommentarseite eines Beitrags auf GitHub versteckt???
Entschuldigung, falls dies bereits gefragt und beantwortet wurde. Welche Unterstützung werden
constant(),var()undviewport-fit=coverin mobilen Browsern außer Safari haben?constant()– das inenv()umbenannt wurde – wird implementiert, wenn verschiedene Browser die Unterstützung für das CSS Values and Units Module Level 4 einführen.@viewport-fitist bereits Teil von CSS Round Display Level 1, daher ist es eine Frage der Implementierung durch andere Browser.Da Safari der einzige Browser ist, der nativ auf iOS läuft, sind andere mobile Browser irrelevant. Firefox und Chrome für iOS verwenden unter der Haube WebKit, daher unterstützen sie die neuen Funktionen bereits.
Ich vermute, Chrome für Android wird die Unterstützung hinzufügen, wenn oder wann Google ein Gerät herausbringt, das davon profitieren könnte.
Seit wann verwendet Apple IE-Spezifikationen?
Wirklich schlechtes Design von Apple – das muss überarbeitet werden
Ich habe beschlossen, die Debatte darüber zu ignorieren, ob die „Notch“ ein gutes Hardware-Design ist, ob wir gezwungen sein sollten, das iPhone X zu unterstützen, oder ob „jemand“ im Querformat auf seinem Handy surft.
Für mich kam die eigentliche Entscheidung, als ich meine Websites im iPhone X Simulator in Xcode durchsuchte und sah, wie sie im Querformat ohne mein Zutun mit den standardmäßigen „Safe Area“-Randleisten auf jeder Seite aussahen. Es gefiel mir überhaupt nicht, wie sie aussahen.
Also habe ich Apples vorgeschlagene Korrektur implementiert. Es war trivial, dies zu meinen responsiven CSS hinzuzufügen – von Anfang bis Ende hat es wahrscheinlich ein paar Stunden gedauert, meine Vorlagen und CSS zu aktualisieren und dann alles so anzupassen, wie ich es wollte. Ehrlich gesagt, der einzige schmerzhafte Teil war, im Simulator statt auf einem echten Gerät testen zu müssen.
Für mich liegt die Kernbotschaft darin, dass die Implementierung dieser Änderung zu einer besseren Erfahrung für die Besucher meiner Websites führen wird.