Bildschirmgröße
Die uns bekannte Zusammenfassung der Entwicklungsdimensionen der iPhone-Serie lautet wie folgt:
△Entwicklungsgröße jedes iPhone-ModellsKonvertieren Sie in die bekannte Pixelgröße:
△Mehrdimensionale Dimensionen jedes ModellsDie Vergrößerungskarte ist eigentlich das Vergrößerungsverhältnis zwischen der Pixelgröße und der Entwicklungsgröße, dies ist jedoch nur eine äußere Erscheinung. Der wichtigste Einflussfaktor der Vergrößerung ist PPI (DPI). Das Verständnis der Beziehung zwischen Bildschirmdichte und verschiedenen Größen wird uns helfen, das Konzept der Vergrößerung tiefgreifend zu verstehen: „Lernen Sie die Grundlagen!“ Maßgeschneiderter DPI-Leitfaden für Designer》
Bei diesem Upgrade haben die Bildschirmgröße und Auflösung des iPhone8 die guten Traditionen des iPhone6 und neuer übernommen;
Allerdings hat das iPhone
Werfen wir einen Blick auf die Änderungen in der Größe des iPhone X:
2. iPhoneX-Anpassung --- sicherer Bereich (sicherer Bereich)Apples Meinungen zum Design-Layout des iPhone X sind wie folgt:
Der Kerninhalt sollte sich im sicheren Bereich befinden, um sicherzustellen, dass er nicht durch die abgerundeten Ecken (Ecken), das Sensorgehäuse (Sensorgehäuse, Full Bangs) und die Home-Anzeige unten verdeckt wird. Mit anderen Worten: Der Inhalt, den wir zur Anzeige entwerfen, sollte so weit wie möglich im sicheren Bereich liegen;
3. Anpassung von iPhoneX ---Anpassungsschema viewport-fit 3.1 Anpassung von PhoneX, das Meta-Tag von viewport-fit wird als Anpassungsschema in iOS 11 verwendet, der Standardwert von viewport-fit ist auto.Der Wert von viewport-fit ist wie folgt:
| Auto | Standard: viewprot-fit:contain; Seiteninhalt wird im sicheren Bereich angezeigt |
| Abdeckung | viewport-fit:cover, der Seiteninhalt füllt den Bildschirm aus |
Viewport-Fit-Meta-Tag-Einstellung (beim Abdecken)
<meta name=viewport content=width=device-width,initial-scale=1.0, Minimum-scale=1.0, Maximum-scale=1.0, user-scalable=no, viewport-fit=cover>
3.2 Einführung in die CSS-Funktion „constant()“ und den Safe-Area-Inset-Top & Safe-Area-Inset-Left & Safe-Area-Inset-Right & Safe-Area-Inset-Bottom
Wie oben gezeigt, enthält WebKit in iOS 11 eine neue CSS-Funktion „constant()“ und einen Satz von vier vordefinierten Konstanten: „safe-area-inset-left“, „safe-area-inset-right“, „safe-area-inset-top“ und „safe“. -area-inset-bottom. Wenn sie miteinander kombiniert werden, können Stile die Größe des sicheren Bereichs jedes Aspekts referenzieren.
3.1 Wenn wir viewport-fit:contain festlegen, ist dies die Standardzeit; legen Sie den sicheren Bereich-Einschub links, den sicheren Bereich-Einschub rechts, den sicheren Bereich-Einschub oben und den sicheren Bereich-Einschub unten usw. fest . Parameter haben keine Auswirkung.
3.2 Wenn wir viewport-fit:cover: festlegen, sind die Einstellungen wie folgt
body { padding-top: konstant(safe-area-inset-top); //Die Höhe der Navigationsleiste + Statusleiste beträgt 88px padding-left: konstant(safe-area-inset-left); //Wenn der Bildschirm ist nicht vertikal Ist 0 padding-right: konstant(safe-area-inset-right); //Wenn der Bildschirm nicht vertikal ist, ist er 0 padding-bottom: konstant(safe-area-inset-bottom);//Die Höhe des unteren Bogens beträgt 34px } 4. iPhoneX-Anpassung --- Höhenstatistikviewport-fit:cover + Navigationsleiste
5. iPhoneX-Anpassung – MedienabfrageBeachten Sie, dass hier 690 Pixel (sichere Bereichshöhe) verwendet werden, nicht 812 Pixel.
@media only screen and (width: 375px) and (height: 690px){ body { background: blue }} 6. iPhoneX-Viewport-fit Problemzusammenfassung1. Wenn die iphoneX-Seite Verlaufsfarben verwendet; if viewport-fit:cover;
1.1 Der Unterschied zwischen einer einzelnen Farbe und einer Verlaufsfarbe wird festgelegt, wenn die Hintergrundfarbe festgelegt wird. Wenn es sich um eine einzelne Farbe handelt, füllt sie den gesamten Bildschirm aus. Wenn eine Verlaufsfarbe festgelegt ist, wird sie nur in der Höhe gerendert das untergeordnete Element und die Höhe der Seite beträgt nur 690px. Verwenden Sie das obige padding-top:88px;
Der Körper ist befestigt an:
<body><div class=content>das ist subElement</div></body>
1. Bei Monochrom:
* { padding: 0; margin: 0; } body { background:green; padding-top: konstant(safe-area-inset-top); );*/ /*padding-right: konstant(safe-area-inset-right);*/ /*padding-bottom: konstant(safe-area-inset-bottom);*/ }2. Farbverlauf
* { padding: 0; margin: 0; } body { background:-webkit-gradient(linear, 0 0, 0 unten, from(#ffd54f), to(#ffaa22)); -inset-top); //88px /*padding-left: konstant(safe-area-inset-left);*/ /*padding-right: konstant(safe-area-inset-right);*/ /*padding-bottom: konstant(safe-area-inset-bottom);*/ }So lösen Sie das Problem, dass die Verlaufsfarbe weiterhin den gesamten Bildschirm ausfüllt. Die CSS-Einstellungen lauten wie folgt
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1, viewport-fit=cover> <title>Websites für iPhone X entwerfen: Respekt vor sicheren Bereichen</title> <style> * { padding: 0; margin: 0; html, body { height: 100 % } body { padding-top: konstant(safe-area-inset-top); Constant(Safe-Area-Inset-Left); Padding-Right: Constant(Safe-Area-Inset-Right); Padding-Bottom: Constant(Safe-Area-Inset-Bottom); Farbverlauf (linear, 0 0, 0 unten, von (#ffd54f), bis (#ffaa22)); </style></head><body><div class=content>das ist subElement</div></body></html>2. Das Seitenelement verwendet eine feste Positionierungsanpassung: {position:fixed;}
2.1 Wenn die untergeordnete Elementseite unten fixiert ist, können Sie bei Verwendung von viewport-fit:contain sehen, dass sie nur im sicheren Bereich angezeigt wird.
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1> <!--<meta name=viewport content=initial-scale=1, viewport-fit=cover>--> <title>Entwerfen von Websites für das iPhone X: Respektieren der sicheren Bereiche</title> <style> * { padding: 0; 0; 100 %;*/ /*}*/ body { background: grey; /*padding-top: konstant(safe-area-inset-top);*/ /*padding-left: konstant(safe-area-inset-left );*/ /*padding-right: konstant(safe-area-inset-right);*/ /*padding-bottom: konstant(safe-area-inset-bottom);*/ } .top { width: 100 %; Höhe: lila; .bottom { Position: links: 0; Farbe: schwarz; head><body> <div class=top>das ist oben</div> <div class=bottom>das ist unten</div></body></html>2.1 Wenn die untergeordnete Elementseite unten fixiert ist, können Sie bei Verwendung von viewport-fit:cover sehen, dass „bottom:0“ nur im sicheren Bereich angezeigt wird.
Fügen Sie html,body {width:100%;heigth:100%} hinzu
Abbildung 1:
* { padding: 0; margin: 0; html,body { height: 100 % } body { background: grey; Bereichseinschub-rechts); Breite: 100 %; Hintergrund: lila;Abbildung 2:
* { padding: 0; margin: 0; html,body { height: 100 % } body { background: grey; Bereichseinschub-links); padding-right: konstant(sicherer-bereich-einschub-rechts); /*padding-bottom: konstant(sicherer-bereich-einschub-unten);*/ } .top { Breite: 44 Pixel; Hintergrund: Lila;2.3 Lösung für die Popup-Maskenebene „alertView“.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <!--<meta name=viewport content=width=device-width, initial-scale=1.0, Minimum-scale=1.0 , Maximum-Scale=1.0, User-Scalable=Nein>--> <meta name=viewport content=width=device-width,initial-scale=1.0, Minimum-scale=1.0, Maximum-scale=1.0, user-scalable=no, viewport-fit=cover> <meta http-equiv=pragma content=no-cache > <meta http-equiv=cache-control content=no-cache> <meta http-equiv=expires content=0> <title>alertView</title> <script data-res=eebbk> document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px' </script> <style> * { margin: 0; padding: 0; 100 %; Höhe: 100 %; Constant(Safe-Area-Inset-Top); Padding-Left: Constant(Safe-Area-Inset-Left); Padding-Right: Constant(Safe-Area-Inset-Right); -inset-bottom); .content { text-align: center } .testBut { margin: 50px width: 44px; 1px einfarbig dunkelgrau; Umriss: keine; Hintergrundfarbe: gelb } </style> <link href=alertView.css rel=stylesheet type=text/css></head><body> class=content> <button class=testBut onclick=showLoading()>Popup wird geladen</button> </section> <script type=text/javascript src=alertView.js></script> <script> function showLoading() { UIAlertView.show({ type:input, title: Warme Erinnerung, //Titelinhalt: VIP-Mitgliedschaft läuft bald ab, //Neues isKnow erhalten: false }); var xx = new UIAlertView(); console.log(xx); </script></body></html> ZusammenfassenDas Obige stellt Ihnen der Herausgeber über die Anpassung von HTML5-Seiten an iPhoneX vor. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!