Is there a standard webpage resolution for mobile phones?

Question

Most designers use 1024x768 as a baseline for website development. That allows them to use css grid systems like 960 & blueprint to easily outline content. Is there simila

Answer 1

yes there are 1024 x 960 x 800 x 768 x 640 x 480 x 360 for resposive web design sizes - better to go with percentages for avod this

Answer 2

You can

1. get the screen sizes for the devices you plan to support,
2. Create say, 2-3 versions of your site and detect useragent string and direct user to one of these sites.

With android, iphone and blackerry devices there is not large difference in a screen sizes. With a litle foresight and design you may be able to have all these handset work on one mobile website (for example it would be fair to say that the width would be 240 pixels or greater and design accordingly)

However if you plan to go further than there these platforms there is a world of hurt awaiting you, (J2ME, BREW, Symbian, WinMo and 120x160, 176x220 screen sizes etc)

Answer 3

if you are using apache ApacheMobileFilter can help to determine the actual device screen size

Answer 4

I've found https://www.mydevice.io/#compare-devices to be the best site for determining this kind of thing. I was looking for the same and found this question via a Google Search, but most of the other websites mentioned above give you device pixels, not CSS/JS pixels, which is all that really matters in web development.

Sure, an iPhone 8 Plus may have 1080 actual pixels across its narrowest axis, but that is completely irrelevant to the topic at hand, considering that those pixels are much, much smaller than your HD TV for example. I wanted to measure the width of the display in relation to how a browser actually renders a mobile site and mydevice.io gives you that, as well as the physical dimensions. Win win! ;-)

Answer 5

320 by 480 is the common screen resolution for new mobile devices.

iPhone Website Compatibility

Android Display Metrics

That being said if you want to support the majority of mobile devices, you may want to support multiple resolutions.

Answer 6

I write games for mobile devices. In my code I position everything by percentage as it will always be the same, plus I also use a var to adjust how many pixels they have then set my resolution to suit You can do pretty much the same with css and a few different image size's in your resources.