Jump to content
oyb

Change css for mobile devices

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?

Share this post


Link to post
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;}

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

One thing I would recommend is having the CSS file placed in the document using PHP. Just a idea.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...