I am creating a mobile version of my web site. It is nothing fancy, just a few pages. I would like to be able to share the content in both form, without having to update it in two places. Is the easiest way to do this with CSS? Or can I create some sort of XML or text file and read it in both sites?
Here is what I ended up using:
<!--[if IE]>
<link rel='stylesheet' href='ie.css' type='text/css' />
<![endif]-->
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='mobile.css' type='text/css' />
<link rel='stylesheet' media='screen and (min-device-width: 481px)' href='standard.css' type='text/css' />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
This works for:
Windows IE 8,
Windows Firefox 3.6.7,
Mac Safari 5.0.2,
Mac Firefox 3.0.6,
iPhone 4 Safari,
Android Web Browser (Emulator)
You have to put everything in this order otherwise it will not work. You also have to make sure that the standard.css has all the same CSS attributes as the mobile.css. For instance, if in mobile you say #myitem { border:1px solid black; } but you do not want a border for #myitem in the standard view, you have to put #myitem { border:none; } inside standard.css, otherwise Mac Firefox will pick up the value from the mobile.css file and show a border on the item.
CSS is your best bet.
By using media queries you can decide which stylesheet to use to display your content.
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
This link may help you: http://css-tricks.com/resolution-specific-stylesheets/