iPhoneを持たずにWebサイトをiPhoneでテストする最も正確な方法は、MacのXcodeに付属するiOSシミュレーターです。本物のiOS版Safariが動くので、Safari特有の描画の不具合、画面キーボード、ブラウザのUIまで確認できます。WindowsやLinuxには公式のiOSシミュレーターがないため、PlaywrightのWebKit、有料のクラウド実機サービス、あるいはレイアウト確認用のChromeのスマホ表示が選択肢になります。
それぞれの仕組みと、何を見つけられるかを順に説明します。
iPhoneのテストにChromeではなくSafariが必要な理由
ChromeやFirefoxも含め、iPhone上のブラウザはこれまですべてAppleのWebKitエンジンを使うことが求められてきました。現在は一部の地域で他のエンジンも認められていますが、ほぼすべてのiPhoneユーザーが見ているのは依然としてWebKitです。WebKitには、100vh と縮むアドレスバー、画面キーボードが出たときの position: fixed、フォーム部品、日付ピッカー、一部の新しいCSS機能などで独自の挙動があります。
そのため、ChromeのiPhoneエミュレーションでは完璧に見えるページが、実際のiPhoneでは崩れることがあります。ChromeはiPhoneの画面サイズとユーザーエージェントを真似できますが、ページの描画には自分のエンジンを使うからです。
方法1：MacのXcode Simulator（無料、最も実機に近い）
- Mac App Storeから Xcode をインストールします。ダウンロードサイズは大きめです。
- Xcodeを開いて Settings > Components（古いバージョンでは Platforms）に進み、iOSのランタイムが入っていなければインストールします。
- Xcode > Open Developer Tool > Simulator でシミュレーターを開きます。
- File > Open Simulator で端末を選び、シミュレーター上のSafariを開いてURLを入力します。
シミュレーターはMacのネットワークを共有するので、http://localhost:3000 も追加設定なしで開けます。端末の回転、シミュレーター内の「設定」アプリでの文字サイズ変更、ダークモードのテストもできます。
SafariのWebインスペクタでページを検証する
表示されている内容をデバッグするには、次のようにします。
- MacでSafariを開き、設定 > 詳細 で Web開発者用の機能を表示 をオンにします。
- Safariの 開発 メニューからシミュレーターを選び、開いているページを選びます。
iOS版Safariで動いているページに対して、Webインスペクタの全機能（要素、コンソール、ネットワーク）が使えます。iPhone側で 設定 > アプリ > Safari > 詳細（古いiOSでは 設定 > Safari > 詳細）の Webインスペクタ をオンにすれば、ケーブルでつないだ実機のiPhoneも同じメニューに表示されます。
方法2：PlaywrightのWebKit（Mac、Windows、Linux）
Playwright はオープンソースのブラウザ自動化ライブラリで、3つのデスクトップOSすべてに対応したWebKitのビルドが付属しています。iPhoneの各機種向けのデバイス定義もあり、表示領域、ピクセル比、ユーザーエージェント、タッチ対応を設定できます。
これはiOS版Safariではありません。iOS特有のブラウザUIを持たない、デスクトップOS上のWebKitエンジンです。それでもWebKitの描画の違いはかなりの部分を拾えますし、スクリプトで操作できるので、CIで主要ページをiPhoneサイズでスクリーンショットすることもできます。Windowsで開発している人にとっては、WebKitを確認する最も安上がりな方法です。
方法3：クラウドの実機サービス
BrowserStack、LambdaTest、Sauce Labsなどのサービスは、データセンターにある実機のiPhoneを貸し出し、その画面をブラウザに配信します。本物のハードウェア、本物のSafari、多数のiOSバージョンが使えます。有料で、無料トライアルは限られており、リモート画面には多少の遅延があります。
MacもiPhoneもないときや、古いiOSバージョンが必要なときに、会員登録や購入など重要な導線の最終確認に使いましょう。
方法4：ChromeでiPhoneサイズの表示にする
メニューが390pxに収まるか、メイン画像がうまくトリミングされるかといった純粋なレイアウトの確認なら、ChromeのiPhoneサイズ表示で十分で、数秒で済みます。
- iPhoneのプリセットを選んだChrome DevToolsのデバイスモード（Chromeのスマホエミュレーターの使い方で解説）
- Mobile View Extension のようなスマホ表示の拡張機能。iPhoneのユーザーエージェントと画面サイズで、iPhoneの枠の中にタブを再読み込みします
これは最初のチェックと考えましょう。おかしく見える箇所や、フォーム、スクロール、固定要素が関わるものは、方法1、2、3で改めて確認する価値があります。
各方法で見つけられること
| 問題 | Chromeのスマホ表示 | Playwright WebKit | Xcode Simulator | クラウドの実機 |
|---|---|---|---|---|
| iPhoneの幅でのレイアウト | 〇 | 〇 | 〇 | 〇 |
| サーバーが別のモバイル用ページを返す | 〇（ユーザーエージェント） | 〇 | 〇 | 〇 |
| WebKitでのCSS・JavaScriptの違い | × | ほぼ〇 | 〇 | 〇 |
アドレスバーと 100vh の挙動 |
× | × | 〇 | 〇 |
| 画面キーボードが入力欄を隠す | × | × | 〇 | 〇 |
| 実際の性能とメモリ | × | × | × | 〇 |
実践的なiPhoneテストの流れ
- Chromeのスマホ表示で、375pxと393〜402pxのレイアウトを確認する。
- 主要ページをXcode Simulator（WindowsならPlaywrightのWebKit）で開く。
- フォームのすべての入力欄に入力し、キーボードと固定要素の動きを見る。
- 長いページをスクロールし、固定ヘッダーとアドレスバーの関係を確認する。
- 公開前に、最も重要な導線を実機のiPhoneかクラウドの実機で少なくとも1回通す。
現行iPhoneの表示領域のサイズはiPhone画面サイズ一覧にまとめています。訪問者が使うほかのブラウザについてはクロスブラウザテストのチェックリストをご覧ください。
よくある質問
WindowsからiPhoneのSafariでサイトをテストできますか？
公式のシミュレーターではできません。AppleのSimulatorはmacOSでしか動かないからです。Windowsでは、エンジンレベルの確認にはPlaywrightのWebKitを、本物のSafariが必要ならクラウドの実機サービスを使います。
Xcode Simulatorは実機のiPhoneと同じですか？
本物のiOSとSafariが動くので、描画はかなり近くなります。ただしMacのプロセッサで動くため、性能、メモリの制限、一部のハードウェア機能は実機と異なります。
ChromeのiPhoneエミュレーションでは問題ないのに、iPhoneでは崩れるのはなぜですか？
ChromeのエミュレーションはiPhoneのサイズとユーザーエージェントを真似していますが、描画はChromeのエンジンで行っています。SafariのWebKitエンジン特有の不具合は、Safariでしか現れません。