Chrome Dev Tools has “Toggle Device Toolbar” option to show current webpage in mobile and/or responsive way. Even has a shortcut for it (Ctrl+Shift+M).

I have Oneplus 7 smartphone and I want to know how my website looks like in my mobile phone. Rather than opening a chrome on my phone to debug my website, I intended to use chrome dev tools on my pc. However I couldn’t manage to get same preview as my mobile device show. Some google searches and trial and errors later i got the same result on my pc finally.

After toggling dev tools to responsive view there exist some predefined devices. However not all devices are included. In order to add your own custom device dropdown the responsive toolbar and click edit. Add custom device under the Settings > Devices > Emulated Devices according to below settings for Oneplus 7.

Although Oneplus 7 resolution is 1080 x 2340 pixels, you need to set width and height to 410 x 860 pixels and whatever you want for device pixel ratio. (Typically 2)

Chrome dev tools oneplus 7 emulator settings

I have tried multiple device pixel ratio like 1, 2, 3. All of them “in my case” output the same result.

Here is a detailed explanation on device pixel ratio.