PC1つで主要スマホ・タブレットのブラウザチェックをする方法

Webサイトを制作する際、避けて通れないのがスマホやタブレットでのブラウザチェックですが、検証用に複数の端末を持ってるという人は少ないと思います。自分の携帯ではチェック出来ても、そんなに色々端末持ってる方が珍しいので、納品後にやれこの端末で表示崩れるだのなんだのと言われて見えない修正作業を行う羽目になるわけですね。

そんな時に便利なのがChromeの検証ツールですが、もっと楽に各主要端末での見た目が確認出来たらいいのに。というわけで今日紹介するのがこちらです。

Sizzyという便利ツール

まずはこちらにアクセスしてチェックしたいサイトのURLを入力してみましょう。

http://sizzy.co/

こちらで確認出来るデバイスは以下の8種類です。

  • iPhone 4: 320×480
  • iPhone 5: 320×568
  • iPhone 6: 375×667
  • iPhone 7 Plus: 414×736
  • iPad Air: 768×1024
  • Nexus 6P: 411×731
  • Galaxy S4: 360×640
  • Nexus 7: 600×960

初期状態では、縦長画面で表示されますが、横長モードに切り替える事も可能です。

もちろん、その画面上でページ遷移も出来る優れものです。

Chromeのアドオンも用意されている

とはいってもいちいちそのサイト行ってチェックすんのめんどくせぇやという方は、Chromeにアドオン仕込みましょう。以下URLから追加出来ます。

https://chrome.google.com/webstore/detail/sizzy/nfhlbmjiiogoelaflfclodlkncbdiefo

使い方はとても簡単。Chromeでチェック対象のサイトを表示している時に、ツールバーからSizzyボタンをクリックするだけです！

便利なツールで快適なチェックライフを。

Web

Posted by demoya