vendredi 24 avril 2020

How to get/calculate Data for Chromes's Dev Tools Emulated Devices?

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!

Aucun commentaire:

Enregistrer un commentaire