Monday, January 6, 2014

I've looked through the stack overflow topics on this question, as well as some google search results but I can't seem to solve my issue.
I've created a stylesheet for mobile devices(mobile.css) which is essentially a copy of my main.css with changes to many of the attributes. When I load only mobile.css as the stylesheet it looks great on my iPhone, just how I want it to. However when I put both in, I am getting a mix of both, but more of the main.css
Any idea why?

 rel="stylesheet" href="styles/main.css" type="text/css" media="screen" />
 rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' />
 name="viewport" content="width=device-width, initial-scale=1.0" />
share|improve this question
 
How do you "put both in"? –  Blender Sep 20 '11 at 3:47
 
My code isn't showing up for some reason when I posted it... Could you look at the source at: www.cuhvz.com/sandbox/home.php –  xIlluzionx Sep 20 '11 at 4:13
 
Fixed it. It should work now. –  Blender Sep 20 '11 at 4:14
add comment

4 Answers

up vote20down voteaccepted
According to documents, syntax of loading another file in specific device/condition is like this:
 name="viewport" content="width=device-width, initial-scale=1">
 rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
 rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />
This will only one css file for every single amount of width
For iPhone 4 and new generation iPod touch that have Retina display there is something that you should note. iPhone 4 width is 640 pixels that many developers don't count this width as a mobile browser width. If you add this below meta tag in your document problem will be solved
 name="viewport" content="width=320">
This meta tag will impact your images quality. If you want to fix that problem then you need to read about this here.
share|improve this answer
 
Sorry, none of the markup got posted for some reason, perhaps I forgot to format it as code. (www.cuhvz.com/sandbox/home.php) –  xIlluzionx Sep 20 '11 at 4:11
 
You need to add media="screen and (min-width: 480px)" to your main.css –  Mohsen Sep 20 '11 at 4:17 
1 
Doing the first thing you said worked! –  xIlluzionx Sep 20 '11 at 4:31
 
Added  - people coming to this answer from Google and copy-pasting blindly - without this line the code doesn't work well. – ripper234 Jul 1 '13 at 17:11
add comment
Its hard to know without any markup but i'm guessing you should do something like:
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
 rel="stylesheet" href="base.css" /> // has all the common classes
 rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 320px)" />
 rel="stylesheet" href="largescreen.css" media="screen and (min-device-width: 321px)" />
share|improve this answer
 
Sorry, none of the markup got posted for some reason, perhaps I forgot to format it as code. (www.cuhvz.com/sandbox/home.php) –  xIlluzionx Sep 20 '11 at 4:10 

No comments: