ChromeでWebサイトをiPad表示にするには、DevToolsを開いてデバイスツールバーを切り替え（Ctrl + Shift + M、Macは Cmd + Shift + M）、Dimensionsの一覧からiPadを選ぶか、820 × 1180のようなタブレットのサイズを入力します。タブレットのプリセットがあるスマホ表示の拡張機能なら、ツールバーのボタンから同じことができます。ただし、表示結果をうのみにする前に、下のiPadのSafariについての項目を読んでください。実際のiPadは、サイトのPC版を読み込むことが多いのです。
タブレットのテストで間違えやすい理由
タブレットは、レスポンシブデザインにおいて扱いにくい中間に位置します。縦向きの幅（現行iPadでおよそ744〜1032 CSSピクセル）が、最もよく使われるブレイクポイントである768pxと1024pxにちょうど重なるからです。タブレットを回転させると「スマホ」と「PC」のレイアウトが切り替わることがあり、固定ヘッダー、サイドメニュー、複数カラムのグリッドが崩れやすいのもまさにこの範囲です。
さらに、幅とはまったく関係のない2つ目の落とし穴があります。
iPadのSafariはデフォルトでPC版サイトを要求する
iPadOS 13以降、iPadのSafariはデフォルトでWebサイトのPC版を要求します。送るユーザーエージェントはiPadではなく、MacのSafariに似たものです。つまり、次のようになります。
- ユーザーエージェントでモバイル端末を判定するサーバーは、iPadをPCとして扱う
- CSSは実際の表示領域の幅に従うので、メディアクエリは想定どおりに動く
- サイト側はMacを相手にしているつもりでも、入力はタッチだけ
そのため、Chromeで「iPad」のユーザーエージェントを使ってiPadをエミュレートすると、実際のiPadユーザーには決して表示されないバージョンを見ている可能性があります。正しくテストするには、iPadの表示領域でモバイル／iPadのユーザーエージェントを使った場合と、同じ表示領域でPCのユーザーエージェントを使った場合の両方を確認しましょう。DevToolsでは More tools > Network conditions でユーザーエージェントを上書きできます。手順はChromeでユーザーエージェントを変更する方法で解説しています。
方法1：DevToolsのデバイスモード
- DevToolsを開き、デバイスツールバーを切り替えます。
- Dimensionsメニューに一覧があればiPadの機種を選びます。なければ Edit をクリックして端末を追加するか、Responsive を選んでサイズを入力します。
- 回転アイコンで横向きにしてテストします。
- ページを再読み込みします。
デバイスモードはタッチイベントもエミュレートするので、タップで開くタブレット用メニューのテストにも役立ちます。詳しくはChromeのスマホエミュレーターの使い方をご覧ください。
方法2：タブレットのプリセットがあるスマホ表示の拡張機能
タブレットのレイアウトを頻繁に確認するなら、拡張機能のほうが速いでしょう。Mobile View Extension にはスマホと並んでタブレットのプリセットがあり、縦横どちらにも対応し、目的の端末が一覧にない場合は任意の解像度を入力できます。対応するユーザーエージェントと画面サイズでタブを再読み込みし、ページを移動してもその表示を保ちます。ブラウザ内のプレビューなので、操作はタッチではなくマウスです。
方法3：本物のiPad版SafariならXcode Simulator
Macでは、Xcode Simulatorで本物のiPadOSとSafariが動きます。上で説明したPC版サイトの挙動、Safari独自の描画、画面キーボードまで確認できます。無料ですがサイズが大きく、macOS専用です。手順はiPhoneなしでiPhone表示を確認する方法と同じです。
現行iPadの表示領域のサイズ
縦向きのCSS表示領域のサイズで、Appleが公表している画面解像度をデバイスピクセル比2で割って求めたものです。
| iPadの機種 | 画面 | 物理解像度 | CSS表示領域（縦向き） |
|---|---|---|---|
| iPad mini（第6・第7世代） | 8.3インチ | 1488 × 2266 | 744 × 1133 |
| iPad（第10世代・A16） | 10.9〜11インチ | 1640 × 2360 | 820 × 1180 |
| iPad Air 11インチ（M2以降） | 11インチ | 1640 × 2360 | 820 × 1180 |
| iPad Air 13インチ（M2以降） | 13インチ | 2048 × 2732 | 1024 × 1366 |
| iPad Pro 11インチ（M4以降） | 11インチ | 1668 × 2420 | 834 × 1210 |
| iPad Pro 13インチ（M4以降） | 13インチ | 2064 × 2752 | 1032 × 1376 |
AppleはiPadを頻繁に更新するので、対象とする機種はAppleの技術仕様ページで確認しましょう。
Androidタブレットはさらに多様です。テストには、800 × 1280、600 × 960（7〜8インチの小型タブレット）、そして1280 × 800のような横長サイズを用意しておくと便利です。
タブレットサイズで確認したいこと
- ナビゲーション。 メニューがハンバーガーから横並びのバーに切り替わる幅で、そのバーが実際に収まっているか。
- グリッド。 3カラムのカードが、要素が余った窮屈な2カラムになっていないか。
- ホバー前提の操作。 ホバーで開くドロップダウンは、タッチ画面では何も起きません。タップでも開くようにしましょう。
- 横向き。 回転して再確認します。横向きで幅1180pxになると、10.9インチの画面でPC用レイアウトに切り替わることがあります。
- 画像と動画。 タブレットは高密度ディスプレイなので、低解像度の画像はぼやけて見えます。
タブレットに合ったブレイクポイントはレスポンシブのブレイクポイントで解説しています。
よくある質問
iPadのテストにはどの画面サイズを使えばよいですか？
まずは820 × 1180（iPadとiPad Air 11インチ）と1024 × 1366（13インチモデル）を、縦横両方でテストしましょう。iPad miniのユーザーが多いなら744 × 1133も加えます。
iPadで自分のサイトがPC版で表示されるのはなぜですか？
iPadのSafariはデフォルトでPC版サイトを要求し、Macに似たユーザーエージェントを送るからです。サイトがユーザーエージェントで表示を切り替えていると、iPadにはPC版が返されます。CSSの幅に基づくレスポンシブなレイアウトなら、この問題は起きません。
DevToolsを使わずにChromeでタブレット表示をテストできますか？
できます。Mobile View Extensionのようにタブレットのプリセットがあるスマホ表示の拡張機能なら、ツールバーのボタンからタブレットサイズで表示できます。