使现有网站适合移动设备[关闭]

Question

所以我计划让现有的网站适合移动设备。好的部分是它完全基于文本，并带有一些图像，这些图像可能会从网站的移动版本中省略。

不好的部分是，它是一个非常复杂的网站，有大量页面（每个页面都可能根据数据和访问该网站的用户而有所不同），其中很多也是遗留代码（例如，旧的 html ）未验证）

所以我想知道制作适合移动设备的网站的最佳策略是什么？创建并行版本是不可能的，因为这将是一项巨大任务

单独的 CSS 是显而易见的。但是，为移动设备设计的最佳实践/指南如何才能确保网站可用且看起来不错呢？

供参考，后端是 PHP + MySql ，前端是 htmls + CSS 和一些 JS（JS 是可降解的）

编辑：更清楚地说，我想了解设计方面的建议。移动设备设计有哪些良好实践？

Answer 1

移动设计的一些快速技巧：

• 只能垂直滚动，不能水平滚动。
• 使链接足够大，以便用手指轻松按下（如果是触摸屏设备）。
• 保持页面较小（最好小于 20KB）- 包括任何图像或 css 文件
• 接受某些设备会以不同方式呈现某些元素
• 确保您的 XHTML 有效
• 选择即使在明亮的日光下也能使用的配色方案
• 仅包含相关内容 - 充分利用有限的屏幕空间
• 尝试避免复杂的导航
• 不要在 CSS 中使用绝对大小
• 使用最少的 CSS 和 Javascript - 使用时进行彻底测试
• 利用手机的部分功能（点击通话等）
• 动员起来，而不仅仅是最小化
• 尽可能避免用户输入（如果可能，从下拉列表中选择优于输入文本）
• 测试，测试，测试！ （首先使用模拟器，然后借用朋友和同事的手机来进行各种测试）
• 针对短期用户交互进行设计 - 让用户快速轻松地完成任务。
• 保持一致 - 遵循设计指南和事实上的标准
• 使用链接的快捷键

希望这些有帮助。

Answer 2

iPhone具体答案：

对于iPhone，我会选择不优化。 iPhone 版 Safari 非常能够按原样显示网页。检查此答案和问题，了解有关 iPhone 优化的更多信息。

一般答案：

我同意欧元先生的技术优化观点。在设计方面，您必须考虑小分辨率（例如 320x240）。我会保留下拉菜单或任何花哨的 JavaScript 代码。 大多数移动设备不太擅长处理脚本，并且往往会变得缓慢。

Answer 3

如果您设法将网站转换为 W3 验证的 XHTML 1.1，那么它将在手机浏览器中正确呈现。

Answer 4

您可以尝试设置另一台服务器，将来自移动浏览器的请求代理到真实服务器，并将它们提供给诸如

tidy

之类的程序，该程序可以从相当丑陋的 HTML 构建有效的 (X)HTML。这可以让您在完全不做任何改变的情况下使用现有服务，但需要支付一定的处理成本。

您可以在这里找到一个小型 ruby 示例（它使用本地代理）。

Answer 5

我认为你必须在这里说得更具体。普通手机的移动浏览器非常原始。如果你瞄准他们，你必须确保没有什么“困难”的事情。该页面基本上应该只是带有全角图像的短文本。

如果你的目标是iPhone/任何触摸设备，你只需要删除flash/java、悬停和其他你很可能根本没有的不可触摸的东西。 Mobile Safari 真的就像他的大哥一样，你真的不需要任何具体的东西。

对于黑莓之类的东西，我不确定，但请查看 wsj 移动网站 作为示例。