How to set up iPhone 3GS and iPhone 4 in one media request?

Question

I am trying to implement alternative layouts for both iPad / iPhone and older iPhone.

I found that the best method is to use @media from the CSS3 specification.

As such, these are my media queries per minute:

 @media screen and (max-width: 1000px) { ... } 

Above is for small screens for desktops and laptops.

 @media screen and (max-width: 700px) { ... } 

Above for iPad and VERY small screens for desktops / laptops.

 @media screen and (max-device-width: 480px) { ... } 

Above for iPhone 3GS and mobile devices in general.

However, the new iPhone 4 with the stylish Retina show Steve Jobs means it has a 2-1 pixel ratio, which means that 1 pixel actually appears in the browser as 2x2 pixels, which makes it resolution (960x640 is means that this will lead to the planning of the iPad, and not to the layout of the mobile device), so this requires another multimedia request (so far only webkit is supported):

 @media screen and (-webkit-min-device-pixel-ratio: 2) { ... } 

So the thing is ... I want my beautiful shiny new iPhone 4 layout to be combined with the iPhone 3GS and the layout of mobile devices, because they will both have the same internal CSS code,

Therefore, I ask the question:

How to create an @media rule that points to the iPhone 4, 3GS and other mobile phones with the same styles?

Answer 1

Since iPhone and iPod touch measure max-device-width in logical pixels and not in physical pixels even with a Retina display (as it should be), the original media query used for the iPhone should be enough:

 @media only screen and (max-device-width: 480px) { /* iPhone CSS rules here */ } 

You only need (-webkit-min-device-pixel-ratio: 2) if you need to target the Retina display separately.

Answer 2

BoltClock's answer seems to me very enjoyable at the moment.

However, thinking in the future, if Apple (or another manufacturer) releases another device with a pixel ratio of device 2, this media query will be used for this device as well.

I don’t think it is possible that this will happen, and that the new device may have a much larger screen, such as an iPad with a retina display.

To make this request applicable only to the iPhone 4 and previous iPhone (and any other device of a similar size)

 @media screen and (max-device-width: 480px), screen and (max-device-width: [[IPHONE_4_WIDTH]]px) and (-webkit-min-device-pixel-ratio: 2) { /* iPhone CSS rules here */ } 

Not sure [[IPHONE_4_WIDTH]] right now - I don’t have it, and some sites say 480 , some say 960 . Try replacing both. (And let me know what you find :))

Answer 3

I was looking for a way to customize the iPhone 3 / 3GS to the second part of the query. The most acceptable solution I found is to adapt media queries to the fixed parameters of iPhone 3.

 @media only screen and (device-width:320px) and (device-height:480px) and (-webkit-device-pixel-ratio: 1) { ... } 

To work with this request, you need to use the Safari view tag metafile to fix the browser to 100% with the following:

 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

There are a small number of Android phones that will also be picked up by this request. In the Android Market, showing 18.4% of active phones in a potential screen size of 320x480, only a subset of this will correspond to the pixel ratio of the device in the webkit browser. Not perfect, but better than nothing.

Lists of telephone permissions

• A bit dated but thorough: http://cartoonized.net/cellphone-screen-resolution-by-size.php
• Only 3 potential matches listed here: http://en.wikipedia.org/wiki/Comparison_of_Android_devices
• Android Market Weekly Snapshot: http://developer.android.com/resources/dashboard/screens.html

All information was considered as the date of publication.

Also to comment mernen # 2 his post here includes documents for target Android devices in pixel density: http://developer.android.com/guide/webapps/targeting.html#DensityCSS

Answer 4

I'm not sure I'm following your question. Have you tried your inquiries on the iPhone 4? device-width is measured in logical pixels, not physical ones, so iPhone 4 still meets the criterion max-device-width: 480px.

The same goes for high-end Android smartphones with a pixel ratio of 1.5: Nexus One has a physical screen of 480x800, a logical screen of 320x533.