为手机开发网页的最佳实践[关闭]答案

【问题标题】：best practice for developing webpage for mobile phone [closed]为手机开发网页的最佳实践[关闭]
【发布时间】：2009-10-22 13:05:42
【问题描述】：

我想知道如何制作一个在大多数手机上看起来都不错的网页。对于制作普通网页，我使用dreamweaver cs3。我真的不想使用模拟器，除非我也有。我能不能把所有东西都放在中间，两边都有自动边距。

当我查看我目前制作的页面时，它们看起来还不错，但是在手机中，有些事情会变得混乱。我打算去掉所有非必要的信息和标记，以便在手机上使用。

那么问题来了，基本上是我现在最重要的一个问题

如果手机去同一个地址，如何呈现不同的页面？

编辑

我没有得到最后一个答案，但我找到了一个可以使用的浏览器检测脚本。

谢谢，理查德

【问题讨论】：

【解决方案1】：

为了获得最大程度的兼容性，您必须放弃大多数在台式计算机上运行的花里胡哨的浏览器，考虑到运行状况。

在您的 XHTML 文档中声明 mobile doctype，并确保您的标记和样式表有效。
让您的 CSS 真正简单。不：悬停，不要在设计中使用图片，限制使用固定尺寸/边距。
仿真器在测试方面不如实际设备本身有效。支持 Wifi/蓝牙 PAN 的手机可以让生活更便宜，但通过运营商的网络进行测试也可以帮助您更好地了解速度和延迟。
没有“典型设备”，但是如果您可以在不使用 webkit 的 CSS 插件的情况下让您的网站在 webkit 下看起来非常好，那么您已经涵盖了大量设备（诺基亚 S60、iPhone、Android 等）。使用 Opera Mini，您将进一步扩展该块。
尽可能压缩您的输出。您的最终用户不仅会受到屏幕和 CPU 处理的限制，而且他们很可能会受到网络的限制。您将数据推送给他们的速度越快，您的网站就会感觉越慢。

【讨论】：

【解决方案2】：

A List Apart 有一篇关于有条件地为移动设备使用不同样式表的精彩文章：

您还可以查看有关为 iPhone 设计 Web 内容的 Apple 文档，虽然它是针对 iPhone 的，但它通常适用于移动设备：

【讨论】：

【解决方案3】：

只要我的两分钱：

就个人而言，我会让布局变得流畅，以便它根据显示的长度和宽度自动调整。请记住，许多手机都有加速度计，当横向平铺时，它可以改变页面的方向。在这种情况下，水平滚动是一个很大的禁忌。
把所有没用的东西放在一边，只展示基本信息，高级或详细信息应该放在更多按钮下。
不要使用图像，或者我说 - 尽可能少地使用它。这将占用用户的大部分带宽。如果您将其定位为 GPRS/EDGE 下的人，那么最好避免使用图像。 3G 上的人有更好的机会。
您可以看看Facebook 或Gmail 移动界面有一个想法。 Google Reader's手机界面也不错，但还是不合格。
我不知道有多少人会同意我 - 保持AJAX 低。如果您的页面高度 ajaxified，大多数手机都无法处理如此多的负载。请记住，它是手机而不是电脑。它确实有一些限制。可能非常高端的手机可以渲染它，但要保持强大的用户群，请尽量减少使用。

内容加载：如果页面需要很长时间来加载，那么用户可能不会费心使用它。他们更愿意使用任何其他可以完成他/她的工作的替代方案/服务。

CSS：尽可能少使用 CSS。正如我上面多次说过的那样，使用颜色多于图像。您应该使用浮动来使页面正确地适合屏幕。如果您愿意，可以使用较小的字体 - 但请注意，不要低于某个级别。

【讨论】：

很多低端手机根本处理不了。真正开发可降级到使用 0 AJAX 运行的页面应该是关键要求。如果你想瞄准 90%，你必须考虑到这一点。
这就是关键所在。低端手机根本无法处理 AJAX。我有一个诺基亚 5800 XpressMusic，它具有基于 WebKit 的内置浏览器，可以在一定程度上处理 AJAX，但如果它是重 AJAX，则会停止响应一段时间。
@manish，感谢您的贡献。我实际上正在使用同一部手机进行测试。经过一些进一步的阅读。到目前为止，我的结论是使用左右自动边距制作一个 300px 宽度的居中布局。我省略了大部分图像并使用颜色代替。我这样做是因为大多数屏幕都有些偏离那个尺寸，除非你可以翻滚屏幕。我必须考虑我能做些什么。 Javascript 在大多数设备上都没有得到很好的支持或根本没有。所以，我将把它排除在外。
好主意。省去 JS，尽量少用图片。最大限度地使用颜色。看看 Stackoverflow 本身。只有几张图片。