在iOS或Android上WebKit的开发陷入困境

我即将开发一个主要的触摸function的移动WebKit应用程序。

我正在寻找有关与基于桌面的标准浏览器不同的东西的任何提示或build议。

例如:

  • iOS上, click事件不会向上传播到元素上的body元素,除了某些情况(链接,input,具有附加事件的元素等)。

  • Android WebKit不会为多点触控发出事件。

我知道这些。 还有其他一些问题吗? 你知道一些已知问题的清单吗?

在我最近的iPad上,我发现了一些东西。

1:版本4.2 iOS有一个错误,运行太多document.getElementById('foo'); 会导致浏览器滞后,从而无法正确执行命令。 为了解决这个问题,你需要创buildvariables来保存这些信息,并且只在需要的时候做出select命令。 iOS版本4.3确实解决了这个问题,因为我已经在iPad上testing过了。

2:使用定位工具时,我发现在创build自己的video控制器(对于html5)时,如果尝试使用position:relative或position:absolute调整video容器大小,则不再会看到video,而是漂亮的黑色屏幕(有声音!)。 为了解决这个问题,只需定位父框架,你就可以走了。

3:如果您使用的是iScroll,请确保加载时间超时。 特别是如果你有一些其他的JavaScript页面上,即使该文件已加载时,“页面加载”通过:

 // Load iScroll when DOM content is ready. document.addEventListener('DOMContentLoaded', loaded, false); 

我有这个失败,并不能找出我的生活,为什么我的div没有正确调整我的所有元素,但最后两个,而不是滚动。 相反,我只是做了一个

 $(function(){ //other page loaded items to do //the iScroller init setTimeout('iScrollerInit();',200); }); 

并且很快解决了这个问题。

4:如果你发现你的点击不能正常工作,我发现很多移动SDK的东西都是绑定的,所以很难实现点击你想要的东西。 所以要解决这个问题,你可以这样做:

 $("#yourId").unbind("click").click(function(){ //what to do when clicked }); 

我发现这个工作最出色。

**UPDATE - Nov 2012 **: It's been a few years, and there is so much more to add to this so wanted to update the list a bit.

5: Javascript在less数设备上仍然很昂贵(2012年12月)。 做操纵DOM的东西会在设备上产生很大的滞后,当你做这些事时你应该非常小心。 您将需要确保在Android旧设备和iPhone较旧的设备上testing您的移动网页,因为从我们的指标来看,这些设备还是很好用的。

6:如果您传递的是HTML格式的文件,请在设备(iPhone应用程序或Android应用程序)的Web视图中加载,有时候您会看到几乎是0的高度。您需要做的是让iPhone或Android应用程序制作一个在实际页面上的Javascript调用目标为div来检查页面offsetHeight,然后将允许webview的高度被准确地设置。

**UPDATE - Dec 2012 **: Few more awesome findings

7:我发现当你的目标是点击事件时,移动浏览器会在发起事件之前等待300毫秒,从而有效地产生延迟。 他们这样做来确认点击不是双击。 为了避免这种情况,你可以绑定touchend事件,而不是立即开火!

这是一些代码

 $(document).ready(function() { $('#element').bind('touchstart', function(event) { event.stopPropagation(); event.preventDefault(); $(this).toggleClass('hover_heading'); }); $('#element').bind('touchend', function(event) { event.preventDefault(); $(this).toggleClass('hover_heading'); }); }); 

然后,一旦你看到闪烁发生在你的项目使用这个删除。

 body * { -webkit-tap-highlight-color: rgba(0,0,0,0); } 

此外,如果你想看看一个优秀的文章谷歌写在这里,你可以在这里查看: – 创build移动Web应用程序的快速button

**UPDATE - Feb 2013 **: Few more awesome findings

8 :当你的CSS文件版本化,并使用诸如mydomain.com/css/styles.css?v=123(或别的东西)的URLcaching它们时,请注意android 2.2设备和更早的版本,因为这会强制非常奇怪的行为。

从我的调查结果Android将呈现这完全错误的,强制甚至被搞砸的HTML。 使用这些较旧的设备时,最好的办法是不幸地改变实际的文件名。

希望这些调查结果可以帮助其他人,因为我经历了几个小时,困扰着我的每一个问题。

我不知道一个编译列表,但我可以列举几个:

  • Android中当前不支持SVG,因为它已被closures。 支持即将在蜂窝。 相比之下,iOS已经启用了SVG支持,它似乎很好地工作。
  • 虽然这两个浏览器都支持CSS3不透明,但确保您对任何animation进行了全面testing,因为对于更复杂的graphics(尤其是多层不透明的graphics),它们可能非常不稳定。
  • 在我的javascript中,为了速度,我典型地听“touchstart”,“touchmove”或“touchend”事件(“点击”事件通常引起明显的滞后)和粒度。
  • 像localStorage和新的audio和video标签的HTML5function似乎运作良好。 但是,在iPhone上不能自动播放audio或video,因为播放事件(和相应的下载)必须由用户直接触发。
  • 涉及运动的转换(改变x和y坐标)非常平滑。 相比之下,涉及不透明度的转换可能会相当不稳定,具体取决于所涉及的资源(有时您可能不得不使用精灵来获得更平滑的感觉)。

只是一些快速的观察。

我最近用一个html5框架写了一篇关于一些cotcha的博客文章 – 在我的例子中,Sencha Touch用来构build一个封装在PhoneGap中的本地应用程序。

http://www.moneytoolkit.com/2011/05/the-problem-with-sencha-touch-and-phonegap/

android中的3D webkit被打破了,尤其是当涉及到input字段的任何事情时。

http://code.google.com/p/android/issues/detail?id=13048

有几次,我一直在试图追查随机的CSS行为,最终归结为-webkit-transform:translate3d(0,0,0); 在一个更高的元素(使iOS设备的硬件加速)抛出一切。

position: fixed不起作用。

QuirksMode的移动部分可能会非常方便。

那么,在Android中有一个令人讨厌的错误,那就是用JavaScript设置插入符或select对input的位置没有实际的影响。
我问了一个关于它的问题,结论是,这是一个浏览器的错误:(它发生在2.2和2.3。

在Android浏览器中将文本焦点放在文本之后

我碰到两个“function”:

  1. input框不响应触摸事件(ontouchstart,ontouchmove,ontouchcancel),这也意味着ontouchmove =“event.preventDefault()”不会阻止页面滚动,如果你正在创build一个固定页面,不可滚动的应用程序。 (可以使用隐藏的div创build一个klunky解决方法。)

  2. 在Android或iOS上,WebKit中的任何表单字段都无法使用autofocus或element.focus()。 元素将收到一个光标,但键盘不会出现。 我仍然试图为此构build一个解决方法,但目前这是一个已知的故意限制。 🙁

iOS上的Blockquote点击事件不会向上传播到元素上方的body元素,除了某些情况(链接,input,带有附加事件的元素等)

这帮助我感到高兴 – 谢谢。

在我们的networking应用程序的用户testing中出现的一个用户体验项目是,iOSselect元素的交互性很差。 它需要3次点击:1)点击select元素,2)点击要select的项目,3)点击完成。 而且,当您点击完成时,我不会发现被触发的事件。 所以,对于短名单,创build自己的popup菜单或其他交互可能会更好。

溢出:滚动不支持android 2.3

你必须手动让你的div滚动(touchmove + scrollTop改变),如果他们在容器中

有一个令人讨厌的bug,如果Android 2.3上的select框在任何时候都隐藏起来,它们或者它们的容器就不会被激活

http://code.google.com/p/android/issues/detail?id=10280