【CSS】iPhone画面右にできた微妙な余白

Last updated at 2023-11-07Posted at 2023-02-25

web制作の中で、iPhoneの画面を見ていて詰まったところがあったのでメモ。

iPhone画面の右に余白ができた

chromeのディベロッパーツールにて、iPhone用画面の確認を行なっているが、右に微妙な余白ができていた。
右に引っ張ると若干余白があり、CSSを確認すると、HTMLタグ、bodyタグも余白部分を覆えていなかった。
また、これのせいで、固定ヘッダーが上手く追従してくれなかった。

hoge.html

<body>
 <div class="wrapper"> <!-- wrapperを定義 -->
  <div class="hoge">
  </div>
  ...
 </div>
</body>

hoge.css

.wrapper {
 max-width: 100%
}

上記のように、bodyタグの下にwrapperのタグを作り、無理やり横幅の最大値を100%にすると余白がなくなった。
※尚、html,bodyタグを100%に設定する必要あり。