よくある原因
iPhoneだけ横スクロールする原因で最も見落とされやすいのが、viewportの`<meta>`タグの設定ミスです。`<meta name="viewport" content="width=device-width, initial-scale=1">` が`<head>`内にない場合、iPhoneはページをデスクトップ幅として描画し、縮小表示してしまいます。縮小表示された結果、ピンチアウトで拡大すると横スクロールが発生したように見えることがあります。
もう一つの見落としポイントは、マージンやパディングの設定です。`margin-left: -20px` のような負のマージンは親要素の外にはみ出すため、`overflow` 設定によっては横スクロールバーが出現します。またflex/gridレイアウトで `gap` を指定しつつ `width: 100%` にすると、gap分だけ幅が計算を超えてはみ出すケースがあります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
チェック①：HTMLの`<head>`に `<meta name="viewport" content="width=device-width, initial-scale=1">` が存在するか確認する。これがない場合、iPhoneでの表示が壊滅的になる可能性があります。AI生成HTMLでは稀に省略されることがあるため、必ずHTMLを開いて検索してください。
チェック②：CSSの中に `width: 100vw` `min-width: [ピクセル値]` `width: [ピクセル値（400以上）]` が含まれていないか検索します。これらが見つかった場合、それぞれ `width: 100%` `max-width: 100%` に変更して再確認します。また `margin` や `padding` に負の値（`-` で始まる値）がある場合は、意図した設計かどうか見直してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
チェック③：iPhoneを使っている相手から「横スクロールする」と報告を受けたら、スクリーンショットと合わせて「iPhoneのSafariで確認しているか、それとも別のブラウザか」を確認します。Chromeなど別ブラウザでは再現せず、Safariだけで発生する場合はiOS Safari固有の挙動（セーフエリア、ダイナミックビューポート高さ等）が原因の可能性があります。
チェック④：複数のiPhoneサイズで横スクロールが発生するか確認してもらいます。SEのような小型（375px幅）のみで発生し、Pro Maxでは問題ない場合は、特定のブレークポイント以下でCSSレイアウトが崩れていることが原因です。「一番小さいiPhoneで見るとどうですか？」と質問すると問題の範囲を素早く特定できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
このチェックリストをGitHubリポジトリの`CONTRIBUTING.md`やプロジェクトのNotionに組み込み、プルリクエスト・デプロイ前の確認事項として明記します。チームで制作する場合は、iPhoneチェックを担当するレビュアーを決めておくと抜け漏れが防げます。
AI生成HTMLを使う場合は、プロンプトに「iOSのSafariで横スクロールが発生しないよう、`width: 100vw`は使わず`width: 100%`を使ってください。`<meta viewport>`タグを必ず含めてください」と指定するだけで、このチェックリストの主要項目をAI側に対処させることができます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
チェックリストをすべて確認したのにiPhoneだけ横スクロールします。他に何が考えられますか？
サードパーティの埋め込みウィジェット（チャット・フォーム・地図等）が横幅を固定しているケースがあります。その要素を一時的にHTMLから削除してみて横スクロールが解消されれば、そのウィジェットにラッパーdivと `overflow: hidden` および `max-width: 100%` を設定してください。
viewportのmetaタグは正しいのに、iPhoneで見るとコンテンツが右に切れています。
テキストに `white-space: nowrap` が設定されていて、長い文字列が折り返されていない可能性があります。または、絶対配置（`position: absolute`）された要素が `right: -50px` のように画面外に配置されているケースも考えられます。DevToolsで問題の要素を探し、`white-space` と `position` のプロパティを確認してください。
iPhoneのSafariだけで発生する横スクロールをMacで再現する方法はありますか？
最も正確な方法はMac SafariとiPhoneをUSBで接続して使うリモートデバッグです。次善策はBrowserStackやLambdaTestのクラウドテスト環境でiOS Safariの実機シミュレーションを使う方法で、Safariのレンダリングエンジンに近い結果が得られます。