什么是构建移动/平板电脑兼容的Web应用程序的最佳实践

时间:2011-05-18 09:46:10

标签: javascript html css mobile tablet

似乎随着手持设备的增加,人们不得不开始考虑更多,而是放弃IE6。

考虑到这一点,我注意到某些事情的效果不如我的iphone那么简单。

似乎破坏的内容包括(但不限于):

  • mouseover / mouseout事件(几乎可以打破任何事情)
  • CSS pseudos:​​自然也是悬停(例如,打破导航仅CSS菜单)
  • DOUBLE CLICKS - 它缩放而不是事件处理程序
  • 与CSS相关的问题(分钟,它似乎就像Chrome中没有渐变+一些字体大小的问题)

真正的问题是:您是否有任何可以涵盖以下内容的指南,文章或其他任何内容或您可以给出的任何建议。


您从哪里开始,以便将桌面用户的体验音译到移动用户?您是否尝试为移动设备制作单独的皮肤,或者您是否更改/修复您的网站以尽可能最好地工作 - 这两种方法涉及多少维护和工作

是否有任何框架(CSS或JS)可以抽象并在需要时进行优雅降级?我会想到boilerplate jquery-mobile

你用什么替换上面的东西,单击事件?

如何将滑动整合到网络应用中?你能处理和回应手指放大吗?你呢?

其他事件,如摇晃,倾斜 - 它们是否会冒泡到浏览器窗口?

你做了什么来容纳尴尬的操作系统元素,如mootools-mobile (power tools)selectcheckbox

资源管理 - 您是否使用仅发送特定于设备的文件的检测层,而不是可以处理这两种文件的通用js库?

至于设备支持,我只对droid和ios感兴趣,所以javascript支持会非常好 - 你会放弃你的主框架并使用micro js lib吗?

最后 - 您对手持设备的电子商务和货币化程度(目前和不久的将来)有何印象?我想从商业的角度确定开发工作是值得花费的,而且我们不会像'#socialmedia'那样追求流行语噱头。有关转换价值的任何数据与桌面数据相比较?这可以帮助我衡量这些是用作快速浏览工具还是可以实际完成monty。

任何能够同时或通过不同设计在移动设备和桌面设备上工作得很好的网站示例,我希望看到它们并找到可能的内容。

提前感谢。

3 个答案:

答案 0 :(得分:7)

你刚问了我最近问过的很多问题。当我还在研究和探索时,我无法给出很好的答案。但这里有一些有用的链接。

我希望这至少有点帮助。

答案 1 :(得分:1)

我可以回答您问题的转化率/业务可行性部分。

我有机会看到一些非常非常大的电子商务兴趣的Omniture数字,答案是转换可能会更少,更多,或大致相同。根据设备和卖家的网站,存在相当大的差异。

我认为这是你所期望的。移动/平板电脑体验的质量现在变化很大,取决于每个业务针对移动设备(以及针对哪些移动设备)进行优化的程度。我认为转换因此而变化很大。

答案 2 :(得分:0)

以下链接应该有所帮助。为了使网站像本机应用程序,jQuery扮演了惊人的角色

http://blog.2partsmagic.com/2012/07/developing-web-application-ipad-android-tablet/