开发手机网页的最佳实践

发布于 2024-08-08 03:13:43 字数 1455 浏览 2 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

飘然心甜 2024-08-15 03:13:43

为了获得最大程度的兼容性,您必须放弃大多数在台式计算机上运行的普通浏览器,以进行权衡。

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

In order to get the greatest amount of compatibility, you have to trade it off with ditching most of the bells and whistles browsers running on desktop computers consider run of the mill.

  • Declare the mobile doctype with your XHTML documents, and make sure your markup and styleheets are valid.
  • Keep you CSS real simple. No :hover, don't use images as part of the design, limit your usage of fixed sizes/margins.
  • Emulators aren't as effective for testing as the actual devices themselves. Phones that do Wifi/Bluetooth PAN can make life cheaper, but testing over carrier's network will also help you get a better understanding of the speed and latency.
  • There is no "typical device", but if you can get your website looking really good under webkit without using webkit's CSS addons, you've covered a huge chunk of devices (Nokia S60, iPhone, Android etc). Work with Opera Mini, and you'll expand that chunk even more.
  • Compact your output as much as possible. Not only are your end users going to be screen and CPU processing limited, they are most likely going to be limited by network. The faster you can push out your data to them, the less-sluggish your website will feel.
霊感 2024-08-15 03:13:43

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

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

您还可以查看有关为 iPhone 设计网页内容的 Apple 文档,尽管它是特定于 iPhone 的,但它通常适用于移动设备:

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

A List Apart has a great article about conditionally using different style sheets for mobile devices:

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

You can also check out Apples Documentation on designing web content for the iPhone, although it's iPhone specific, it pertains to mobile devices in general:

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

同展鸳鸯锦 2024-08-15 03:13:43

只是我的两分钱:

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

  2. 把无用的东西放在一边,只显示基本信息,高级或详细信息应该放在更多按钮下。

    把所有无用的东西放在一边,只显示基本信息

  3. 不要使用图像,或者我说 - 尽可能少地使用它。这将占用用户的大部分带宽。如果您的目标用户是 GPRS/EDGE 下的用户,那么最好避免使用图片。使用 3G 的人有更好的机会。

  4. 您可以查看 FacebookGmail 移动界面来了解一下。 Google Reader 的移动界面也不错,但仍达不到要求。

  5. 我不知道有多少人会同意我的观点 - 保持 AJAX 较低。如果您的页面高度ajaxified,大多数手机都无法处理如此大的负载。请记住,这是手机而不是电脑。它确实有一些限制。可能非常高端的手机可以渲染它,但为了保持强大的用户群,请尽量减少使用。


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

CSS:尽可能少用CSS。正如我上面多次说过的那样,使用颜色而不是图像。您应该使用浮动来使页面正确适合屏幕。如果您愿意,可以使用较小的字体 - 但要注意,不要低于一定的水平。

Just my two cents:

  1. Personally, I would make the layout fluid, so that it auto adjusts itself according to the length and breadth of the display.
    Remember many phones have accelerometers which can change the direction of the page, when tiled sideways. In this case, horizontal scrolling is a big no-no.

  2. Just keep all useless things aside and present only the basic information, advanced or details information should be places under More button.

  3. Don't use Images, or I say - Use it as minimum as possible. This would take the most of the user's bandwidth. If you are targeting this for people under GPRS/EDGE , then better avoid Images even more. People on 3G have a better chance.

  4. You can have a look at Facebook or Gmail mobile interface to have an idea. Google Reader's mobile interface is also good, but still not upto the mark.

  5. I don't know how much people would agree with me - Keep AJAX low. Most phones can't handle so much load if your page is highly ajaxified. Remember, it is a mobile and not a computer. It does have some limitation. Probably very high end phones can render it, but to keep your userbase strong, minimise the use.


Content Load: If the page takes just to much time to load, then probably the user won't bother using it. They would prefer to use any other alternative/service which can get his/her work accomplished.

CSS: Make less use of CSS as much as possible. Use colours more than Images as I said many times above. You should make use of float to make the page fit properly on the screen. If you desire you can use smaller font - but beware, don't go below a certain level.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文