移动web开发之我们来谈谈适配与检测.docx

我们来谈谈适配与检测
人,包括世界上所有有感情的动物都一样。一旦爱了,就要确定,一旦无法确定,也就开始怀疑爱的本源。这点对于活着的人们来说,终有一天能够得到证明,但对于死去的人来说,却让一切变得没有答案。
移动开发,和人也一样,一旦开始做,就要确定,一旦无法确定,也就开始怀疑开发的本源。这点对于产品经理来说,不过是过眼云烟,但对于程序员来说,却是他们的全部。
不要停留在表面
对于这个问题最深刻的阐释莫过于drag/drop。我们经常为元素设置draggable:false来禁止其被拖拽。于是有人会认为这个draggable就是检测拖拽能力的救命稻草。但如果你在IE9上测试的话,你会发现,尽管没有draggable这个属性的支持,IE9还是会实现拖拽。于是你试图采用这样的代码来解决问题:
var div = ('div');
return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
可是事与愿违,在android和ios的自带浏览器中,这些判断都pass了,可是还是无法进行拖拽。Modernizr就是这么判断的,所以你会发现,在移动终端,这样的判断并不好使。所以还是去查看safari的开发手册:
这里面以表格的形式告诉你,drag/drop是不支持的!
遇到这样问题的时候,我们就需要经验性的东西以及文档性的东西来告诉我们浏览器真实的支持情况了。Html5test很好地处理了这样的问题,尽可能地去覆盖各种机型。但是我们无权诟病Modernizr,它毕竟是一个通用的解决方案,只是浏览器欺骗了它。
没有完美的方案
对于touch的验证,在浏览器的发展历史中可谓一波三折。首先桌面版的chrome4、5都曾在这个功能上撒过谎,看起来支持touch事件('ontouchstart' in window),但实际上并不支持。而且,在Palm pre和Win7的平板电脑上,这种基于事件是否存在的检测也是无效的。所以,对于此类问题,只能把十八般武艺全都亮出来。从touchstart事件,到media queries(touch-enabled),全都拿来检测。
好在现在产品线上所谓的iphone版入口只覆盖到了android和ios,所以对touch的检测只需要针对touchstart事件即可。但随着时代的进步,覆盖面的增长,对单一功能的检测又会变得十分复杂。毕竟十全十美的事情不存在。
你追随的,即无常的
浏览器不会一直保持一个良好的状态,就如同坚贞不渝的爱情也要经受七年之痒的考验。比如百度浏览器的某个版本,不支持Y轴旋转,于是用户骂你左右不分。比如安卓UC 开始不支持自定义字体。比如HTC有个PC模式。比如UC 完全糟蹋了所有的可辨识的UA关键字段。于是只能绞尽脑汁想一个合适的汉字与之对应……
你所追随的,即无常的。因此适配很大程度上是一个打patch的过程。
What ever
CSS property vs DOM property
这个大家都明白。当你在style sheet里为某个元素指定HTML5样式的时候,需要考虑浏览器内核