Chrome’s Device Metrics : A Website Re-sizer

Advertisements

When user or web developer creates their own website, edit existing website or upload any document, in all these cases user test their website in various viewport sizes to check that the layout of the webpage displays well. To proceed on this, user can use; Adobe Edge Inspect or a browser extension(Chrome’s Dimensions) like tools, but these tools don’t give consistent result in all cases.
 
Google Chrome always comes up with various set of built-in developer tools for chrome lovers. Main goal of these tools are to help web developer or non-developer in respect of site development.
 
So many people know Firefox keyboard shortcut “CTRL + SHIFT + M” to test opened website. Similarly, Chrome also offers Dev Tools that work same as Firefox keyboard shortcut “CTRL + SHIFT + M”.

Chrome’s Device Metrics

 

Chrome launched a new built-in browser’s override feature to override default data of the browser – “Device Metrics”. Chrome “Device Metrics allows users to speedily resize the browser viewport to any resolution.
 

To enable this, click on, Customize and Control Google Chrome –> Tools –> Developers Tools(Shown in Figure: 1), it will open the source window at the bottom of the browser (Shown in Figure: 2).
There is one more way to open “Developer Tools” Window using keyboard shortcut trick “CTRL + SHIFT + C”.
 

Open Settings in “Developer Tools” Window using black sun shape icon(shown in figure :2). After opening Setting window, click on – “Overrides” panel(Shown in Figure: 3). To enable, “Device metrics” and “User Agent”, click on two check boxes – “Enable” and “Enable DevTools Setup”. Click on, “Device metrics” check box to specify the viewport dimension and top get instant result. User can swap the length between the width and the height by clicking on the button next to the input fields(Shown in Figure: 3). Chrome lovers can check the browser window using different – different resolutions.
 
User can also alter the browser’s “User Agent” using Dropdown box. Although, select the appropriate User Agent, give the actually viewport size in screen dimension input fields and click on the check box “Fit in Window” to set browse window according to requirements(Shown in Figure : 3).
 
For example, if user selects the User Agent: iPad – iOS 5, this selection will automatically set the dimensions to 1042 * 768 pixels. If user selects the User Agent: Android 4.0.2 – Galaxy Nexus S, this selection will automatically set the dimensions to 720 * 1280 pixels

Conclusion

Google Chrome’s Development Tools option has lot of helpful features that can simplify the development method. Now, Development Tools feature – Device Metrics facilitates users to debug their website to any specific viewport size, without using internet connection.

Rita Singh

Rita Singh

Worked for Think-A-Head Pvt Ltd. and Nokia Siemens Network as a Technical Writer. From past one year working as a Freelancer writer.
Advertisements