How to Get Mobile Specs for Chromes's Dev Tools Emulated Devices?

4
votes

I'm adding new devices to Chrome's dev tools emulation area, but I'm confused about where to get the device specs to be entered.

For example, I would like to add an iPhone 11 device to be emulated. Google led me to a site that provides the following iPhone 11 data to be entered in the "Add Custom Device" form:

[SITE "A"]

Width: 414 px
Height: 896 px
Device Pixel Ratio: 2
Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Mobile/15E148 Safari/604.1

However, Apple's website has the following specs for iPhone 11:

[Apple.com]

Width: 2.98 in 
Height: 5.94 in 

And gives a pixel resolution as: 1792‑by‑828‑pixel resolution at 326 ppi

So if I wanted to add this device, how would I get the correct information to add into Chrome's Dev Tools "Add Custom Device" section within Emulated Devices?

Likewise,

1. How do I convert Apple's specs to verify if Site "A"'s data is correct? It looks like the iPhone 11's height is actually 1792 px (apple.com data above) versus Site "A's" 414 px, correct?

2. Where did the "Device Pixel Ratio" come from? Is it just a straight conversion from ppi's using: 96 ppi == DPR of 1?

3. Is there a site/service to go to obtain a list of accurate updated data on modern devices to create emulators off of?

Thanks for your help in advance!

1
iphonetestinggoogle-chrome-devtools

1 Answers

0
votes

I've found https://pixplicity.com/dp-px-converter to do the conversion.

1. You are mixing up the height and the width. The height 1792 px = 896.00 sp (scale-independent pixel) and the width 828 px = 414 sp.

2. The magic number in this formula seems to be 160 (If someone knows where this comes from, please explain) You can get the DPR by using this formula: DPR = DPI/160.

3. No site that I know of has all these calculations done for you, but with https://pixplicity.com/dp-px-converter you can fairly easy do it yourself.