使现有网站对移动设备友好[关闭]答案

【问题标题】：Making an existing site mobile friendly [closed]使现有网站对移动设备友好[关闭]
【发布时间】：2009-05-24 18:58:44
【问题描述】：

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

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

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

一个单独的 CSS 是显而易见的。但是，针对移动设备进行设计以确保网站可用且看起来不错的最佳做法/指南呢？

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

编辑：为了更清楚，我想在设计方面提出建议。为移动设备设计的良好做法是什么？

【问题讨论】：

标签： web mobile

【解决方案1】：

移动设计的一些快速提示：

希望这些帮助。

【讨论】：

【解决方案2】：

iPhone 特定答案：

对于 iPhone，我会选择不优化。 iPhone 版 Safari 非常有能力按原样显示网页。请查看this answer 和the question 了解有关 iPhone 优化的更多信息。

一般答案：

我同意 mr-euro 的技术优化。在设计方面，您必须考虑小分辨率（例如 320x240）。我会留下下拉菜单或任何花哨的javascripting。 大多数移动设备不擅长处理脚本，而且往往会变得迟钝。

【讨论】：

设计方面呢？我对设计移动设备的良好实践非常感兴趣。较大的字体，较大的导航区域，没有绝对定位。下拉而不是选项卡式导航等
我的回答是针对 iPhone 的特定考虑。您的问题可能适用于也可能不适用于 iPhone（单独）。我清楚地提到这是一个 iPhone 特定的答案。所以，我觉得很奇怪它被否决了。如果您发表评论，我会补充一点，因此会涉及更一般的问题。
+1 我在这里看不到任何值得反对的东西...
我也没有。澄清一下，我没有投反对票

【解决方案3】：

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

【讨论】：

也许是的，但是“正确渲染”和“以可读/可用的方式渲染”对于狗的早餐（即手机网页浏览）是两个截然不同的东西。这不是针对您的答案，mr-euro，而是针对手机浏览器和用户界面的遗憾状态。即使网站正确呈现，如果它有鼠标悬停、ajax、弹出窗口或其他动态元素，也可能难以访问。即便如此，手机经常会破坏页面以使其人眼可读，或者将其渲染得如此之小以至于无用。这是一个棘手的问题，可能比一个好的解决方案提前 3 年。
确实，但每个移动浏览器的状态确实超出了问题的范围。小图像，适当的语义（标题、副标题、段落等），避免使用 JS，避免使用 flash，100% 验证代码，流畅的布局，最重要的是：没有固定宽度......！

【解决方案4】：

您可以尝试设置另一个服务器，将来自移动浏览器的请求代理到真实服务器，并将它们提供给诸如tidy 之类的程序，该程序可以从非常丑陋的 HTML 构建有效的 (X)HTML。这可以让您以一定的处理成本完全不改变地使用现有服务。

您可以在此处找到small ruby example（使用本地代理）。

【讨论】：

【解决方案5】：

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

如果你的目标是 iPhone/任何触摸，你只需要杀死 flash/java、悬停和其他你很可能根本没有的不可触摸的东西。 Mobile Safari 就像他的老大哥，你真的不需要任何特定的东西。

对于黑莓和其他东西，我不确定，但请查看 wsj mobile site 作为示例。

【讨论】：