Es wurde ein Problem behoben, bei dem der Inhalt der Navigationsleiste in der mobilen Querformatansicht nach rechts überlief.

Question

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. env(safe-area-inset)-Wert für nicht blockierende Zweckansichten hinzugefügt, läuft aber rechts über. Kann das Problem scheinbar nicht finden.

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.

下面是代码：

@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;
  }
}

<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>

属性.所有这些都会导致导航栏中的内容发生位移或尺寸错误.

Answer 1

我尝试了你的代码，没有出现侧边栏

如果您使用的是实时服务器，我建议您多次刷新页面

Answer 2

我终于发现了导航栏溢出的问题，它应该是 .nav-bar 中的一个 position: Sticky 值。