PCのlocalhostをiPhone(スマホ)実機で確認してiOSだけのCSS崩れをデバッグする

iOS（Safari）のみで発生するCSS崩れは、PCブラウザの開発者ツールだけでは再現できない場合が多くございます。
本記事では、Mac上のローカル開発環境（localhost）にiPhone実機からアクセスして表示を確認し、さらにSafariのリモートデバッグ機能を用いて原因を特定するまでの手順を整理してご紹介いたします。

本記事で行うこと

・iPhone（実機）からMacのローカル開発サーバへアクセスいたします
・SafariのリモートWebインスペクタにて、以下を確認しCSS崩れの原因を切り分けます
　・Styles / Computed（最終的に適用されているCSS）
　・Network（CSSが正しく読み込まれているか）
　・Console（JavaScriptのエラー）

前提

・開発PC：Mac
・ローカル開発サーバ：http://localhost:<PORT> を想定いたします
・デバッグ端末：iPhone（iOS 26）
・iPhoneとMacは同一Wi-Fiへ接続していただく必要がございます（重要）

1. 重要：iPhoneからは localhost を開けません

iPhoneのSafariで http://localhost:<PORT> を開いた場合、localhost はiPhone自身を指します。
そのため、Mac上のローカルサーバへ到達できません。

代わりに、以下の形式をご利用ください。
・http://<YOUR_MAC_IP>:<PORT>

<YOUR_MAC_IP>：MacのローカルIP（例：192.168.x.x など）  
<PORT>：ローカル開発サーバのポート番号

2. MacのローカルIPを確認する（IPは記事内では伏せ字にいたします）

ローカルIPは、ターミナルから確認する方法が確実です。

ipconfig getifaddr en0

ここで表示された値（例：192.168.x.x）を、記事内では <YOUR_MAC_IP> として取り扱います。

3. 開発サーバを「外部端末から見える形」で起動する（必須）

開発サーバが 127.0.0.1（localhost）のみにバインドされている場合、iPhoneからアクセスできません。

重要なポイントは、0.0.0.0 にバインドし、外部からの接続を受け付ける状態にすることです。

よくある起動例（代表パターン）
ご利用の開発サーバの起動コマンドに合わせて、「host/bind」系のオプションをご指定ください。

・--host 0.0.0.0  
・-H 0.0.0.0  
・--bind 0.0.0.0  
・--listen 0.0.0.0  

※ツールによってオプション名称は異なります。

本項は「ご利用中の開発サーバのコマンド」に読み替えてください。
重要なのは、0.0.0.0 で待ち受けることです。

ポート番号について（記事内では伏せ字にいたします）
ポートを指定する場合も、記事内では <PORT> 表記に統一いたします。

例：  
・--port <PORT>

4. iPhoneのSafariからMacのローカルサーバへアクセスする

iPhoneのSafariで、以下へアクセスしてください。
・http://<YOUR_MAC_IP>:<PORT>

こちらでiPhone実機上に画面が表示されれば、接続は成功です。

5. 接続できない場合の確認事項

以下を上から順にご確認ください。

5-1. iPhoneとMacが同じWi-Fiか
同一SSIDへ接続されていることをご確認ください。
会社ネットワーク、ゲストWi-Fi、VPN等では端末間通信が遮断される場合がございます。

5-2. Mac側でポートが待ち受けているか確認（ポートは伏せ字）
以下のコマンドで確認いただけます。

lsof -nP -iTCP:<PORT> -sTCP:LISTEN

プロセスがLISTENしていれば問題ございません。

5-3. Macのファイアウォール
Macのファイアウォール設定によりブロックされている可能性がございます。
必要に応じて、一時的に許可設定をご確認ください。

6. SafariリモートデバッグでCSS崩れを特定する

iOSのみで発生するCSS崩れは、実機のSafariをMacからリモートで確認する方法が最短です。

6-1. iPhone側：Webインスペクタを有効化
・設定 → Safari → 詳細 → Webインスペクタ：ON

6-2. Mac側：Safariの開発メニューを有効化
・Safari → 設定 → 詳細 → 「メニューバーに“開発”メニューを表示」：ON

6-3. iPhoneをMacへ接続（まずはUSB接続が確実です）
USB接続しておくと、動作が安定しやすくなります。

6-4. Mac Safariから対象ページを開く
MacのSafari上部メニューから以下を選択します。
・開発 →（iPhone名）→（対象のページ）

これにより、iPhoneのSafariタブに紐づいたインスペクタが表示されます。

7. CSS崩れの際に確認すべきポイント（実践チェックリスト）

7-1. Elements → Styles / Computed
崩れている要素を選択し、以下のプロパティを中心にご確認ください。

・display  
・position  
・width / height  
・flex / grid  
・transform  
・overflow  

取り消し線が付いているCSSは、優先順位の関係で適用されていない状態です。
「期待していたプロパティが最終的にどう適用されているか」を確定させてください。

7-2. Network：CSSが読み込まれているか
iOSのみ崩れる原因として、CSS自体が読み込めていないケースも少なくございません。

ご確認いただきたい点は以下です。
・CSSが 200 で返却されているか（404/500 になっていないか）
・Content-Type が text/css であるか（HTMLが返っており無視されていないか）
・キャッシュが強く効いており、古いCSSが適用されていないか

7-3. iOS特有のレイアウト上の注意点（代表例）
原因が特定しづらい場合は、以下も併せてご確認ください。

・100vh（Safariのアドレスバー伸縮の影響で崩れる場合がございます）
・position: fixed（iOSで挙動がずれやすい場合がございます）
・flex子要素が縮まず横に溢れる
　→ min-width: 0 を付与すると改善するケースが多くございます
・position: sticky が親要素の overflow により無効化されている

8. まとめ

・iPhoneから localhost は開けません → MacのローカルIP（記事内では <YOUR_MAC_IP>）をご利用ください
・開発サーバは 0.0.0.0 にバインドし、外部端末から参照可能な状態で起動してください
・iOSのみのCSS崩れは Safariリモートデバッグが最短です
　・Styles / Computed（最終適用CSS）
　・Network（CSSが読み込まれているか）
　・iOS特有の罠（100vh / fixed / flexのmin-width など）