Do iPhone / Android browsers support CSS @media handheld?

user_13500 0
Viewed 71908

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?

media android css iphone
5 Answers

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.

user_2284290

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;
}
user_47972080
Related