<p> Melengkapkan bar navigasi saya pada PC dan berkongsi kod ke iPhone saya untuk tontonan landskap dan potret. Dalam landskap, bar navigasi melimpah ke kanan. Menambahkan nilai <em>env(sisipan-kawasan-selamat)</em> Nampaknya tidak dapat mencari masalah. </p> <p>iPhone (11 Pro Max) landskap Jurang kiri ialah kawasan selamat env(), tetapi jurang kawasan selamat yang betul dilimpahi oleh bar navigasi.</p> <p>下面是代码：</p> <p> <pre class="brush:css;toolbar:false;">@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap"); * { saiz kotak: kotak sempadan; padding: 0; margin: 0; gaya senarai: tiada; hiasan teks: tiada; font-family: "Montserrat", sans-serif; text-align: tengah; } badan { latar belakang: putih; padding-left: env(area-safe-inset-left); padding-right: env(safe-area-inset-right); padding-top: env(safe-area-inset-top); } .nav-bar { paparan: flex; justify-content: ruang-antara; pelapik: 0 2rem; ketinggian: 50px; align-item: tengah; latar belakang: #0f0f0f; warna: #fff; kedudukan: tetap; atas: 0; lebar: 100%; indeks z: 999; } .hamburger { paparan: tiada; } .hamburger i { warna: putih; saiz fon: 25px; padding: 5px 7px; jejari sempadan: 5px; } .hamburger i:hover { warna: putih; latar belakang: rgb(69, 69, 69); } .nav-bar .nav-item { paparan: flex; jidar atas: 4px; align-item: tengah; } .nav-bar .nav-item li a { pengguna-pilih: tiada; font-weight: tebal; paparan: blok; warna: putih; saiz fon: 20px; padding: 4px 10px; peralihan: 150ms; -webkit-peralihan: 150ms; -moz-transition: 150ms; jidar: 0 10px; } .nav-bar .nav-item li a:selepas { paparan: blok; kandungan: ""; atas sempadan: 2px pepejal rgb(140, 73, 255); transform: skalaX(0); -webkit-transform: scaleX(0); -moz-transform: scaleX(0); peralihan: mengubah 150ms mudah masuk; -webkit-transition: mengubah 150ms mudah masuk-keluar; -moz-transition: mengubah 150ms mudah-masuk-keluar; } .nav-bar .nav-item li a:hover:after, .nav-bar .nav-item li a.active:after { transform: skalaX(1); -webkit-transform: scaleX(1); -moz-transform: skalaX(1); } .nav-bar .nav-item li a:hover { penapis: kecerahan (85%); -penapis webkit: kecerahan(85%); } .nav-bar .login-register { paparan: flex; flex-direction: baris; } .nav-bar .login-register .button { pengguna-pilih: tiada; jidar bawah: 4px; warna: #fff; saiz fon: 20px; sempadan: 2px pepejal rgb(116, 36, 255); padding: 4px 20px; jejari sempadan: 4px; -webkit-border-radius: 4px; -jejari-sempadan-moz: 4px; peralihan: semua kemudahan masuk 0.2s; -webkit-transition: semua kemudahan dalam 0.2s; -moz-transition: semua kemudahan dalam 0.2s; } .nav-bar .login-register .button:hover { latar belakang: rgb(116, 36, 255); } /*berfungsi dengan baik | paparan mudah alih resolusi kecil*/ @media sahaja skrin dan (lebar maksimum: 850px) { .hamburger { ketinggian: auto; paparan: blok; kursor: penunjuk; } .hamburger i { lebar: 35px; ketinggian: 35px; latar belakang: #0f0f0f; }.nav-bar .nav-item { flex-direction: lajur; kedudukan: tetap; lebar: 20vw; latar belakang: #383838; pelapik: 1.5rem 0; ketinggian: 280px; atas: 46px; indeks z: 99; kanan: -100%; peralihan: 0.2s mudah masuk; -webkit-transition: 0.2s kemudahan masuk; -moz-transition: 0.2s kemudahan masuk; } .nav-bar .nav-item li a { saiz fon: 20px; padding: 0 10px; jidar: 10px 0; } .nav-bar .nav-items.active { kanan: 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'">LOGO UJIAN</div> <div class="hamburger" for="check"> <i class="fa-solid fa-bars"></i> </div> <ul class="nav-item"> <li> <a href="#" class="active">Rumah</a> </li> <li> <a href="#">Teroka</a> </li> <li> <a href="#">Beli</a> </li> <li> <a href="#">Mengenai</a> </li> <div class="login-register"> <a href="#" class="button">Log masuk</a> </div> </ul> </navbar></pre> </p> <p>我和一个朋友尝试了不同的更改，例如 <strong>ma​​rgin-padding、align-items、list-style、overflow、th/max/-strong 属性。所有这些都会导致导航栏中的内容发生位移或尺寸错误。</p>