ブラウザのviewportを切り替えられるVIEWPORT RESIZERがレスポンシブデザインな開発に超絶便利!

レスポンシブデザインのサイトを作ってる際にシュミレーターを使うことが多いと思うんですが、それはそれで大事なんですけど、毎回シュミレーターってのもウキーってなりますよね。

スクロールがウキーッだったり、URLの入力がウキーっだったり。

こんなこと1日やってたら猿になっちゃいます。

そんな猿直前のみなさんに便利なツールを発見したのでご紹介。

ブラウザのviewportを切り替えられるブックマークレット、VIEWPORT RESIZERが超便利

このブックマークレットをインストールすると超簡単に主要なモバイル端末のウインドウサイズをシュミレートできます。

インストール方法はブックマークレットなので超簡単。

以下のサイトで ”CLICK OR BOOKMARK” って書いてある部分をブラウザのブックマークバーに持ってくだけです。

Viewport resizer – responsive design bookmarklet – device screen size check

あとは、表示を確認したいサイトへ移動してブックマークレットをクリックするだけ。

するとサイトの上の方に黒いバーが現れます。

このバーの左側にモバイル端末のアイコンが並んでますので、それをクリックすると以下のように表示を確認できるしだいです。

さっそくApple iPhone 5ってアイコンをクリックしてみました。

次はiPadってアイコン。

ユーザーエージェントは元のブラウザのまんまですし、縮小表示にも対応してないので、厳密にはviewportを変えたってわけじゃないとも言えますが、レスポンシブデザインのサイトをさくっと確認するにはとても便利です。

ちなみにレスポンシブデザインじゃないサイトを見ると以下のように微妙な感じ。笑

完璧とは言いがたいものがありますが、ブラウザの横幅をマウスで縮めて確認することはよくあることなので、それと比べればはるかにマシじゃないでしょうか。

もちろんシュミレータでもちゃんと確認しましょう。

追記

ツイートを見てたら、2回クリックすることで横向きになることを発見しました。

https://twitter.com/mtmt_id/status/261406846651334656

おー!