PCのブラウザで画面幅を広げたり縮めたりしてレスポンシブ時の表示確認をし、よし！と思っていても、実機で見たときに思いっきり表示崩れをしているなんてことは良くある話ですね。
まあ、ひどい！
PCのChromeならF12キーか、確認したい要素の上で右クリックして「検証」を選ぶことで、色々確認できる。iPhoneでも「View Sourse」などのアプリを使うことでソースの確認はできるけど、画面上で調整してみたりといったテストまではできない。
そんなときは、safariの「Webインスペクタ」機能を使うと便利です。
目次
iPhoneとMacの環境設定
iPhone側
- ホーム画面の「設定」→「Safari」→「詳細」→「Webインスペクタ」をON
Mac側
- Safariの「環境設定」→「詳細」→「メニューバーに”開発”メニューを表示」をチェック
Safariのメニューバーに「開発」が追加されましたね。
iPhoneとMacをUSBで繋ぎましょう。
デバッグ開始
iPhone側のsafariで検証したいページを開きます。
Mac側のSafariで先ほど追加された「開発」メニューを開くと、上から3行目くらいに接続したiPhoneの項目があります。
iPhone側で表示しているページをここで選択すると、別ウインドウで「Webインスペクタ」が開きます。Chromeの「開発者ツール」と使い方は大体同じ。デバッグを進めます。
ここですね。
PC時に反映させたいwidth指定がSP時にも影響していました…。初歩的過ぎィ！
メディアクエリでスタイルを調整して……、
無事レイアウト崩れを修正できました！
キャッシュがしつこい場合は、safariのプライベートモードから確認します。
デバッグが終わったら、USBケーブルを抜いたら終了です。