これぞレスポンシブ確認ツールの決定版!OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer

ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。

サイトのキャプチャ

Viewport resizer

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」など多種多様なデバイスが用意されており、そのまま使用することもできます。

top of page

©2017 coliss