iPhoneSE（375px）で横ずれが発生した場合の対処

ほとんど備忘録的ですが、ドロワーメニューが開いた時にアンドロイド端末では大丈夫なのに、iPhoneSE（画面幅375px）で左右余白ができて横ずれが発生するという不具合が発生しました。

以下のようの対処で解消しました。

ビューポート

■html

<div class="drawer__nav-wrapper">
<div class="p-cta__header-nav">
<ul class="p-cta__header-nav-list">		　
<li>
******リスト*****		
</li>
</ul>
</div>
</div>

■css

.drawer__nav-wrapper {
  width: 100vw; // ← これが原因の1つ
}

vw は スクロールバーの幅も含めたビューポート幅を基準にするため、iOSでは「画面幅＋α」になり、はみ出し＝横スクロールが発生します。

■css修正

.drawer__nav-wrapper {
  width: 100%;
}

内部コンテンツの幅

■css

.p-cta__header-nav {
  width: 374px;
  padding-inline: 4.8%;
}

これにより 4.8% × 2 の 左右パディング（約36px） と固定幅 374px を足すと、374px + 36px = 410px となりiPhone SE（375px）の横幅から溢れます。

■css修正

.p-cta__header-nav {
  width: 100%;
  max-width: 374px;
  padding-inline: 4.8%;
}

これで 左右のパディングと内容全体を合わせてもビューポートからはみ出さなくなります。