0

I'm trying to get my site to operate differently depending on if the browser is a phone or a computer etc... I understand that this is most likely done using the sites.php file but I've been unable to get this working, and have an open question on SO about it.

Broad Question

This question is a little more specific and is to tied me over while I battle the broader issue out. I would like to remove the current background image when a mobile browser turns up. I thought something like the following would do it (same CSS file)

body {
 background-color:blue;
}

@mobile {
 body {
 background-color:green;
 }
}

but this doesn't appear to make any difference when using my HTC desire using Dolphin.

2 Answers 2

1

two things:

  1. Why not keep things neat by creating a new stylesheet and putting the css media rule in the .info file?
  2. If you're thinking of @media queries, that syntax isn't right.. maybe you're thinking of @media handheld { /* rules */ }

have a look here - http://www.w3.org/TR/CSS2/media.html

regardless, I know the question referenced the HTC desire but I thought I'd warn you that iPhones ignore @media handheld and use @media screen instead, so you need to do something like this:

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

Courtesy of Smashing Magazine - http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

1

I use Omega for that.

It's based on CSS media queries.

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.