开发手机网页的最佳实践

Question

我想知道如何制作一个在大多数手机中看起来不错的网页。 为了制作普通网页，我使用了dreamweaver cs3。 我不想使用模拟器，除非我也有。 我可以不只是将所有东西放在中间位置，两边都有自动边距。

当我查看我已经制作的页面时，它们看起来不错， 但在手机中，有些东西会变得混乱。 我打算删除所有非必要的信息和标记，以便在手机上使用。

然后有一个问题，基本上对我来说是最重要的问题

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

修改

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

谢谢，理查德

Answer 1

为了获得最大程度的兼容性，你必须在放弃大多数在桌面计算机上运行的铃声和口哨浏览器的情况下进行交易。

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

Answer 2

只是我的两分钱：

1. 就个人而言，我会使布局流畅，以便根据显示器的长度和宽度自动调整。 请记住，许多手机都有加速度计，当侧面平铺时，可以改变页面的方向。在这种情况下，水平滚动是一个很大的禁忌。

2. 将所有无用的东西放在一边，只提供基本信息，高级或详细信息应放在“更多”按钮下。

3. 不要使用图像，或者我说 - 尽量少用它。这将占用用户的大部分带宽。如果您要为GPRS/EDGE下的人定位此功能，那么请更好地避免使用图片。 3G上的人有更好的机会。

4. 您可以查看Facebook或Gmail移动界面以了解相关信息。 Google Reader's移动界面也不错，但仍未达标。

5. 我不知道有多少人会同意我的观点 - 保持AJAX低。如果您的页面被高度混淆，大多数手机都无法处理如此多的负载。请记住，它是移动设备，而不是计算机。它确实有一些限制。可能非常高端的手机可以渲染它，但为了保持用户群的强大，最大限度地减少使用。

---

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

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

Answer 3

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

http://www.alistapart.com/articles/putyourcontentinmypocket/

您还可以查看Apples文档，了解如何为iPhone设计网页内容，虽然它是针对iPhone的，但它通常适用于移动设备：

http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW1