Question

我正在创建我的网站的移动版本。它没什么特别的，只有几页。我希望能够以两种形式共享内容，而无需在两个地方更新。用CSS做最简单的方法吗？或者我可以创建某种XML或文本文件并在两个站点中读取它吗？

以下是我最终使用的内容：

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

这适用于：

Windows IE 8， Windows Firefox 3.6.7， Mac Safari 5.0.2， Mac Firefox 3.0.6， iPhone 4 Safari， Android Web浏览器（模拟器）

你必须按照这个顺序放置所有内容，否则它将无效。您还必须确保standard.css具有与mobile.css相同的所有css属性。例如，如果在移动设备中你说#myitem { border:1px solid black; }但你不想在标准视图中使用#myitem的边框，则必须将#myitem { border:none; }放在standard.css中，否则Mac Firefox将从mobile.css文件并在项目上显示边框。

Answer 1

CSS是你最好的选择。

通过使用媒体查询，您可以决定使用哪个样式表来显示您的内容。

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

此链接可以为您提供帮助：http://css-tricks.com/resolution-specific-stylesheets/

Answer 2

如果您真的想要分享页面的整个内容，并且只是定位和设置不同的内容，那么CSS是您最好的选择。如果你想提供一个“移动优化”的页面版本，显然CSS不会让你做很多事情。在这种情况下，有很多选项，例如将真正多余的“内容”存储在数据库或静态文件中，并通过PHP或等效文件生成包含相关数据的页面，或者对源XML文件执行相同操作并生成该页面通过XSLT。

在Web和移动网站之间共享内容

2 个答案: