Creating a custom device in Google Chrome DevTools

Creating a custom device in Google Chrome DevTools

Create a Xiaomi Mi Note 10 Pro emulated device

Google Chrome's DevTools has the option to view your webpage on an emulated mobile device under Inspect Element > Toogle Device Tool Bar (2nd option on top left hand corner).

devices

If you want to add your own device, say for example, Xiaomi Mi Note 10 Pro (which was breiefly available in the EMEA region in early 2020) which has a reolution of 1080 x 2340 pixels, 19.5:9 ratio (~398 ppi density), we need to find the DPR or Device Pixel Ratio. Click on Edit.

Long story short : Magic number is 150. : https://stackoverflow.com/a/23958504/126833
Device Pixel Ratio = PPI Density / 150.

So for Mi Note 10 Pro, the DPR is 398 / 150 = 2.6533

devices

So the width of the width and height that you need to give in the Device's width and height textboxes shouldn't be 1080 and 2340 but 1080 / 2.6533 and 2340 / 2.6533 respectively. Which equates to 407 x 882