Responsive Design Bookmarklet - レスポンシブデザインの確認ができるブックマークレット
レスポンシブデザインでWebサイトを作った場合の問題点と言えばそのデザインの確認です。単純な方法としてはウィンドウ幅を変えるというのがありますが都度変更するのは面倒です。またGoogle ChromeであればDevToolsを使って幅を選択することもできますが、多様な機種が登録されている中での選択は逆に面倒だったりします。 そこで使ってみたいのがResponsive Design Bookmarkletです。ブックマークレットを実行するだけでレスポンシブデザインの確認が容易になります。
Responsive Design Bookmarkletの使い方
実行すると下の画像のようにツールバーが表示されます。
スマホ、タブレットのそれぞれで縦向き、横向きの確認ができます。例えば下の画像はスマホの縦向き。画面サイズは320x480です。
さらに横向き。
タブレットの縦向き。
ステータスバーを表示することもできます。
Responsive Design Bookmarkletを使うと任意のサイトでレスポンシブデザインへの対応を手軽に確認できます。なお画面幅によってJavaScriptの実行を切り替えている場合などは確認できないと思われますのでご注意ください。
Responsive Design BookmarkletはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。