Jump to content

Change css for mobile devices


oyb

Recommended Posts

Hi, I'm trying to get my webpage to use another CSS when you try to browse it with a mobile device. My problem is that none of the guides I can find really help me out. I've tried multiple, some easier than others. For example these two: http://www.seabreezecomputers.com/tips/mobile-css.htm and http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/ The problem is, that even though I do(at least I think I've done) what they tell me, my mobile device still reads from the original css. I thought that the problem was gonna be to get the mobile css to look good, but can't even get it to link.. Dreamweaver says both css's(5 in the other example) are linked to the html file, but mobile device refuses to read from the "media="handheld" " or "media= only screen(max-device-width:480px;)" Possible to get some help?

Link to comment
Share on other sites

Place this page, and css files styles.css, and mobile.css in same location, when seen normally through web browser the background colour should be blue, but in mobile device it will have redish background colour.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link media="Screen" href="styles.css" type="text/css" rel="stylesheet" /><link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" /></head><body><h1>Hello World</h1></body></html>

mobile.css

/* CSS Document */body {background-color:#990000; color: #fff;}

styles.css

/* CSS Document */body {background-color:#0000FF; color: #fff;}

Link to comment
Share on other sites

Thanks, that sort of works. The problem is that it loads the original css and the mobile css. For example I've got background-image in my styles.css, so when I use a mobile device I still get the background image from styles.css along with the red background. is there a way to overwrite or remove the styles.css preferences when you get on mobile?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...