Compartir contenido entre la web y el Sitio Web Móvil

Question

Estoy creando una versión móvil de su página web. Es nada lujoso, sólo unas pocas páginas. Me gustaría ser capaz de compartir el contenido tanto en la forma, sin tener que actualizarlo en dos lugares. Es la forma más fácil de hacer esto con CSS? O puedo crear algún tipo de XML o de texto del archivo y lo leyó en ambos sitios?

Esto es lo que terminé usando:

<!--[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;"/>

Esto funciona para:

Windows Internet Explorer 8, Ventanas de Firefox 3.6.7, Mac Safari 5.0.2, Mac Firefox 3.0.6, iPhone 4 Safari, Android del navegador web (Emulador)

Hay que poner todo en este orden de lo contrario no funcionará. También hay que asegurarse de que el standard.css tiene todos los mismos atributos CSS como el mobile.css. Por ejemplo, si usted dice en el móvil #myitem { border:1px solid black; } pero que no quiere una frontera para #myitem en la vista estándar, usted tiene que poner en el interior #myitem { border:none; } standard.css, de lo contrario Mac Firefox recogida voluntad el valor del archivo mobile.css y muestran una frontera en el artículo.

Answer 1

CSS es la mejor opción.

Mediante el uso de preguntas de los medios que pueda decidir cuál de estilo a utilizar para mostrar su contenido.

 <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' />

Este enlace puede ayudarle a: http://css-tricks.com/resolution-specific -stylesheets /

Answer 2

Si realmente desea compartir todo el contenido de la página y sólo tienen cosas posicionados y estilo diferente, CSS es su mejor apuesta. Si desea servir una versión "optimizado para móviles" de la página, obviamente, CSS no le permite hacer mucho al respecto. En ese caso, hay una gran cantidad de opciones, tales como almacenar el verdadero carnosa "contenido" en una base de datos o archivos estáticos y generar una página con los datos pertinentes a través de PHP o equivalente, o hacer lo mismo con un archivo XML de origen y generar a través de la página XSLT.