# Creating a custom device in Google Chrome DevTools

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).

<img src="https://anjanesh.s3.amazonaws.com/blogs/images/devices.png" alt="devices" style="width:308px; height:640px" />

If you want to add your own device, say for example, <a href="https://www.gsmarena.com/xiaomi_mi_note_10_pro-9945.php" target="_blank">Xiaomi Mi Note 10 Pro</a> (which was breiefly available in the EMEA region in early 2020) which has a reolution of <b>1080 x 2340 pixels, 19.5:9 ratio (~398 ppi density)</b>, we need to find the DPR or Device Pixel Ratio. Click on Edit.

Long story short : Magic number is 150. : <a href="https://stackoverflow.com/a/23958504/126833" target="_blank">https://stackoverflow.com/a/23958504/126833</a><br/>
Device Pixel Ratio = PPI Density / 150.

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

<img src="https://anjanesh.s3.amazonaws.com/blogs/images/add-custom-device.png" alt="devices" style="width:500px;" />

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 <strong>407 x 882</strong>