一つのパソコンで複数のブラウザの表示を確認する裏技(Safari)

Gadget

今回は、一つのPCとブラウザアプリのSafariを使って多種多様な機種とブラウザでの表示を確認する方法を紹介します。
この方法を使えば、一々いろんな実機で表示を確認する必要が基本的に無くなります。

Safariでは以下の機種での表示を確認することが可能です。

  • iPhone8
  • iPhone8Plus
  • iPhoneSE
  • iPod touch
  • iPad mini
  • iPad Pro
  • iPad
  • Microsoft Edge
  • Google Chrome(Mac版)
  • Google Chrome(Windows版)
  • Firefox(Mac版)
  • Firefox(Windows版)

その方法を紹介していきます。

Safariのユーザーエージェントから

まず一つ目の方法は、開発ツールの「ユーザーエージェント」を変更するやり方です。

ユーザーエージェントの設定を変更する事でiPod touch、iPad mini、iPad、Microsoft Edge、Google Chrome(Mac版)、Google Chrome(Windows版)、Firefox(Mac版)、Firefox(Windows版)での確認が出来ます。

ユーザーエージェントの設定は、Safariの上部のタブバーの開発ユーザーエージェントから可能です。

ここでユーザー(ブラウザ)を選択するだけ各々の表示を確認できます。

ただし画面幅は現在使用してるモニターの幅に合わせて表示されます。そのため大した差は基本的に出ません。HTMLのタグでOSやブラウザによって記述を変えなくてはいけないものの確認に使います。(flexboxなど)

要素の詳細を確認から

もう一つの方法は「要素の詳細を確認(デベロッパーツール)」からです。

要素の詳細を確認では、iPhone8、iPhone8Plus、iPhoneSE、iPad mini、iPad Proの表示を確認出来ます。

要素の詳細を確認は、右クリック要素の詳細を確認で確認出来ます。もしくはCommand+Control+Rのショートカットですぐに開きます。

こっちの方法だと実際に画面幅もスマホサイズに変更され実機での表示とほぼ同じ様に表示されます。

注意点

今回紹介した2つの方法では、基本的には実機での表示と大差なく表示されますが、稀にギャップが起きる場合があります。スタイルの記述や、キャッシュ、Java Scriptでの制御など様々な要因があるかと思います。
そのためあまり過信しすぎるのもよく無いのは事実です。

この方法を使用する前に各端末でのギャップが起きない要素なのかを確認してから、効率化の意味合いでSafariのみで動作確認を行う様にシフトすれば良いかと思います。


以上が「一つのパソコンで複数のブラウザの表示を確認する裏技(Safari)」でした。

動作確認はWEB制作の全体の1/3を占める大事な作業かと思います。それを効率化できる方法です。
実機でも確認する事は非常に大事ですが、今回の方法も試してみるのもアリかと思います。

2020年4月20日GadgetHardware,Know-How

Posted by KT