モバイルの横向き表示でナビゲーション バーのコンテンツが右側にはみ出す問題を修正しました。
<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>これらすべての都市は、ナビゲーション内のコンテンツの移動やサイズ制限を引き起こします。
