Safariでモバイル表示の確認をする方法⇒テーマをカスタマイズする際の確認に便利です

テーマをカスタマイズする際、モバイル表示も意識することが多いかと思います。

Safari上でモバイル表示の確認をすることができる機能がありますので、それを紹介します。

Safariのメニューバーの【開発】から「レスポンシブ・デザイン・モード」という機能があります。

まずはデフォルトでは【開発】の項目はありませんので、環境設定から【開発】を選択できるようにします。

環境設定の【詳細】タブ＞＞

【メニューバーに”開発”メニューを表示】にチェックを入れます。

すると、開発という項目が追加されます。

その項目の【レスポンシブ・デザイン・モードにする】という項目をクリック＞＞

ショートカットキーの【alt + command + R】でも表示切り替え可能です。

そうすると下記のような表示になり、iPhone 4s、5s、6s、6s Plusでの表示を確認することができます。

他にもiPadでの表示も確認可能です。

また、手動で左右上下の幅をドラッグで動かせますので、iPhone以外の解像度でも確認できます。

当ブログもモバイル端末からの訪問は多く見られます。

PC：モバイル（タブレット含む）⇒1：1.2くらいで、PCよりモバイル端末からの訪問の方が多いです。

最近ではPCを持たず、iPhoneやiPadだけで事足りるようになってきていますしね。

なので、情報発信側としてはモバイル表示の確認が非常に重要になってきます。

PC表示では問題ないが、モバイル表示に問題があるとなると機会損失にもなってしまいます。

レスポンシブ表示に対応したテーマも非常に多くなってきています。

スタイルシートなどをまったく弄らず、そのままで使うのであれば、問題は少なくなりますが、自分好みに見た目をカスタマイズする場合には表示確認は大事な部分になります。

このSafariでショートカットキーでささっと確認ができるのはありがたい機能ですね。

ただ、100％その通りに表示されるかというと、そうでもないようなので、実機で確認をするのが一番だとは思います。

僕の場合、iPhone 5s、iPhone 6s Plus、iPad2を所有していますので、一応出来る範囲で実機確認をするようにはしています。

ぜひ、参考になれば幸いです。