Responsive design testing tool – It only takes 2 seconds!
More than 32k active users access Viewport Resizer in 158 countries!
Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.
The smartest way to share your defined environment of devices and breakpoints directly with your team and client.
This bookmarklet should not replace a real device simulation. It rather helps you, your team and client testing statuses, transitions, text length etc. throughout different device types.
Features
- Full customization
- Add and customize sizes on the fly
- Manually orientation toggle by click (portrait | landscape)
- Automatically device window orientation in "Auto Size" mode (portrait | landscape)
- Media query support
- Adapt meta viewport tag from current page
- Manually page reload
- Remove toolbar and land on current page
- Viewport information (size, aspect ratio, orientation and user agent)
- Vector-based
- Touch-friendly
- Print support: WebKit only (Chrome and Safari)
Configuration
Examples
Setup
-
↔ Resizer
Viewport and device name required
<a data-viewport="320x568">iPhone 5</a>
-
↔ Resizer
Handle version number (showing as icon hint) optional
<a data-viewport="320x568" data-version="5">iPhone 5</a>
-
↔ Resizer
Handle device icon optional
(handy | blackberry | mobile | phone | smartphone | iphone | ipad | ipod | android | tablet | ipad | notebook | macbook | laptop | screen | desktop | display | tv)<a data-viewport="320x568" data-version="5" data-icon="iphone">iPhone 5</a>
-
↔ Resizer
Preselect size optional
<a data-viewport="320x568" data-version="5" data-icon="iphone" class="active">iPhone 5</a>
Build your own bookmarklet here
Requirements
- Online connection
- JavaScript must be enabled
- Note: Test page must be running inside frames, otherwise the toolbar has no chance to handle it (Frame-Breaker).
Browser support
Changelog
- 1.1.3 2013-01-16: Some trouble with jQuery version 1.9 - updated to jQuery 1.8.3
- 1.1.2 2012-12-07: Added meta viewport tag support incl. scaling | jQuery version 1.x family | Updated resize handler | Removed -ms prefixes | Prepended ↔ symbol to page title | Added title attributes to devices | Updated UI | Performance optimization | Various other fixes and improvements
- 1.1.1 2012-11-26: Updated @font-face syntax | Fixed WebKit issue when background-color property is not set
- 1.1.0 2012-11-19: Added new draggable edges (east, south, west, south-east, south-west) to resize the viewport on the fly | Fixed horizontal scrolling bug and sync on drag | Updated information formatting: Size: 320x480 (Portrait), Ratio: 2:3
- 1.0.9 2012-11-09: Added a draggable corner/bubble to resize the viewport on the fly (at the bottom on the right) | Added about information (incl. version number) | Various other fixes and improvements
- 1.0.8 2012-11-07: Bugfix: Handle vertical scrollbar to get the apposite window.innerWidth (thx Peter!) | Updated GCD algorithm
- 1.0.7 2012-10-26: Bugfix: Handle same ID's (thx Laurens!)
- 1.0.6 2012-10-25: Updated iframe bg color from transparent to white
- 1.0.5 2012-10-25: Updated user interface | jQuery 1.8.2 | Added print functionality and the corresponding icon (WebKit only) | New optical hint for size changes on the fly | Fixed: Firefox show a spinning wheel and never finish loading
- 1.0.4 2012-10-08: Added user agent information
- 1.0.3 2012-10-08: Added aspect ratio information
- 1.0.2 2012-10-08: Load jQuery only if not present and handle version number
- 1.0.1 2012-10-07: Initialized
Comments/Feedback