Correction d'un problème avec le contenu de la barre de navigation débordant vers la droite sur la vue paysage mobile.

Question

J'ai complété ma barre de navigation sur PC et partagé le code sur mon iPhone pour un affichage en mode paysage et portrait. En paysage, la barre de navigation déborde vers la droite. Ajout de la valeur env(safe-area-inset) pour les vues à des fins non bloquantes, mais déborde à droite. Je n'arrive pas à trouver le problème.

iPhone (11 Pro Max) paysage L'espace de gauche est la zone de sécurité env(), mais l'espace de droite est dépassé par la barre de navigation.

下面是代码：

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap");

* {
  dimensionnement de la boîte : bordure-boîte ;
  remplissage : 0 ;
  marge : 0 ;
  style de liste : aucun ;
  décoration de texte : aucune ;
  famille de polices : "Montserrat", sans empattement ;
  alignement du texte : centre ;
}

corps {
  fond : blanc ;
  padding-left : env(safe-area-inset-left);
  padding-right : env(safe-area-inset-right);
  padding-top : env(safe-area-inset-top);
}

.nav-bar {
  affichage : flexible ;
  justifier-contenu : espace entre les deux ;
  remplissage : 0 2rem ;
  hauteur : 50px ;
  aligner les éléments : centre ;
  arrière-plan : #0f0f0f ;
  couleur : #fff ;
  poste : fixe ;
  haut : 0 ;
  largeur : 100 % ;
  indice z : 999 ;
}

.Hamburger {
  affichage : aucun ;
}

.hamburger je {
  Couleur blanche;
  taille de police : 25 px ;
  remplissage : 5px 7px ;
  rayon de bordure : 5 px ;
}

.hamburger i: survoler {
  Couleur blanche;
  arrière-plan : RVB (69, 69, 69) ;
}

.nav-bar .nav-items {
  affichage : flexible ;
  marge supérieure : 4 px ;
  aligner les éléments : centre ;
}

.nav-bar .nav-items li a {
  sélection par l'utilisateur : aucun ;
  poids de la police : gras ;
  bloc de visualisation;
  Couleur blanche;
  taille de police : 20 px ;
  remplissage : 4px 10px ;
  transition : 150 ms ;
  -transition webkit : 150 ms ;
  -moz-transition : 150 ms ;
  marge : 0 10px ;
}

.nav-bar .nav-items li a:après {
  bloc de visualisation;
  contenu: "";
  bordure supérieure : RVB solide 2 px (140, 73, 255 );
  transformation : scaleX(0);
  -webkit-transform : scaleX(0);
  -moz-transform : scaleX(0);
  transition : transformation 150 ms en entrée-sortie facile ;
  -webkit-transition : transformation facile en 150 ms ;
  -moz-transition : transformation facile en 150 ms ;
}

.nav-bar .nav-items li a:hover:after,
.nav-bar .nav-items li a.active:after {
  transformation : scaleX(1);
  -webkit-transform : scaleX(1);
  -moz-transform : scaleX(1);
}

.nav-bar .nav-items li a:hover {
  filtre : luminosité (85 %) ;
  -filtre webkit : luminosité (85 %) ;
}

.nav-bar .login-register {
  affichage : flexible ;
  direction flexible : rangée ;
}

.nav-bar .login-register .button {
  sélection par l'utilisateur : aucun ;
  marge inférieure : 4 px ;
  couleur : #fff ;
  taille de police : 20 px ;
  bordure : 2px RVB solide (116, 36, 255) ;
  remplissage : 4px 20px ;
  rayon de bordure : 4 px ;
  -webkit-border-radius : 4px ;
  -moz-border-radius : 4px ;
  transition : tout est facile en 0,2 s ;
  -webkit-transition : tout est facile en 0,2 s ;
  -moz-transition : tout est facile en 0,2 s ;
}

.nav-bar .login-register .button:hover {
  arrière-plan : RVB (116, 36, 255) ;
}

/*fonctionne bien | vue mobile en petite résolution*/
Écran @media uniquement et (largeur maximale : 850 px) {
  .Hamburger {
    hauteur : automatique ;
    bloc de visualisation;
    curseur : pointeur ;
  }
  .hamburger je {
    largeur : 35 px ;
    hauteur : 35px ;
    arrière-plan : #0f0f0f ;
  }.nav-bar .nav-items {
    direction flexible : colonne ;
    poste : fixe ;
    largeur : 20vw ;
    arrière-plan : #383838 ;
    rembourrage : 1,5rem 0 ;
    hauteur : 280 px ;
    haut : 46px ;
    indice z : 99 ;
    à droite : -100 % ;
    transition : 0,2 s d'entrée en douceur ;
    -webkit-transition : 0,2 s d'installation facile ;
    -moz-transition : 0,2 s d'entrée en douceur ;
  }

  .nav-bar .nav-items li a {
    taille de police : 20 px ;
    remplissage : 0 10px ;
    marge : 10px 0 ;
  }

  .nav-bar .nav-items.active {
    à droite : 0 ;
  }
}</pré>
<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">Accueil</a>
    ≪/li>
    <li>
      <a href="#">Explorer</a>
    ≪/li>
    <li>
      <a href="#">Boutique</a>
    ≪/li>
    <li>
      <a href="#">À propos</a>
    ≪/li>
    <div class="login-register">
      <a href="#" class="bouton">Connexion</a>
    </div>
  </ul>
</barre de navigation>

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

Answer 1

J'ai essayé votre code et la barre latérale n'apparaît pas

Si vous utilisez un serveur en direct, je vous recommande d'actualiser la page plusieurs fois

Answer 2

J'ai finalement trouvé le problème avec le débordement de la barre de navigation, il devrait s'agir d'une valeur position : Sticky dans la barre .nav.