iPadやiPhoneはRetinaディスプレイです。
WebページをRetina対応したけれど、うまくいかなかったりして、解析しようとしても、iPadやiPhoneではソースを表示したりできません。
しかし、MacのSafariと連携すれば、実はそれができるのです。
以下、解説はiPadですが、iPhoneでも基本同じです。
iPadの設定
Safariの設定でWebインスペクタをオンに
iPadの設定メニューから、Safariを選択し、いちばん下の詳細を選択します。
さらに、「Webインスペクタ」をオンにします。
設定の下に描いていますが、ケーブルをMacに接続して、Mac上の開発メニューからインスペクタを表示できます。
iPadの準備は整ったので、次はケーブルをMacに接続して、MacのSafariで操作します。
ケーブルで接続
MacとiPadをケーブルで接続します。
Safariの設定
開発メニューを表示する
Safariの環境設定から、開発メニューを表示します。
これをやっとかないと、「開発」メニューが表示されません。
使ってみる
いよいよ、使ってみます。
解析したいページを表示
ケーブルでMacとiPadを接続し、iPadのSafariで解析したいWebページを表示しておきます。
インスペクタを表示
次にMac側のSafariで、開発メニューからWebインスペクタを表示します。
メニューにiPadmini(実際にはiPadに付けている名前)が追加されていて、表示中のWebページが選択できるようになっています。
どうですか?表示できましたか?
超便利なアレ
Webページ上で選択した箇所のソースが見られるという超便利なアレ(名前は知りません)ももちろん使用可能です。
アレのアイコンをクリックして(青色にして)次にiPad上で、選択(タップ)します。
この通り、選択箇所のソースがMac上で選択されます。
最後に
特にRetinaのiPadやiPhoneで役立つ方法かと思います。
実は案外有名な方法なのかもしれませんが、ちょっと発見したのでご紹介しました。
それにしても、長いタイトルだな・・・。