A well-designed responsive website should adapt its display to work properly on phones, tablets and desktops, but testing this on every possible device might take a while.
Emmet Re:view is a free Chrome extension which displays responsive websites in various-sized views, side-by-side, enabling you to see how they work at a glance.
Visit the test website, click Emmet Re:view, and a tab opens with resizable views for each CSS media query breakpoint of your page.
(Keep in mind that if this isn’t a responsive website and there are no breakpoints, they’ll all look the same.)
Scroll through any of these viewports, move, hover and click the mouse, and Emmet Re:view keeps the other views synced.
You can additionally resize an individual viewport to see how the site behaves.
The extension also provides a Device Wall which displays multiple device-sized viewports for every <meta name=”viewport”> tag of your page.
You’re then able to select various devices presets – “Android phones”, “Android tablets”, “Apple phones”, “Apple tablets”, individual device types – and see how the site will look at that resolution.
Emmet Re:view isn’t a substitute for full testing, and we had one or two odd problems (blank viewports), but overall it’s a simple and lightweight way to check responsive websites at different resolutions.
Emmet Re:view is a free Chrome extension.
Your Comments & Opinion