What resolution should the mobile site optimize?

Question

I'm having trouble understanding how mobile resolution works. From what I know, the standard resolution of a mobile phone is 320 pixels. The problem seems to be related to the iPhone 4, which apparently has a screen resolution of 640 pixels wide, but it still displays a network of 320 pixels.

What is the solution here? Am I encoding 2 different resolutions for screens of 320 pixels and 640 pixels? How to make iPhone 4 display 640px website?

Answer 1

Well, basically, as you noticed, the resolution of the iPhone 4+ is 640 pixels, but the browser only displays 320 pixels for several reasons. Check this answer to find out more about how this happens: 320 pixels resolution for web applications

It also suggests that you can specify a viewport for the website to make it visible in 640px on the iphone, but that you shouldn't, but just double the resolution on the image you're using.

Answer 2

I found sites with a minimum width of 320 pixels will look good on most high-end mobile devices such as iPhone, Android and Nokia N97. Some of the screen resolutions of the most popular devices:

"iPhone 320 x 480"

"iPhone 4 320 x 480 (scaled 2 times)"

"HTC Legend 320 x 480"

Answer 3

Or you can use an adaptive layout, for example, used on this website (try reducing the width of your browser window to see the adaptation of the website). This design is also discussed in this post.

Or you create separate layouts for different resolutions together using multimedia queries .

Answer 4

Since the number of pixels doubled from iPhone 3 to iPhone 4, this would mean that every site optimized for iPhone 3 would be ... tiny on the display. Thus, devicePixelRatio was introduced to preserve the size of websites (in mm or inches) while doubling physical pixels, effectively making images and fonts with double resolution (retina) much sharper, but preserving old fonts and CSS font sizes.

The PixelRatio device is 2: 1 on iPhone 4 and 5. This means that an image defined in css with 100100px will actually take 200x200 physical pixels. So you can css-style the page with a total width of 320 pixels; 320 dips are device independent pixels.

Please note that devicePixelRatio also exists on Android, where it ranges from 1.5 to 3.

Additional information: http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html and http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html

Answer 5

<link rel="stylesheet" media="all and (orientation:portrait)" href="/Content/portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="/Content/landscape.css"> 

This way CSS will be loaded separately for landscape and protrait.

 @media (min-width: 500px) and (max-width: 640px){} @media (min-width: 320px) and (max-width: 400px){} 

Here's how resolution will be handled.

Answer 6

The most common sizes of mobile screen are 320x240, 480x320, 800x480, 960x480, 1024x800 and 1024x768.

Answer 7

you use this line of code:

 <link type="text/css" href="css/mobile.css" rel="stylesheet" media="only screen and (max-width: 480px)" /> 

When it determines that your screen will be less than 480 pixels wide, it will use this css. If not, it will use regular css that you used before