Forum Moderators: bakedjake

Message Too Old, No Replies

Screen sizes of most mobiles in pixels?

Looking for what size to optimise for?

         

Mark_A

11:04 am on Feb 7, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I was talking to someone about having a narrow top sticky navbar on a site and they said they left it out of their mobile pages because of how much smaller the available space was.

That got me thinking. My Moto (7) Power has quite a large screen, it wouldn't have been a problem for me, but what about people still using the small screen of a iPhone 4 or suchlike?

What screen sizes are people designing for, and is there an agreed standard in 2020?

lammert

12:35 pm on Feb 7, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Thanks to all kind of tracking scripts this data is known in detail. Historic worldwide mobile screen sizes can be seen in this graph [gs.statcounter.com]. You can change the settings of the graph to select the specific country which you are targetting with your site.

What stunned me is the large percentage of people still using 360x640 screens.

Mark_A

12:44 pm on Feb 7, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hi Lammert, thanks for the link, I looked at UK stats and they are still quite small pixel size. I guess to be most compatible I should restrict image width to 360px for the time being, unless I can make them self adjust?

engine

1:01 pm on Feb 7, 2020 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



... still quite small pixel size.

I suspect one reason for that is people are not upgrading in the way they used to. Only when the phone breaks are you forced into a bigger screen, but its use is declining.

Different markets react differently to technology, and I still see people going round with feature phones: Admittedly, not a huge number.

not2easy

1:04 pm on Feb 7, 2020 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



unless I can make them self adjust?
Images are happy to self adjust. No need to restrict their size to some limit if you use CSS to set the maximum width to 100%:
img { max-width: 100%; }

Setting an overall container width for pages and allowing images to self adjust keeps everything in the control of the device width.

The use of the Viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1"> 
allows the device to make adjustment for their internal device pixel ratio so that css elements are not limited to fixed pixels.

topr8

11:42 pm on Feb 7, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



i think of it more in terms of columns ... and i aim to serve all cellphones a one column layout (that fills the screen) ... desktops get a three column layout, and the area in between is a bit more murky - i do have a 2 column variation.

tangor

3:07 am on Feb 8, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@lammert ... thanks for the reference.

Recent years I also use max-width since these days desktops are so large that often the user has two three or more windows running simultaneously. My max-width is pretty much whatever the MOBILE width that is prevailing, in addition to viewport...

NickMNS

5:38 pm on Feb 8, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@not2easy
img { max-width: 100%; }

Max-width 100% alone doesn't do anything. You need to set width:100%, and then you can set max-width to some pixel value if you need to restrict the width to some upper limit. In fact you don't even need to explicitly set width to 100% as it is the default. Thus using max-width: 100% alone will achieve the desired outcome, but it actually does nothing.

Here is a fiddle that illustrates this.
[jsfiddle.net...]

not2easy

6:14 pm on Feb 8, 2020 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



@NickMNS - Yes, of course. My response was to the
unless I can make them self adjust?
alone and modified by the recommendation of relying on a container for managing max width. We aren't working from any specifics so I didn't try to guess what else is there. It just seemed that it was unfamiliar as a method so I mentioned it.

In my view this is better than picking a number to aim for, as in the question:
What screen sizes are people designing for, and is there an agreed standard 2020?
as the ideal way to deal with images, but there's more than one way to do most anything we do to manage layouts and images.