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"/>
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
This meta tag will impact your images quality. If you want to fix that problem then you need to read about this here.
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)"/>