Features of Google Chrome Device Modes

Ketak Bhalsing
9y
5.2k
0
0

Article

Introduction

Consider the following scenario:

We are expected to develop a portal using SharePoint or ASP.NET Technology and support mobile view compatibility.
This portal is expected to be viewed in Desktops, iPads or smartphones (running a Windows operating system or Android).

For testing the appearance of this portal on iPad or smartphones, we need to acquire the iPad (or the specific device to be supported) and that is not always feasible. For such scenarios we can use the Google Chrome Device Mode Feature to emulate device environment and can the appearance and behavior of the portal.

The following is the procedure and a demo of the Google Chrome Device Mode Feature. For the following example, we are considering the portal appearance on an iPad, Samsung Galaxy Note and Nokia Lumia.

Open Google Chrome browser. From the top menu select More Tools > Developers tools.

To turn on Device Mode, click on the Toggle device mode icon present at the top left section of the Developer tools. When device mode is enabled, the icon turns Blue and the viewport transforms into a device emulator.

Click on the dropdown present next to the Device label (present at the top-left section of the page).
This dropdown has a list of devices available to emulate. Select the device as per your requirements.

Select the Apple iPad option from the devices menu then enter the Portal URL in the browser address bar, for example https://www.apple.com and hit enter. The view will change to emulate an iPad environment.

We can select multiple device options present in the Devices section to emulate the specific device environment. This will help us to test and verify the appearance of the portal in a specific environment.

Portal Appearance in Samsung Galaxy Note (Emulated using Google Chrome)