スマホなどのモバイル端末が広く普及したことで、最近ではPCサイトのみではなくスマホサイトも用意しているところが増えてきました。
スマホから見やすいサイトが増えるのは良いことですが、スマホサイトの検証作業は、端末によってスペック(OSや画面解像度など)が異なるため大変ですよね。
そこで今回は、代表的なWebブラウザ(PC)で簡単に出来る検証方法をご紹介します。
Safariでスマホサイトの検証をするには、メニューバーから[開発]-[ユーザーエージェント]を選び表示したい端末を選択することで、表示確認を行えます。
※開発がメニューに出ない場合
メニューバーより[Safari]-[環境設定]-[詳細]の「メニューバーに”開発”メニューを表示」にチェックを入れることで、メニューバーに開発メニュ―が表示されます。
デフォルトで用意されているユーザーエージェントは「Safari」「Safari iOS」「Internet Explorer」「Google Chrome」「Firefox」になりますので、新しく追加したい場合は、ユーザーエージェント一覧などを参考に「その他」から追加してください。
検証をする上で注意したい点としては、スマホ独自の操作方法である「スワイプ」や「タブルタップ」が使えないことです。スライダーやカルーセルは送りボタンを押すなり、ピンチイン・ピンチアウトで拡大・縮小する必要があります。
次に、Google Chromeでスマホサイトの検証をするには、メニューバーより[表示]-[開発/管理]-[ディベロパーツール]を選び、ディベロッパーツールを起動します。
ちなみに、メニューバーから選択しなくても、右クリックメニューの「要素の検証」でも開けます。
①Hide drawer ②Device ③表示したい端末を選択 ④Emulateボタンを押す
Emulateボタンを押すことで、自動的に更新され、スマホサイト表示となります。
Firefoxはデフォルトでスマホ表示することができないため、アドオンを使用します。
今回は「User Agent Switcher」というアドオンを使用しますが、他にもシミュレータアドオンは沢山ありますので、探してみてください。
User Agent Switcherの特徴として、スマホ以外にもガラケーやゲーム端末などを表示することができます。最近ですとあまり使わないかもしれませんが……。配布しているサイトもありますので検証したい端末がなければ、調べてみてください。
ご紹介したツールを使用してPCから検証するのは、効率的かつ手軽ですが、あくまでもシミュレータになりますので、最終確認は実機で確認することをオススメします。Android2.×系では文字の太さや、positionの不具合があったり、機種依存のエラーなどもあるため見落とさないよう気をつけて検証してください。