スタイルシートマニア

様々な端末サイズを確認できるViewport Resizer | ホームページカスタマイズ Tips

最近ちょくちょくお話のネタになっています、「Fluid Grid Layout」ですが、動作確認をするのにいちいちそれぞれの端末を手にとってリロードか、端末にAdobeが出しているAdobe Edge Inspectを入れて起動してChromeと同期させて確認するか、ブラウザのサイズを縮めて確認するかのいずれかでの確認だったと思います。
Adobe Edge Inspectはなかなか便利だったんですが、どうもiPadちゃんとの相性がよろしくないようでしょっちゅう落ちるし、サイトの下の方まで確認しようと思ったら結局手にとってスクロールしないといけないし。
方やブラウザを縮めるとChromeでせっかく便利な要素の検証がものすごく使いにくくなるというとっても残念な感じ。
そんなどれもいまいちな感じがぬぐえなかったんですが、このViewport Resizerが全部解決!

VIEWPORT RESIZER

使い方はとっても簡単!
トップ画面の「Click or Bookmark」を文字通りクリックするかブックマークして、後は確認したいサイトに行って先ほどブックマークした「Resizer」をクリックするだけ!
すると、画面上部にぷらんぷらんっとリサイズするアイコンが出てくるのでこれをクリック!
するするっと表示部分がその大きさになって表示具合をチェックできます!
素晴らしい!

更に、デフォルトのサイズ以外にも「BUILD YOUR OWN BOOKMARKLET HERE」で好きなブラウズサイズをクリックしてカスタマイズできるから、様々な端末の確認ができます。AppleのCinema Displayサイズ(2560×1600)なんてのもあるので試しに入れてみると面白いかもしれません。

制作段階ではこれぐらいがお手軽でいいですね。
もちろん最終確認で端末使って確認しましょう!

Author:庄野英朗
Comments:1

庄野英朗

Source Marine 代表
デザイン・コーディング・PHPアプリケーションまでこなす。
マルチデザインプログラマ。

1 件のコメント

コメントを残す