Do iPhone / Android browsers support CSS @media?

Question

I want to change my CSS webpage for web browsers running on mobile phones such as iPhone and Android. I tried something like this in a CSS file:

@media handheld { body { color: red; } } 

But this does not seem to have any effect, at least on the iPhone. How can I write my CSS to work differently on iPhone, etc., Ideally without using javascript?

Answer 1

You can use @ media queries :

 <link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/> 

This particular version is for iPhone (and any other device with a max-device-width screen of 480px .

Apple, for the iPhone, although it’s from memory, so I can’t be completely sure of its accuracy, decided to ignore the use of handheld or mobile stylesheets, since these and other iOS devices were able to render css more or less on par with desktop browsers via Safari. For other devices, I'm not sure how true they are, although the A List Apart article (linked to above) gives a brief overview of some of them.

---

Edited by in response to a comment from @Colen:

Hmm, it seems like many newer mobile devices have higher resolution (e.g. droid X - 854x480). Is there any way to detect them? I do not think that this issue is being handled with this question.

I can’t say for sure since I don’t have access to these devices, however another A List Apart Article: Responsive web design notes that:

Fortunately, the W3C created media queries as part of the CSS3 specification, improving the promise of media types. A media query allows us to orient not only certain classes of devices, but also actually check the physical characteristics of the device that provides our work. For example, after the recent growth of mobile WebKit, media queries have become a popular client-side method for delivering a personalized style sheet to iPhone, Android phones, etc.

So, I assume that they, Android devices, should be targeted to the target by @ media requests, but, as already noted, I can’t say with certainty.

An example is given for the target resolution of the device:

 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" /> 

Further reading: W3 candidate recommendation for media queries .

Answer 2

There are several other media queries from this site that are useful when setting up your iPhone / Android phones:

  // target mobile devices @media only screen and (max-device-width: 480px) { body { max-width: 100%; } } // recent Webkit-specific media query to target the iPhone 4 high-resolution Retina display @media only screen and (-webkit-min-device-pixel-ratio: 2) { // CSS goes here } // should technically achieve a similar result to the above query, // targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi) @media only screen and (min-resolution: 300dpi) { // CSS goes here } 

I managed to successfully use the max-device-width multimedia request for a successful target Android telephony, although I had to adjust the width to 800 pixels rather than 480. For iPhone 4, the -webkit-min-device-pixel-ratio worked to aim at iPhone4 (there was no max-device-width: 480px, I suppose it would target iPhone3, but it would not be convenient to test.)

I see that this is getting rather messy, but if you need to support a lot of devices and have custom CSS for each of them while they support media queries, it looks like you can do what you need to configure each platform. And yes, I would first have to code the standards, so CSS would be resuable, but many times we talk about presenting alternative layouts these days, corresponding to the sizes for the devices used.

Answer 3

@media handheld refers only to those ancient tiny proto-html-cell phones over the years that couldn't even display web pages. In ePUB, MOBI, tablets, the seller community, everything is underlined with "H * ck no, we are not @media handheld devices!" because they were rightly worried that this would lead them to forever in no man’s land subject to "real" web pages.

With today's small devices with very high resolution displays, we still don't have a good way to tell HTML how to display things “correctly” on large relatively low resolution displays and small very high resolution displays. And, as a certified old fart, my eyes would like to remind you that no, the answer is not only to do everything, including 2 times less fonts.

Answer 4

No, neither iPhone nor Android browsers support CSS @media handheld .

Answer 5

Look at using a data transfer request.

Put this in your SCSS file:

 // At this point the CSS would target screens above 990px - but only // if they support hover (ie laptops, PC etc). $point-at-which-use-large-screens: (min-width 990px) (hover hover); .some-class-you-want-to-target { // Some CSS to only apply to larger screens with mouse available. @include breakpoint($point-at-which-use-large-screens) { color: red; } } 

After starting grunt, etc. on SCSS, this will cause the CSS to look like this:

 @media (min-width: 991px) and (hover: hover) { color:red; }