OK, I know this is a really basic question so please humour me…My own phone which isn’t terribly fancy (a Nokia somethingorother) is 720 Pixels wide and 1600 pixels high. However I’ve been trying to cram my screens into 320 Pixels wide because of this image on the Responsive Screen…
This has been really difficult because it’s not much room to play with. So my question is; are phones typically 700ish pixels wide these days and, if so, what’s the 320 setting for? I’m concerned that I’ve missed something really basic about pixels and if someone can shed any light on this, I’d be very grateful.
1 Like
Well, initially it’s a bootstrap standard, I guess, and it was like that, well, I’m not sure, probably prior to 2022. At least, I did notice last year that it’s been updated and now breakpoints are 576, 768, 992 and 1200. But it’s finally up to you to determine, as you’re the only one who knows your target audience.
P.S. just googled a bit, it’s 576 since bootstrap 4 
, so it’s been extended a long time ago.
3 Likes
Thank you. This makes a lot of sense!
1 Like
Don’t confuse the physical screen resolution with the viewport size…
For example, the iPhone 13 has a physical screen resolution of 1170px x 2532px, but its viewport size is 390 x 844
So, for design purposes, you’re working with a viewport width of 390 for an iPhone 13 (and similar for most modern phones)
a viewport width of 720 would be more like a tablet.
3 Likes
Here are the viewport sizes and physical screen resolutions for 10 common small screen mobile devices:
- iPhone SE (2nd generation): Viewport size: 375 x 667 pixels Physical screen resolution: 750 x 1334 pixels
- iPhone 7 and 8: Viewport size: 375 x 667 pixels Physical screen resolution: 750 x 1334 pixels
- iPhone 7 Plus and 8 Plus: Viewport size: 414 x 736 pixels Physical screen resolution: 1080 x 1920 pixels
- iPhone X, XS, and 11 Pro: Viewport size: 375 x 812 pixels Physical screen resolution: 1125 x 2436 pixels
- iPhone XR and 11: Viewport size: 414 x 896 pixels Physical screen resolution: 828 x 1792 pixels
- iPhone XS Max and 11 Pro Max: Viewport size: 414 x 896 pixels Physical screen resolution: 1242 x 2688 pixels
- Samsung Galaxy S9: Viewport size: 360 x 740 pixels Physical screen resolution: 1440 x 2960 pixels
- Samsung Galaxy S9+: Viewport size: 414 x 846 pixels Physical screen resolution: 1440 x 2960 pixels
- Google Pixel 3 and 3a: Viewport size: 393 x 786 pixels Physical screen resolution: 1080 x 2160 pixels
- Google Pixel 3 XL and 3a XL: Viewport size: 412 x 847 pixels Physical screen resolution: 1440 x 2960 pixels
Thanks to Chat GPT3 
4 Likes
Yep, as far as I remember it’s all about physical and logical pixels (added not to forget to check this later by myself). As you can see in Chrome DevTool for iPhone 5/SE width is 320px:
1 Like
