これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer
Post on:2012年10月26日
sponsors
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。
Viewport resizerの特徴
Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。
- フルカスタマイズが可能。
- その場でサイズ変更してのカスタマイズも可能。
- 1クリックでスマフォやタブレットの縦・横向きを変更できます。
- Media Queriesをサポート。
- Metaのviewportタグを適合させます。
- ページのリロードはマニュアル。
- ツールの削除も簡単。
- ベクターベース。
- タッチデバイス対応。
- プリントもサポート（Webkitのみ）。
Viewport resizerの使い方
使い方は簡単で、まずはブラウザのブックマークにViewport resizerを登録します。
- ブックマークレット
- Viewport resizer（クリックすると、このページで起動します）
ブラウザでページを表示し、ブックマークからViewport resizerをクリックします。
起動時のアニメーションも一瞬ですが、かっこいいですよ。
ツールバーはカスタマイズも可能ですが、それは後述するとして、まずはノーマル状態から。
左から、iPhone, iPhone5, small tablet, table, widescreen で、クリックするとそのサイズで表示を変更します。
試しに、iPhone5をクリック。
素早いアニメーションで表示サイズを変更します。
iPhone5 Portraitサイズで表示
各デバイスの向きは、そのアイコンをホバーすると変えられます。
横向きにして、クリック。
iPhone5 Landscapeサイズで表示
バーのアイコンの隣の「Customize」をクリックすると、サイズをカスタマイズできます。
表示を元のサイズに戻したいときは、一番左の矢印アイコンをクリックします。
確認が終了したら、右端の「x」をクリックするとバーが消えます。
Viewport resizerの高度な使い方
デフォルトのまま使っても強力なViewport resizerですが、更に高度な使い方も用意されています。
ツールバーの項目はカスタマイズが可能で、必要とするデバイスのみに変更でき、オリジナルのデバイスを登録することもできます。
サイトには、iPhone, iPod Touch, iPhone5をはじめ、ガラケー、タブレット、昨日アナウンスがあった「Amazon Kindle」など多種多様なデバイスが用意されており、そのまま使用することもできます。
sponsors
