【レスポンシブ対応】スマホでピンチインすると、右側に余白が生じるのを解消したいです。

Question

解決したいことは表題のままなのですが、解決策をご教示いただけないでしょうか。
宜しくお願いします。

【行っていること】
htmlでheadに<meta name="viewport" content="width=device-width, initial-scale=1.0">を記載しています。
cssでbodyに「overflow:hidden;　width:100%」は設定しています。

※因みにgoogleデベロッパツール@pcではマウスでの操作になりますが、
右側に余白が生まれることはありません。
※スマホで実機(iPhoneXs)確認するときは、ブラウザキャッシュ削除してから確認しています。

Comments

[makosankibu]

余白とは、具体的に何の余白でしょうか
検証できるコードが欲しいです。
また、safe-areaは関係ないですか？(iphoneX等の下のホームボタンがない端末に定義されている)
↓参考リンク
https://qiita.com/gentlejkov/items/a626263d452939378b07

[Yuji17]

ご回答いただき、ありがとうございます！
こちら自己解決できておりました。後述しておきます。
safe-areaについて勉強になりました。

[makosankibu]

承知致しました。

Answer 1

全体に対してではなく、スマホ用のメディアクエリ内のhtmlとbodyに対して、「overflow: hidden;」で解決しました。