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

【问题标题】：Share Content between Web and Mobile Website在 Web 和移动网站之间共享内容
【发布时间】：2010-10-01 01:00:51
【问题描述】：

我正在创建我的网站的移动版本。没什么花哨的，只有几页。我希望能够以两种形式共享内容，而不必在两个地方进行更新。使用 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 火狐 3.6.7, Mac Safari 5.0.2, Mac 火狐 3.0.6, iPhone 4 Safari, Android 网络浏览器（模拟器）

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

【问题讨论】：

标签： css web mobile sharing

【解决方案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/

【讨论】：

谢谢，这行得通。将我的最终用法添加到原始帖子中。必须添加一个 [if IE] 因为 IE 没有选择任何一个样式表。令人震惊，我知道。
出于某种原因，Mac 上的 Firefox 正在选择 mobile.css - 有什么想法吗？
我想不到，你有网址我可以测试吗？

【解决方案2】：

如果您真的想共享页面的全部内容并且只是让内容的位置和样式有所不同，那么 CSS 是您的最佳选择。如果您想提供页面的“移动优化”版本，显然 CSS 不会让您做太多事情。在这种情况下，有很多选择，例如将真正的“内容”存储在数据库或静态文件中，并通过 PHP 或等效工具生成包含相关数据的页面，或者对源 XML 文件执行相同操作并生成通过 XSLT 的页面。

【讨论】：