Everyday RWD Tool: Viewport Resizer
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.
Viewport Resizer is a tool that I use every single day for responsive website design and front-end development. As web developers, we all have our ways to check viewport size and the responsiveness of our sites - but, this one just fit the way I prefer to work better than anything else.
My favorite part is the fact that I can pick and choose breakpoints - create my own set of viewports with which to test my pages. I can even set my preferred 'first view' - I always start with iPhone5. I've shared my custom setup below, feel free to copy / paste it for yourself.
Copy the code below and paste it into the 'Result Editor' in the Build Your Own Bookmarklet section of Viewport Resizer.
<a data-viewport="320x480" data-icon="ipod">iPod Touch</a><a data-viewport="320x568" data-icon="iphone" data-version="5" class="active">iPhone 5</a><a data-viewport="768x1024" data-icon="ipad">iPad (2-3rd, mini)</a><a data-viewport="800x1280" data-icon="tablet" data-version="HD">Kindle Fire HD</a><a data-viewport="1280x800" data-icon="laptop">Widescreen</a><a data-viewport="1366x768" data-icon="notebook" data-version="11″">Macbook Air</a><a data-viewport="1440x900" data-icon="macbook" data-version="13″">MacBook Air</a><a data-viewport="1680x1050" data-icon="macbook" data-version="15″">Macbook Pro</a><a data-viewport="1280x1024" data-icon="desktop" data-version="24″">24″ Display</a><a data-viewport="2560x1440" data-icon="display" data-version="27″">27″ Display</a><a data-viewport="2560x1600" data-icon="display" data-version="30″">30″ Display</a>