<p> Completed my navigation bar on PC and shared the code to my iPhone for landscape and portrait viewing. In landscape, the navigation bar overflows to the right. Added <em>env(safe-area-inset)</em> value for non-blocking purpose views, but overflows on the right. Can't seem to find the problem. </p> <p>iPhone (11 Pro Max) landscape The left gap is the safe area env(), but the right safe area gap is overflowed by the navigation bar.</p> <p>下面是代码：</p> <p> <pre class="brush:css;toolbar:false;">@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap"); * { box-sizing: border-box; padding: 0; margin: 0; list-style: none; text-decoration: none; font-family: "Montserrat", sans-serif; text-align: center; } body { background: white; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-top: env(safe-area-inset-top); } .nav-bar { display: flex; justify-content: space-between; padding: 0 2rem; height: 50px; align-items: center; background: #0f0f0f; color: #fff; position: fixed; top: 0; width: 100%; z-index: 999; } .hamburger { display: none; } .hamburger i { color: white; font-size: 25px; padding: 5px 7px; border-radius: 5px; } .hamburger i:hover { color: white; background: rgb(69, 69, 69); } .nav-bar .nav-items { display: flex; margin-top: 4px; align-items: center; } .nav-bar .nav-items li a { user-select: none; font-weight: bold; display: block; color: white; font-size: 20px; padding: 4px 10px; transition: 150ms; -webkit-transition: 150ms; -moz-transition: 150ms; margin: 0 10px; } .nav-bar .nav-items li a:after { display: block; content: ""; border-top: 2px solid rgb(140, 73, 255); transform: scaleX(0); -webkit-transform: scaleX(0); -moz-transform: scaleX(0); transition: transform 150ms ease-in-out; -webkit-transition: transform 150ms ease-in-out; -moz-transition: transform 150ms ease-in-out; } .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: brightness(85%); -webkit-filter: brightness(85%); } .nav-bar .login-register { display: flex; flex-direction: row; } .nav-bar .login-register .button { user-select: none; margin-bottom: 4px; color: #fff; font-size: 20px; border: 2px solid rgb(116, 36, 255); padding: 4px 20px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; transition: all ease-in 0.2s; -webkit-transition: all ease-in 0.2s; -moz-transition: all ease-in 0.2s; } .nav-bar .login-register .button:hover { background: rgb(116, 36, 255); } /*works fine | small res mobile view*/ @media only screen and (max-width: 850px) { .hamburger { height: auto; display: block; cursor: pointer; } .hamburger i { width: 35px; height: 35px; background: #0f0f0f; } .nav-bar .nav-items { flex-direction: column; position: fixed; width: 20vw; background: #383838; padding: 1.5rem 0; height: 280px; top: 46px; z-index: 99; right: -100%; transition: 0.2s ease-in; -webkit-transition: 0.2s ease-in; -moz-transition: 0.2s ease-in; } .nav-bar .nav-items li a { font-size: 20px; padding: 0 10px; margin: 10px 0; } .nav-bar .nav-items.active { right: 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="#">Explore</a> </li> <li> <a href="#">Shop</a> </li> <li> <a href="#">About</a> </li> <div class="login-register"> <a href="#" class="button">Login</a> </div> </ul> </navbar></pre> </p> <p>我和一个朋友尝试了不同的更改，例如 <strong>ma​​rgin-padding、align-items、list-style、overflow、display、width/max-width</strong> 属性。所有这些都会导致导航栏中的内容发生位移或尺寸错误。</p>