I want to change my web page CSS for web browsers running on cell phones, like the iPhone and Android. I've tried something like this in the CSS file:
@media handheld {
body {
color: red;
}
}
But it doesn't seem to have any effect, at least on the iPhone. How can I write my CSS to work differently on the iPhone etc, ideally without using javascript?
You can use @media queries:
<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/>
This particular version will target the iPhone (and any other device with a screen of max-device-width of 480px.
Apple, for the iPhone, though this is from memory so I can't be entirely sure of its accuracy, chose to disregard the use of handheld or mobile stylesheets, since it, and other iOS devices, were capable of rendering css more or less on a par with desktop browsers, via Safari. For other devices I'm unsure, exactly, how faithful they are, though the A List Apart article (linked-to above) gives a brief run-through of some.
Hmm, it looks like a lot of new mobile devices have higher resolutions (e.g. droid X is 854x480). Is there any way to detect those? I don't think those are being handled with this query.
I'm unable to say for certain, since I've no access to those devices, however another A List Apart Article: Responsive Web Design notes that:
Thankfully, the W3C created media queries as part of the CSS3 specification, improving upon the promise of media types. A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work. For example, following the recent rise of mobile WebKit, media queries became a popular client-side technique for delivering a tailored style sheet to the iPhone, Android phones, and their ilk.
So I presume that they, Android devices, must be target-able by @media-queries, but, as noted, I'm unable to say with any certainty.
To target device-resolution, there is an example of:
<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.
From this site there are a few other media queries that are useful in targeting iPhones/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's 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 was able to successfully use the max-device-width media query to successfully target Android phones, although I had to adjust the width up to 800px rather than the 480 listed. For iPhone 4, the -webkit-min-device-pixel-ratio worked to target the iPhone4 (max-device-width: 480px did not, I presume that will target the iPhone3 but didn't have one handy to test.)
I can see this getting quite messy, but if you have to support a multitude of devices and have custom CSS for each of them, as long as they support media queries it appears as it is possible to do what you have to to tweak each platform. And yes, I would code to standards first, so that as much CSS is resuable, but many times we are talking about presenting alternate layouts these days sized appropriately for the devices being used.
@media handheld refers only to those ancient tiny proto-html cellphones from years past which couldn't even really display web pages. The ePUB, MOBI, Tablet, community of vendors all said emphatically "H*ck no, we are not @media handheld devices!" because they were correctly worried that this would land them forever in a no-man's land subservient 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 displays with relatively low resolution vs. small displays with very high resolution. And as a certified old fart my eyes would like to remind you that no, the answer is not just to make everything including fonts 2X smaller.
Look at using the media query 'hover'.
Put this in your SCSS file:
// At this point the CSS would target screens above 990px - but only
// if they support hover (i.e. laptops, PC's 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 running grunt etc on the SCSS this will produce CSS looking like:
@media (min-width: 991px) and (hover: hover) {
color:red;
}
