<p> Ich habe meine Navigationsleiste auf dem PC vervollständigt und den Code für die Anzeige im Quer- und Hochformat auf meinem iPhone geteilt. Im Querformat läuft die Navigationsleiste nach rechts über. <em>env(safe-area-inset)</em>-Wert für nicht blockierende Zweckansichten hinzugefügt, läuft aber rechts über. Kann das Problem scheinbar nicht finden. </p> <p>iPhone (11 Pro Max) Querformat Die linke Lücke ist der sichere Bereich env(), aber die rechte Lücke im sicheren Bereich wird von der Navigationsleiste überfüllt.</p> <p>下面是代码：</p> <p> <pre class="brush:css;toolbar:false;">@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap"); * { Boxgröße: border-box; Polsterung: 0; Rand: 0; Listenstil: keiner; Textdekoration: keine; Schriftfamilie: „Montserrat“, serifenlos; Textausrichtung: Mitte; } Körper { Hintergrund: weiß; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-top: env(safe-area-inset-top); } .nav-bar { Anzeige: Flex; justify-content: Leerzeichen dazwischen; Polsterung: 0 2rem; Höhe: 50px; align-items: center; Hintergrund: #0f0f0f; Farbe: #fff; Position: fest; oben: 0; Breite: 100 %; Z-Index: 999; } .Hamburger { Anzeige: keine; } .hamburger i { Farbe weiß; Schriftgröße: 25px; Polsterung: 5px 7px; Randradius: 5px; } .hamburger i:hover { Farbe weiß; Hintergrund: rgb(69, 69, 69); } .nav-bar .nav-items { Anzeige: Flex; Rand oben: 4px; align-items: center; } .nav-bar .nav-items li a { Benutzerauswahl: keine; Schriftdicke: fett; Bildschirmsperre; Farbe weiß; Schriftgröße: 20px; Polsterung: 4px 10px; Übergang: 150ms; -Webkit-Übergang: 150 ms; -moz-Übergang: 150 ms; Rand: 0 10px; } .nav-bar .nav-items li a:after { Bildschirmsperre; Inhalt: ""; border-top: 2px solid rgb(140, 73, 255); transform: scaleX(0); -webkit-transform: scaleX(0); -moz-transform: scaleX(0); Übergang: Transformation 150 ms Ease-in-out; -webkit-transition: 150 ms Easy-In-Out transformieren; -moz-transition: 150 ms Ease-In-Out transformieren; } .nav-bar .nav-items li a:hover:after, .nav-bar .nav-items li a.active:after { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); } .nav-bar .nav-items li a:hover { Filter: Helligkeit (85 %); -Webkit-Filter: Helligkeit (85 %); } .nav-bar .login-register { Anzeige: Flex; Flexrichtung: Reihe; } .nav-bar .login-register .button { Benutzerauswahl: keine; Rand unten: 4px; Farbe: #fff; Schriftgröße: 20px; Rand: 2 Pixel einfarbiges RGB (116, 36, 255); Polsterung: 4px 20px; Randradius: 4px; -webkit-Grenzradius: 4px; -moz-border-radius: 4px; Übergang: alle Ease in 0,2 s; -webkit-transition: alle Ease-in 0,2 s; -moz-transition: alle Ease-in 0,2 s; } .nav-bar .login-register .button:hover { Hintergrund: RGB(116, 36, 255); } /*funktioniert einwandfrei | kleine Auflösung für Mobilgeräte*/ Nur @media-Bildschirm und (maximale Breite: 850 Pixel) { .Hamburger { Höhe: automatisch; Bildschirmsperre; Cursor: Zeiger; } .hamburger i { Breite: 35px; Höhe: 35px; Hintergrund: #0f0f0f; }.nav-bar .nav-items { Flexrichtung: Spalte; Position: fest; Breite: 20vw; Hintergrund: #383838; Polsterung: 1,5rem 0; Höhe: 280px; oben: 46px; Z-Index: 99; rechts: -100 %; Übergang: 0,2 s Einschwingzeit; -webkit-transition: 0,2 Sekunden Einlaufzeit; -moz-transition: 0,2 s Einlaufzeit; } .nav-bar .nav-items li a { Schriftgröße: 20px; Polsterung: 0 10px; Rand: 10px 0; } .nav-bar .nav-items.active { rechts: 0; } }</pre> <pre class="brush:html;toolbar:false;"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/ css/all.min.css"> <navbar class="nav-bar"> <div class="logo" onclick="window.location.href='Home.html'">TEST-LOGO</div> <div class="hamburger" for="check"> <i class="fa-solid fa-bars"></i> </div> <ul class="nav-items"> <li> <a href="#" class="active">Home</a> </li> <li> <a href="#">Erkunden</a> </li> <li> <a href="#">Shop</a> </li> <li> <a href="#">Über</a> </li> <div class="login-register"> <a href="#" class="button">Anmelden</a> </div> </ul> </navbar></pre> </p> <p> 属性.所有这些都会导致导航栏中的内容发生位移或尺寸错误.</p>