Creating a custom device in Google Chrome DevTools
Create a Xiaomi Mi Note 10 Pro emulated device
1 min read
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).
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
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