Question

I have a web page for which I made two css files, one for desktop browser and another for iphone.
I do it something like this:

<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="/css/main.css" media="screen,projection,print" />
<link rel="stylesheet" href="/css/mobi.css" type="text/css" media="only screen and (max-device-width: 480px)" />

On a desktop it works fine, but on iphone I Have some strange behavior, it looks like it loads both files and rules conflict with each other. If I comment out second line (main.css) it works fine on iphone.

so how can I hide it?
thanks

Answer 1

Ok, I found a solution and it is actually quite simple, just need to use media querys. Something like this:

<link rel='stylesheet' media='screen and (max-width: 480px)' href='css/mobi.css' />
<link rel='stylesheet' media='screen and (min-width: 481px)' href='css/main.css' />

<meta name="viewport" content="width=device-width" />
<meta name="HandheldFriendly" content="true" />

We can change width depending on target device. It works fine on iphone (and most of other smartphones) and also works in all desktop browsers apart from our beloved IE:) to fix this issue just add:

<!--[if IE]>
    <link rel="stylesheet" href="css/main.css" media="all" />
<![endif]-->