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