Probleme im Zusammenhang mit der Anpassung von HTML5-Seiten an iPhoneX

Dieses Mal werde ich Ihnen die Probleme im Zusammenhang mit der Anpassung von HTML5-Seiten an iPhoneX vorstellen. Was sind die Vorsichtsmaßnahmen bei der Anpassung von HTML5-Seiten an iPhoneX? sehen.

1. Einführung in iPhoneX

Bildschirmgröße

Die Vergrößerung ist eigentlich das Verhältnis zwischen der Pixelgröße und der Entwicklungsgröße, aber dies ist 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!“ DPI-Leitfaden maßgeschneidert für Designer“

In diesem Upgrade haben die Bildschirmgröße und Auflösung des iPhone8 die guten Traditionen des iPhone6 ​​und höher geerbt;

Das iPhone hat jedoch die Größe, Auflösung und Sogar die Form hat alle große Veränderungen erfahren. Nehmen wir das iPhone 8 als Referenz, um zu sehen, wie wir die Anpassung des iPhone X betrachten sollten.

2. iPhoneX-Anpassung---sicherer Bereich (sicherer Bereich)

Apples Meinungen zum iPhone Der Inhalt sollte sich im sicheren Bereich befinden, um sicherzustellen, dass er nicht durch die abgerundeten Ecken des Geräts blockiert wird ( Ecken), Sensorgehäuse (Sensorgehäuse, Full Bangs) und die Home-Anzeige unten. Mit anderen Worten: Der Inhalt, den wir für die Anzeige entwerfen, sollte so sicher wie möglich sein. 3. Anpassung von iPhoneX ---Anpassungsschema viewport-fit 3.1 Anpassung von PhoneX, übernommen in iOS 11 Das Meta-Tag von viewport -fit wird als Anpassungslösung verwendet; der Standardwert von viewport-fit ist auto.

viewport-fit-Werte sind wie folgt:

auto Standard: viewprot-fit:contain; Seiteninhalt wird im sicheren Bereich angezeigt

cover viewport-fit: Cover, Seiteninhalt Füllen Sie den Bildschirm

Viewport-Fit-Meta-Tag-Einstellung (beim Covern)

3.2 CSS-Konstanten()-Funktion und Safe-Area-Inset-Top &Safe-Area- inset-left &safe- Einführung in „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: Sicherer-Bereich-Einschub-links, Sicherer-Bereich-Einschub-rechts, Sicherer-Bereich-Einschub-oben und Sicherer-Bereich-Einschub-unten. Bei gemeinsamer Verwendung können Stile auf die Größe des sicheren Bereichs jedes Aspekts verweisen.

<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.1 Wenn wir viewport-fit:contain festlegen, ist dies die Standardzeit für die Parameter „safe-area-inset-left“, „safe-area-inset-right“, „safe-area-inset-top“ und „safe-“. wie etwa „area-inset-bottom“ haben keine Auswirkung.

3.2 Wenn wir viewport-fit:cover festlegen: Die Einstellungen sind wie folgt

4. iPhoneX-Anpassung---Höhenstatistik

viewport-fit:cover + Navigationsleiste

body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px           
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0               
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0               
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px      
}

5. iPhoneX-Anpassung---

Medienabfrage

Beachten Sie, dass die hier verwendete Höhe 690 Pixel (sichere Bereichshöhe) und nicht 812 Pixel beträgt;

6.iphoneX viewport-fit

Problemzusammenfassung

@media only screen and (width: 375px) and (height: 690px){
    body {
        background: blue;
    }
}

1. Wenn die iphoneX-Seite Verlaufsfarben verwendet;

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 Untergeordnetes Element; und die Höhe der Seite beträgt nur 690px. Der padding-top:88px;

body ist auf

1 festgelegt >

2. Verlaufsfarbe

<body><div class="content">this is subElement</div></body>

>

Die Lösung für die Verwendung von Verlaufsfarben, um den gesamten Bildschirm auszufüllen, ist wie folgt:

* {
           padding: 0;
           margin: 0;       
       }       
       body {
           background:green;
           padding-top: constant(safe-area-inset-top); //88px           
           /*padding-left: constant(safe-area-inset-left);*/           
           /*padding-right: constant(safe-area-inset-right);*/           
           /*padding-bottom: constant(safe-area-inset-bottom);*/       
       }

Ich glaube Ihnen Nachdem Sie diese Fälle gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

* {
           padding: 0;
           margin: 0;
       }
       body {
           background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));
           padding-top: constant(safe-area-inset-top); //88px
           /*padding-left: constant(safe-area-inset-left);*/
           /*padding-right: constant(safe-area-inset-right);*/
           /*padding-bottom: constant(safe-area-inset-bottom);*/
       }

Verwandte Lektüre:

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
   <title>Designing Websites for iPhone X: Respecting the safe areas</title>
   <style>        * {
       padding: 0;
       margin: 0;
   }
   html, body {
       height: 100%;
   }
   body {
       padding-top: constant(safe-area-inset-top);
       padding-left: constant(safe-area-inset-left);
       padding-right: constant(safe-area-inset-right);
       padding-bottom: constant(safe-area-inset-bottom);
   }
   .content {
       background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));
       width: 100%;
       height: 724px;
   }    </style>
</head>
<body>
<div class="content">this is subElement</div>
</body>
</html>

So schreiben Sie ein HTML-Eingabe-Dropdown-Menü

Wie Sie mit leeren Leerzeichen oben umgehen und unterhalb des Formulars beim Einfügen eines Formulars. Eine Zeile

Das obige ist der detaillierte Inhalt vonProbleme im Zusammenhang mit der Anpassung von HTML5-Seiten an iPhoneX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!