September 17, 2015

HOW TO: Display your Website on Different Devices (in the Browser)

This tutorial explains how to use Google Chrome to view how your web application or website displays on different devices, such as Apple iPhone, iPad, Amazon Kindle, Google Nexus, LG Optimus, Nokia Lumia, Samsung Galaxy or Laptop with different resolutions.

Follow the steps below or click through the demo at the end of this article for a more visual explanation.

1 Open the Developer Tools in Google Chrome

To do so, click the Customise Icon on the top-right-side of Google Chrome. From the menu choose More Tools —> Developer Tools.

This will open the developer panel at the bottom of the screen.
2 Toggle device mode

To do this, just click the small mobile device icon on the top-left-side of the developer panel.

This will show the Device toolbar at the top of the browser window.
3 Display your webpage on different devices

In the Device toolbar, select the device you want to see how your web application displays on. You might need to Refresh the page for this to work correctly.

You can also switch between Portrait and Landscape mode and choose different Network characteristics.
Clickable Tutorial - click the orange hotspots to navigate