さくさくとWebサイトの表示サイズを確認できるブックマークレット

harada 706views 更新:2014年4月8日

Viewport resizerの「CLICK OR BOOKMARK」でリンクされている以下のURLをブックマークに登録しておくことで、どんなサイトでもすぐに様々な表示サイズの確認ができます。

javascript:void((function(d){if(self!=top||d.getElementById('toolbar')&&d.getElementById('toolbar').getAttribute('data-resizer'))return false;d.write('<!DOCTYPE HTML><html style="opacity:0;"><head><meta charset="utf-8"/></head><body><a data-viewport="320x480" data-icon="mobile">Mobile (e.g. Apple iPhone)</a><a data-viewport="320x568" data-icon="mobile" data-version="5">Apple iPhone 5</a><a data-viewport="600x800" data-icon="small-tablet">Small Tablet</a><a data-viewport="768x1024" data-icon="tablet">Tablet (e.g. Apple iPad 2-3rd, mini)</a><a data-viewport="1280x800" data-icon="notebook">Widescreen</a><a data-viewport="1920%C3%971080" data-icon="tv">HDTV 1080p</a><script src="http://lab.maltewassermann.com/viewport-resizer/resizer.min.js"></script></body></html>')})(document));

デフォルトで設定されているのは以下の形式です。

  • Mobile (e.g. Apple iPhone)Size: 320×480
  • Mobile (e.g. Apple iPhone)Size: 480×320 (Landscape)
  • Apple iPhone 5Size: 320×568 (Portrait)
  • Apple iPhone 5Size: 568×320 (Landscape)
  • Small TabletSize: 600×800 (Portrait)
  • Small TabletSize: 800×600 (Landscape)
  • Tablet (e.g. Apple iPad 2-3rd, mini)Size: 768×1024 (Portrait)
  • Tablet (e.g. Apple iPad 2-3rd, mini)Size: 1024×768 (Landscape)
  • WidescreenSize: 1280×800 (Landscape)
  • WidescreenSize: 800×1280 (Portrait)
  • HDTV 1080pSize: 1920×1080 (Landscape)
  • HDTV 1080pSize: 1080×1920 (Portrait)

この他にカスタマイズでその場で表示サイズを自由に変更することができます。
レスポンシブデザインのサイトの表示確認にとても便利です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません