4

How do I make media queries for the different mobile browsers (like Opera Mobile and Firefox) on the Android? The CSS really breaks when I use certain browsers.

1
  • 1
    I think your question is really too wide. There are a number of articles on media queries on dev.opera.com/articles/tags/media%20queries for instance, but it's probably best if you post in specific more specific terms what your problem is. Commented Aug 1, 2011 at 0:09

1 Answer 1

5

You can't directly wit CSS, but you can use

// 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
}

also you can define in HTML

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" />
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="css/mobile.css" type="text/css" />
<link rel="stylesheet" media="only screen and (min-resolution: 300dpi)" href="css/mobile.css" type="text/css" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.