Browser-based responsive development tool, viewport resizing, custom widths
Jan 18, 2013
3 mins read
by Todd Motto
Designing in the browser is increasingly popular, especially with responsive websites. Having a reliable and simple viewport resizer is key to any responsive developer’s workflow. From the popularity of my jResize plugin, I’ve created an enhanced, browser-based version that requires no downloading or installations.
Just load your website up, add any custom widths you wish to use, or use the ones I’ve included, which are an array of popular viewport widths, and get developing.
Feature: ViewPort resizing
Choose from amongst the most popular viewport widths to scale your responsive sites and develop with ease.
Feature: Scrollbar detection for pixel perfection
Scrollbars add to the width of the resized document, which in some cases can be unreliable. In the development tool, there’s a scrollbar width detection script which appends any extra widths you need. On Mac OS X, using browsers such as Chrome, Safari, scrollbars are invisible, which means that the viewport width is reduced to exactly 320px. For windows and browsers like FireFox, they have scrollbars, the width is added onto the 320px. For instance if the scrollbar width is 15px (such as on Mac), you’ll end up width an appended 320px 15px = 335px – leaving a perfect document width of 320px.
Feature: Custom viewport widths
Add custom widths on the fly and test them alongside the most popular viewports.
The main script
Here’s the main script, for those wishing to see how it works.
The ViewPort resizer works best on HTML5/CSS3 supported browsers. If you spot any errors, or suggestions for improvement then please leave your thoughts via a comment below.
Learn Angular the right way
Join my online courses to fully master Angular, TypeScript and NGRX.