Partager du contenu entre le site Web et le site Web mobile

Question

Je crée une version mobile de mon site Web. Ce n'est rien d'extraordinaire, juste quelques pages. Je voudrais pouvoir partager le contenu dans les deux formes, sans avoir à le mettre à jour à deux endroits. Est-ce le moyen le plus facile de le faire avec CSS? Ou puis-je créer une sorte de fichier XML ou texte et le lire dans les deux sites?

Voici ce que je fini par utiliser:

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

Cela fonctionne pour:

de Windows IE 8, Firefox 3.6.7 de Windows, Mac Safari 5.0.2, Mac Firefox 3.0.6, iPhone 4 Safari, Navigateur Web Android (émulateur)

Vous devez tout mettre dans thi s commande sinon ça ne marchera pas. Vous devez également vous assurer que le fichier standard.css possède tous les mêmes attributs css que le fichier mobile.css. Par exemple, si dans mobile vous dites #myitem { border:1px solid black; } mais que vous ne voulez pas de bordure pour #myitem dans la vue standard, vous devez mettre #myitem { border:none; } à l'intérieur de standard.css, sinon Mac Firefox récupèrera la valeur du fichier mobile.css et affichera un bordure sur l'article.

Answer 1

CSS est votre meilleur pari. En utilisant des requêtes média, vous pouvez décider quelle feuille de style utiliser pour afficher votre contenu.

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

Ce lien peut vous aider: http://css-tricks.com/resolution-specific-stylesheets/

Answer 2

Si vous voulez vraiment partager tout le contenu de la page et juste des choses en place et au style différent, CSS est votre meilleur pari. Si vous voulez proposer une version "optimisée pour les mobiles" de la page, il est évident que CSS ne vous laissera pas faire grand-chose à ce sujet. Dans ce cas, il y a beaucoup d'options, comme stocker le vrai contenu dans une base de données ou des fichiers statiques et générer une page avec les données pertinentes via PHP ou équivalent, ou faire la même chose avec un fichier XML source et générer la page via XSLT.