在iOS或Android上开发WebKit的问题/错误

Question

我即将开发一个支持触控的主要移动WebKit应用程序.

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

例如:

• 在iOS click事件上body,除了某些情况(链接,输入,带有附加事件的元素等)之外,不会向上传播元素.

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

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

Answer 1

我最近在iPad上的努力中找到了一些东西.

1: 版本4.2 iOS有一个错误,运行太多document.getElementById('foo'); 会导致浏览器滞后,从而无法正确执行命令.要解决此问题,您需要创建变量来保存此信息,并仅在需要时生成选择命令.iOS版本4.3确实解决了这个问题,因为我已经在iPad上测试了它.

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

3:如果您正在使用iScroll,请确保加载超时; 特别是如果你在页面上有一些其他的javascripts,即使文档在"加载页面"时通过以下方式加载:

// 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在少数设备上很昂贵STILL(2012年12月).做一些操纵DOM的东西会对设备造成很大的延迟,在做这些事情时你应该非常小心.您需要确保在Android旧设备和iPhone旧设备中测试移动网页,因为我们的指标仍然是使用良好的设备.

6:如果您要在设备(iPhone应用程序或Android应用程序)上的Web视图中传递HTML,有时您会看到几乎高度为0.您需要做的是让您的iPhone或Android应用程序制作一个Javascript调用指向div的实际页面来检查页面offsetHeight,然后允许精确设置webview高度.

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

7:我发现当您针对点击事件定位您的div时,移动浏览器会在触发事件前等待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);  
}

另外,如果你想查看谷歌写的一篇优秀文章你可以在这里查看: - 为移动Web应用程序创建快速按钮

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

8:在对CSS文件进行版本控制并使用以下网址缓存它们时,例如:mydomain.com/css/styles.css?v=123(或其他内容),请注意android 2.2设备及更早版本,因为这会导致非常奇怪的行为.

根据我的发现,android将完全错误地渲染,并强制html甚至搞砸了.使用这些旧设备时最好的方法是遗憾地改变实际的文件名.

希望这些发现可以帮助其他人,因为我已经在这些问题中挣扎了好几个小时,摸不着头脑:)

Answer 2

我不知道编译列表,但我可以列出一些:

• Android中不支持(当前)SVG,因为它已被关闭.Honeycomb将提供支持.相比之下,iOS已经启用了SVG支持,它似乎运行良好.
• 虽然两种浏览器都支持CSS3不透明度,但请确保彻底测试任何动画,因为对于更复杂的图形(尤其是多层不透明度),它们可能会非常不稳定.
• 在我的javascript中,我通常为了速度而听"touchstart","touchmove"或"touchend"事件("点击"事件通常会引起明显的滞后)和粒度.
• 诸如localStorage和新的音频和视频标签之类的HTML5功能似乎运行良好.但是,在iphone上,您无法自动播放音频或视频,因为播放事件(和相应的下载)必须由用户直接触发.
• 涉及移动的转换(改变x和y坐标)非常平滑.相比之下,涉及不透明度的转换可能会非常不稳定,具体取决于所涉及的资源(有时您可能必须使用精灵来获得更平滑的感觉.)

只是一些快速观察.