iOS5 innerHTML插入内联touch事件的问题

2011-10-19 评论(2) 分类:技术文章 Tags:

iOS5一出来,很多对safari的溢美之声,那些新增的特性确实好,但这个版本的safari很有问题。

document.getElementById("test").innerHTML = '<div ontouchstart="alert(\'touchstart\')"></div>'

一般,这样的代码是没问题的,一段HTML字符串赋给DOM的innerHTML后,自动生成DOM,并且上面的内联事件都是有效的。在至今所有浏览器都可以这样,但现在在iOS5的Safari不行,生成的DOM中ontouchstart事件无效,目前测试ontouchstart/ontouchmove/ontouchend都不行,若改成onmousedown,onclick等都是可以的。这个问题导致了jquerysencha的一些应用都挂了。

目前的解决办法就是,先把HTML加入一个新建的DOM里,再用cloneNode把创建好的DOM取出来加入目标位置,这样才可以。如果不用cloneNode而是直接把创建好的元素塞进去还是不行的。

var dom = document.createElement("div");                                    
dom.innerHTML = '<span ontouchstart="alert(\'touchstart\')">touchstart dom create</span>    ';                                                                          
document.getElementById("testTSdom") .appendChild(dom.childNodes[0].cloneNode(true));

可以在这里 http://bangswork.googlecode.com/svn/trunk/lab/ios5touchstart/index.html 看到效果

这应该属于一个bug,居然就带着这么明显的bug发布出来了,要折腾死做移动版的前端了。

此外,还发现iOS5下Safari的一些其他问题,例如缓存很奇怪js excution timeout,还有一些已经碰到但未明原因的,总之,这个safari很有问题。

移动浏览器的viewport

2011-1-2 评论(9) 分类:技术文章 Tags:

对于移动web开发,最好了解一下viewport的概念,在quirksmode.org有两篇文章详细介绍了它,A tale of two viewport(1 2),感觉非常好,本来想翻译的,但这两篇文章实在太长了,没耐性,于是抽取了其中重点讲viewport的部分,用半翻译半自己写的方式写出来,这也是为了让自己能够理解得更好一些。

其中CSS像素和设备像素的概念,还有js获取各种宽高和位置的内容都没有提及,要想了解得更清楚还是推荐看看那两篇文章。以下图片均来自quirksmode.org

桌面浏览器

先说说桌面浏览器上viewport的概念,在桌面浏览器上viewport就是浏览器内容的可视范围,它决定了<html>元素的默认宽高。举个例子:

在一个流动布局的页面上,你给侧栏设置了width:30%,放在<body>下,正常情况下你拖动浏览器,改变浏览器的大小,这个侧栏会自动调整宽度使它的宽度为浏览器宽度的30%,那么这个自动调整的过程具体是怎样的呢?
(更多…)

关于移动web开发

2010-12-30 评论(2) 分类:互联网 Tags:

最近在开发无线js代码库,拿到了Android测试机N1,这几天的测试过程中,发现了Android2.2里chrome lite的一些问题,记录在本文最后。

试用过Andorid浏览不同的网页后觉得,移动web开发应该尽量避免类似桌面应用那样的富客户端体验,因为本身各种手机性能参差不齐,而且性能最好的iPhone4也并没有好到哪里去。桌面的IE6虽然比chrome性能差几十倍,但在强大的桌面硬件支持下普通富客户端应用差别很小,甚至感觉不出来,但手机上就不一样,差别明显,性能低到无法忍受。

我在Android下试了sencha/jqtouch/jquery mobile,体验都不好,很卡很慢,如果只是针对iOS平台的浏览器还好,如果是针对所有平台的,还是不要用这么复杂的框架。速度快是最重要的体验元素,这在移动web上主要表现在渲染的速度。而一些锦上添花的效果有时不仅影响速度,还会有更差的体验出现,例如jquery mobile在滑动切换页面时会不断调整位置,或者隐藏显示地址栏,导致页面闪了几下,体验不太好。

做移动web开发,我目前想法是:

  1. 最重要的是写好css让页面显示适应屏幕,但同时CSS3带来的特殊效果尽量少用,特别是list的渐变背景最好不用,会拖慢页面的渲染。
  2. 少用或不用动画,虽然css3动画在iOS上表现不俗,但至少在Android上表现不佳,很卡的动画比没有动画效果更差。
  3. 功能性的交互可以多(如dom切换/ajax,但要极力优化),效果性的交互尽量少(例如手指拖动元素,slider等组件)。

如果要在手持设备上有足够丰富的交互体验,还是做原生APP靠谱。如果不考虑各种浏览器的兼容,只考虑iOS,那能做的事还是挺多的,感觉sencha touch就只是为iOS准备的。但在iOS上浏览器的性能也无法跟原生APP比,差得很远,而且如果只支持iOS,web失去了跨平台这个特性,也就没多大意义了。

附:Android2.2浏览器的问题

(更多…)