Viewport Emulation with Chrome’s Device Metric

When we are building or prototyping a responsive website, we need to give the website a test in numerous viewport sizes to check to see if the layout and pages are displayed well. There are several ways in doing so: you can use Adobe Edge Inspect, XIP.io, a responsive bookmarklet, or a browser extension such as Dimensions for Chrome.

The problem is that these tools do not always work seamlessly in every case. Adobe Edge Inspect requires your laptop and mobile devices to be connected under the same wireless connection, XIP.io also requires your devices to connect to the Internet, and in my experience it is quite painful to debug responsive website under iframe or having to repeatedly resize the browser window.

Emulate Viewport Size

Chrome recently introduced a new built-in feature that bypasses all the above mention problems. It is called Device Metric. To enable it, open the Developer Tools Setting.

Head over to the Override panel. Select Device metrics, and you can specify the viewport dimension.

The result should take instantly.

You can swap the length between the width and the height by clicking on the button next to the input fields.

Not sure what screen resolutions to use? You can also change the browser’s User Agent. And the screen dimension input fields will be filled up with the actually viewport size from the selected User Agent.

For example, selecting "Android 2.3 – Nexus S" will set the dimensions to 480 by 800 pixels, selecting "iPad – iOS5" will set it 1024 by 728 pixels.

For the rest, you can find a complete list of mobile device viewport sizes in Screensiz.es.

Conclusion

Google Chrome has a lot of helpful features that can streamline the development process. Now, by using Device Metric, you can debug your website for specific viewport size without having to deal with restricted connectivity, using third-party browser extensions, or trawling through an iframe.