<p> PC でナビゲーション バーを完成させ、横向きと縦向きに表示できるようにコードを iPhone に共有しました。横向きでは、ナビゲーション バーが右側にはみ出します。非ブロッキング目的のビューに <em>env(safe-area-inset)</em> 値を追加しましたが、右側でオーバーフローします。問題が見つからないようです。 </p> <p>iPhone (11 Pro Max) 横向き 左側のギャップは安全領域 env() ですが、右側の安全領域のギャップはナビゲーション バーによってオーバーフローされます。</p> <p>次は代価：</p> <p> <pre class="brush:css;toolbar:false;">@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap"); * { ボックスのサイズ設定: ボーダーボックス; パディング: 0; マージン: 0; リストスタイル: なし; テキスト装飾: なし。 フォントファミリー: "モンセラート"、サンセリフ; テキスト整列: 中央; } 体 { 背景: 白; パディング左: env(セーフエリアインセット左); パディング右: env(セーフエリアインセット右); パディングトップ: env(セーフエリアインセットトップ); } .nav-bar { ディスプレイ: フレックス; コンテンツの位置揃え: 間のスペース; パディング: 0 2rem; 高さ: 50ピクセル; 整列項目: 中央; 背景: #0f0f0f; 色: #fff; 位置: 固定; トップ: 0; 幅: 100%; z インデックス: 999; } 。ハンバーガー { 表示: なし。 } .ハンバーガー私 { 色: 白; フォントサイズ: 25px; パディング: 5px 7px; 境界半径: 5px; } .hamburger i:hover { 色: 白; 背景: rgb(69, 69, 69); } .nav-bar .nav-items { ディスプレイ: フレックス; マージントップ: 4px; 整列項目: 中央; } .nav-bar .nav-items li a { ユーザー選択: なし。 フォントの太さ: 太字; 表示ブロック; 色: 白; フォントサイズ: 20px; パディング: 4px 10px; トランジション: 150ms; -webkit-transition: 150ms; -moz-transition: 150ms; マージン: 0 10px; } .nav-bar .nav-items li a:after { 表示ブロック; コンテンツ： ""; ボーダートップ: 2px ソリッド rgb(140, 73, 255); 変換: スケールX(0); -webkit-transform:scaleX(0); -moz-transform: スケールX(0); トランジション: 変換 150ms イーズインアウト。 -webkit-transition: 150ms のイーズインアウトを変換します。 -moz-transition: 150 ミリ秒のイーズインアウトを変換します。 } .nav-bar .nav-items li a:hover:after、 .nav-bar .nav-items li a.active:after { 変換: スケールX(1); -webkit-transform:scaleX(1); -moz-transform: スケールX(1); } .nav-bar .nav-items li a:hover { フィルター: 明るさ(85%); -webkit-filter: 明るさ(85%); } .nav-bar .login-register { ディスプレイ: フレックス; フレックス方向: 行; } .nav-bar .login-register .button { ユーザー選択: なし。 マージン-ボトム: 4px; 色: #fff; フォントサイズ: 20px; ボーダー: 2px ソリッド rgb(116, 36, 255); パディング: 4px 20px; 境界半径: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; トランジション: すべてイーズイン 0.2 秒。 -webkit-transition: すべて 0.2 秒でイーズイン。 -moz-transition: すべて 0.2 秒でイーズイン。 } .nav-bar .login-register .button:hover { 背景: rgb(116, 36, 255); } /* 正常に動作します |低解像度のモバイルビュー*/ @media のみの画面と (最大幅: 850px) { 。ハンバーガー { 高さ: 自動; 表示ブロック; カーソル: ポインタ; } .ハンバーガー私 { 幅: 35ピクセル; 高さ: 35ピクセル; 背景: #0f0f0f; } .nav-bar .nav-items { フレックス方向: 列; 位置: 固定; 幅: 20vw; 背景: #383838; パディング: 1.5rem 0; 高さ: 280ピクセル; 上: 46ピクセル; z インデックス: 99; 右: -100%。 トランジション: 0.2 秒のイーズイン。 -webkit-transition: 0.2 秒イーズイン; -moz-transition: 0.2 秒のイーズイン。 } .nav-bar .nav-items li a { フォントサイズ: 20px; パディング: 0 10px; マージン: 10px 0; } .nav-bar .nav-items.active { 右: 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"> <ナビゲーションバークラス="ナビゲーションバー"> <div class="logo" onclick="window.location.href='Home.html'">テストロゴ</div> <div class="ハンバーガー" for="チェック"> <i class="fa-solid fa-bars"></i> </div> <ul class="nav-items">

; <a href="#" class="active">ホーム</a> </li>

; <a href="#">詳しく見る</a> </li>

; <a href="#">ショップ</a> </li>

; <a href="#">概要</a> </li> <div class="ログイン登録"> <a href="#" class="button">ログイン</a> </div> </ul> </navbar></pre> </p> <p>私と友人一名は、さまざまな変更を加えました。たとえば、<strong>ma rgin-padding、align-items、list-style、overflow、display、width/max-width</strong>これらすべての都市は、ナビゲーション内のコンテンツの移動やサイズ制限を引き起こします。