レスポンシブの確認にVIEWPORT RESIZERが今更ながら便利すぎるというお話。


レスポンシブ増えてますね。こんなサイトもレスポンシブかよ。みたいな猫も杓子もレスポンシブですが、
作る側からするとVIEWPORTごとにそのサイズのデバイスでチェック~とか大変すぎるので、VIEWPORT RESIZERを使うと捗るよというお話です。
デザイナやエンジニアの方はもう少し細かく注意深く見ていく必要があるかとは思いますが、ディレクターさんやら趣味で探す場合なんかは十分すぎる便利さです。
ブラウザ縮めたりしてりゃいいじゃんって話もありますが、固定サイズに縮めて伸ばしてって作業が続くと結構面倒臭いですし、メディアクエリーのブレークポイントをちゃんとチェックしたいんだ!って几帳面な方にもピッタリオススメ。
 
Responsive design testing tool – Viewport Resizer – Device simulation tool
手軽で便利なVIEWPORT RESIZER
 
その名前の通りVIEWPORTを色々その場で変更できちゃうブックマークレットです。
たくさんはてブがついてます。便利だしもっとついててもいいと思う。

便利すぎるポイント

  • 固定サイズ以外にも柔軟にサイズをカスタマイズできる(AndroidとかAndroidとかAndroidとか)
  • ポートレートとランドスケープを一発で変更可能!
  • ブックマークレットなので、macだろうがWindowsだろうがブラウザも一部以外お構いなし(助かります!)
  • カスタムサイズを柔軟に指定できる
  • メディアクエリーがちゃんとサポートされてる

 

使い方

登録も手とり足取り親切仕様なので、困ることはないはず。

赤枠内のボタンをブックマークバーとかに持っていくだけ。

赤枠内のボタンをブックマークバーとかに持っていくだけ。

登録したらお好きなサイトでブックマークレットをえいやっ!と起動。
するとこんなのが画面上に現れます。視覚的にもわかりやすいですね。
resizer-menu
説明するまでもないですが、アイコンを選択するとそれぞれのサイズで表示されます。凄い!便利!
okaoka.netはレスポンシブでして、上の5って書いてあるアイコンを叩いてiPhone5サイズで見ると
 

ファーストビューがイケてない気配(´・ω・`)

ファーストビューがイケてない気配(´・ω・`)

こんな感じに。
さらにもう1回同じボタンを押すと
 
okaoka-Landscape
ランドスケープに!便利!
変なサイズとかも、Customizeってところで自由自在です。
更にカスタマイズサイズは保持しておけるのでデフォルトに無いものも登録しておけばこれまた一発確認です。
確認作業も速さが求められていますし、なにより手軽で高機能。
仕事で使うもよし。おいおいこのサイト対応してね~じゃねーかと一人悦に浸るもよし。
超おすすめ!ブックマークバーにおいておきたいひと品です!

Leave a Reply

*

*