Nov 29th, 2017 Update:
Quick Update brought to you by @Howdy_McGee.
Chrome 62 you have to Add Device Type, there’s no longer an option for Show Device Type.
Why is this happening?
As Randy Hall points out below “This cursor indicates a “touch”, such as your finger, for emulating touch events in (the) Chrome browser.”
July 20th, 2017 Update: (version 59.0.3071.115) Just checking in again, looks like the below is still valid even through a bunch of Chrome updates. They have changed the wording of Show device type
to Add device type
. I’ve changed the wording below, but the image does not reflect the change.
They have also changed the way the device type
settings work, explained below.
Once in responsive mode (via F12
, then ctrl + shift + m
) you will need to select the settings section indicated by the 3 grey circles, then select Add device type
. Once you do this, a new drop down will appear next to the dimensions area, select Mobile (no touch)
. I imagine they did this so that you don’t have to keep it on desktop and adjust the user agent type
to a mobile device as I’ve described below.
What do the Device Types mean?
As of today (July 20th, 2017), the same settings for device type
exist (as shown in the image above), but they work a bit differently than previously before:
-
Mobile: Now scales the content on the page when resizing the window (to accurately simulate pixel density on a mobile device). The circle that replaces your mouse, simulates a screen touch action when clicking (full fledged mobile development / testing).
-
Mobile (no touch): Also scales the content on the page when resizing the window, but continues to use your regular mouse cursor for your click actions.
-
Desktop: Does not scale content, uses regular mouse cursor (full fledged desktop development / testing).
-
Desktop (touch): Also does not scale content, but replaces your regular mouse cursor with a circle that will simulate screen touches on click.
But I still want to emulate a specific mobile device…
There is still a way to override the user-agent with this Mobile (no touch)
setting set. When you’re looking at your console (brought up via F12
), you’ll see the 3 vertical circles there next to the console
tab, click them and bring up Network Conditions. Within this section you’ll see that User agent
is set to Select Automatically
, just turn this off and use the drop-down to change to the user-agent you want to emulate as. This will allow you to emulate as a specific mobile device.