tags

[2]
[2]
[1]
[1]

タグ「iPad」での検索

MacでiPhoneやiPadでのサイトの見え方を確認する(Chrome / Safari の開発者ツール)

(2026年11月更新:ブラウザの標準機能を中心に書き直しました)

Web サイトがスマートフォンやタブレットでどう見えるかを、Mac で確認する方法です。アプリを入れなくても確認できます。

● Google Chrome

  1. 確認したいページを開きます。
  2. option + command + I で開発者ツールを開きます。
  3. shift + command + M を押します(開発者ツールの左上のスマートフォンのアイコンでも同じです)。
  4. 画面の上の一覧で、iPhone などの機種を選びます。

● Safari

  1. 開発メニューを表示する設定をします。Safari の設定の「詳細」タブに項目があります。
  2. 「開発」メニューからレスポンシブデザインモードに入ります。
  3. 機種を選びます。

● 実機に近い環境で確認する

  • Xcode の Simulator:Xcode を入れると、iPhone や iPad のシミュレータの Safari で確認できます。
  • 実機の Safari を Mac で調べる:iPhone を Mac につないで、Mac の Safari の「開発」メニューから接続します。iPhone 側で「設定」→「アプリ」→「Safari」→「詳細」の「Web インスペクタ」をオンにします。

● Polypane(有料)

https://polypane.app/

複数の画面サイズを並べて確認できるブラウザです。


添付ファイル1
添付ファイル2
No.46
11/03 23:40

edit

添付ファイル

iPad
iPhone