Writing differnet css files for different screen sizes and mobile devices

Question

I have been trying to figure this issue all day and haven't got it yet:

I want to have these 3 css files:

• lowerThan960pxForDesktop.css (for fluid layout)
• MobileLandscape.css (iphone 960px android 800px etc.)

• MobilePortrait.css (iphone 640px android 480px etc.)

• I want that the Lanscape.css will use the desktop.css

• I want that the Portrait.css will use both the desktop.cssand the Landscape.css

how should my HTML should look like in order to get that right - using media queries or javascript. I have gone over through this a lot of time and each time something goes wrong (either the desktop gets the mobile.css or either the iphone read the Portrait.css even that it is in landscape mode etc.).

Answer 1

maybe the Iphone problem is related to the known viewport width problem? solved with adding this to the html.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

besides that use media queries to call the css. and in the css file call @import to call the referring css file (e.g landscape would @import desktop etc)

media queries 101:

<link href="css/phone.css" rel="stylesheet" type="text/css"
media="only screen and (max-width: 400px)" >

and more information about the rich world of media queries here.

also adviced to use conditional IE comments to hide the media queries from older IE and let it use just one kind of css

edit: ah I now understand the problem - you need to use different css in different Iphone situations.. you could use jquery mobile and bind a css class change acording to the change from portrait to landscape and back.

hope this helps