Is there a standard webpage resolution for mobile phones?

Most designers use 1024x768 as a baseline for website development. That allows them to use css gr开发者_运维百科id systems like 960 & blueprint to easily outline content. Is there similar baseline resolution for designing for mobile phones?

The majority of users will be using iphone, android, and blackberry phones.

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.

This website is super handy. An up-to-date database of various devices and their screen specs.

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

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)

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! ;-)

Simply, no.

Lots of information here. http://www.quirksmode.org/mobile/

There are just too many devices with too many different screens to assume a common resolution. While it may be true that 320 x 480 can be found on many devices, it is by no means "common". You have to use flexible design principles and then use media queries or js detection to add a class to adjust your display to the proper dimensions. This is part of what makes mobile so difficult to wrangle right now.

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

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.