Menu
Toggle Device Mode in Chrome If you've never been inside Developer Tools before, click F12 or open Chrome's menu > More Tools > Developer Tools. To activate device mode, simply click the device icon in the top left corner of the Developer Tools window. Click to the icon to toggle device mode.
Hold down Shift then click and move your mouse to emulate pinch zooming.
Chrome developer tools has limited support for emulating different device states:
According to the documentation, such feature is only available when emulating “supported devices like the Nexus 5X”.
The complete list of emulated devices that support this feature can be found at Chromium devtools-frontend source-code (mirror on GitHub). Currently, it is only supported by:
Note that the emulated keyboard and navigation bar are just static pictures (as you can see at the source-code directory) and don't contain any interactive behavior. It is a good enough way to simulate the screen size, but it is not a perfect emulation.
The closest I have come is using the virtual keyboard extension from: "Chrome Virtual Keyboard"
Note: I had to set it to use the touch events when using it with a Sencha Touch app I was working on.
There are a number of others so just search for "virtual keyboard" in the chrome extensions area and pick what you like.
It seems that keybooard emulation is no more available (July 2021)
And the Chrome extensions I tested just add a keyboard but they don't simulate at all any mobile rendering.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With