Webサイトの実機での検証方法

iPhoneとMacを使った検証です。

html、cssでウェブサイトのコーディングを行い、Google Chromeで検証（ディベロッパーツール）しWeb版、iPhone版両方ともに正常に表示されていて、いざ本番環境にアップして確認したけどうまく表示されていないことはありませんか？

私の場合はiPhoneSEとディベロッパーツールでの表示が違っていました。

Profileの下に大きくスペースができてしまっていました。

こういった場合に実機で検証していく方法を説明していきます。

実機検証に必要なもの

• 実機検証するiPhone
• Mac
• MacとiPhoneを繋ぐケーブル

実機検証するiPhone

私の場合はiPhoneSEです。検証したい実機を用意する必要があります。iPhoneXを持っていなければiPhoneXでの検証はできません。

Mac

Mac私の場合は【MacBook Air (Retina, 13-inch, 2020)】です。今年買ったもので新しいものです。

MacとiPhoneを繋ぐケーブル

上の二つは持っていると思いますけど、このケーブルは持っていない人が多いのではないでしょうか？私のMacとiPhoneの場合では「Lightningケーブル(iPhone)」と「USB-typeC(Mac)」でした。この二つを繋ぐケーブルは持っていませんでしたので変換するものを楽天で購入しました。３００円以下で買えました！

【送料無料】USB タイプc 変換 USB3.0 Type-A to Tyape-c 変換アダプタ コネクタ C ハブ ケーブル データ転送 充電 価格：210円（税込、送料無料) (2020/12/1時点)

方法

1. MacとiPhoneを繋げる
2. iPhoneで設定、Safariで開く
3. MacでSafariを開き、開発
4. 作業を行う

1. MacとiPhoneを繋げる

まずお持ちのケーブルでiPhoneとPCを繋げてください。

2. iPhoneで設定、Safariで開く

iPhneの設定から「Safari」→「詳細」→「Webインスペクタ」ONとしてください。これをしないと検証できません。

スマホで検証したいWebページをSafariで開いてください。

3. MacでSafariを開き、開発

MacでSafariを開いて上のところから「開発」→「iPhone」→Safariのページを選択する。

「開発」がない場合は左上の「Safari」→「環境設定」→「詳細」から「メニューバーに”開発”メニューを表示」にチェクを入れてください。

4. 作業を行う

後は、デベロッパーツール と同じように、ホバーすればmarginやheightなど、どのように効いているのかわかりますので編集すれば大丈夫です。