Chrome DevTools: Adding Samsung M21 as new mobile

Last updated on 15 Apr. 2024

https://blisk.io/devices/details/galaxy-s21 gives some useful info. about Samsung S21 mobile which may be similar for Samsung M21 mobile. The key info. it provides is:

• Screen Size: 1080px x 2400px
• Viewport Size: 360px x 800px
• Device Pixel Ratio: DPR 3

It provides useful background  info. about the above. Screen Size is in physical pixels, Viewport size is in 'software pixels', Device Pixel Ratio or CSS Pixel Ratio is the ratio between physical pixels and viewport/software/CSS pixels. 

Interestingly, I could now match the preset iPhone SE mobile of Chrome DevTools with the specs. of iPhone SE on the net.

• https://www.apple.com/in/iphone-se/specs/ states, "1334x750-pixel resolution at 326 ppi".
• https://blisk.io/devices/details/iphone-se-2022 gives a screen size of "750px × 1334px", viewport size of "375px × 667px" and DPR of "2".
• Chrome DevTools shows "Dimensions" for "iPhone SE" as 375 x 667. If 'Add device pixel ratio' command is chosen from the vertical 3 dot menu, then it shows "DPR: 2.0".

So now I tried "Dimensions" for "Samsung M21" as 360 x 800 and specified DPR as 3. With these settings, the display for both portrait mode and landscape mode of Chrome DevTools simulator is much more closer to, but not exactly same as, the physical Samsung M21 mobile. Clearly this is a great improvement over the 412x892 setting I was trying earlier (see below for background on it).

...

https://www.whatismyscreenresolution.org/ seems to be helpful to figure out mobile phone resolution. For my Samsung M21 it gives the resolution as 412x892. 

But https://www.samsung.com/levant/smartphones/galaxy-m/galaxy-m21-black-64gb-sm-m215fzkumid/#specs gives the resolution as: 2340 x 1080.

For adding Samsung M21 as new mobile in Chrome DevTools the above 2340x1080 (or 1080x2340 for portrait mode) did not work out. I could not figure out the device pixel ratio stuff. So I used a quarter of above resolution: 270x585 but that did not match the content width for my app on Samsung M21 mobile.

Now I plan to try 412x892 with device pixel ratio as 1 (default value, if I recall correctly). Update: IFIRC, these specifications did not result in even closely matching display on physical mobile and Chrome DevTools mobile simulator.