兼容篇

兼容篇是我最想写的一部分,在这之前也总结过很多关于移动开发的兼容问题与解决方案。对于移动Web开发来说,兼容是开发重心,通常要花费30%甚至更多的时间去处理一些兼容问题,甚至时间花掉了,问题依然无法解决。

相比PC Web开发,移动开发的兼容性需要考虑的问题更复杂,我自己花了一个图:

图13

在上图中,我列了两个维度:标准支持和个性化,我觉得这两个维度能很好的体现PC与移动在兼容方面的差异。

PC Web开发中,更多时候是在处理对标准支持程度的兼容问题,问题类型相对比较单一。在进入到IE9+时代,对HTML5特性与其他标准支持已经越来越好,前端工程师已经获得了很大的解脱,可能描述得有一定的片面性,但差不多就是这样。

反观移动端,还处于初级阶段,相比PC浏览器来说,移动浏览器对标准的支持起步较高,从Android2.1+就已经支持了很大一部分的HTML5基础功能,对ECMAScript 5的支持更是好,但这并不代表移动端的兼容性就非常的好处理。如上面那张图,移动浏览器的个性十足,各个厂商都有自己特有的东西,这就给移动开发的兼容性带来了十分大的挑战。

移动Web开发的兼容问题主要可以从以下几个层面来理解:

  • 设备差异导致的兼容问题。
  • 操作系统差异导致的兼容问题。
  • 浏览器差异导致的兼容问题。

这三种差异,依次是设备 < 操作系统 < 浏览器,越接近应用层,需要处理的兼容问题越多。

设备差异

可能有些人不解,为什么设备差异会导致兼容问题呢?其实在前面的交互篇就已经有提到移动设备的物理属性的差异,这就直接导致了在移动Web开发的兼容问题。比如有些比较老旧设备的触摸屏是不支持多点触控的,只能捕获单点,这就使得一些需要多点触摸的应用场景出现兼容问题,比如图片的放大、缩小。类似这种硬件缺胳膊少腿的问题是硬伤,无法解决,一般遇到了也只能忽略,但可以考虑给用户一个提示。当然时代在变化,而且变化得很快,这样的手机毕竟只是少数,就像抛弃IE6一样抛弃它吧。

另外一个问题就是devicePixelRatio(设备像素比)的问题,在前面视觉篇分享过两篇文章,可以拿到这再分享一次:

devicePixelRatio主要影响的是图片显示的问题,devicePixelRatio的发展有两个趋势:

  • 老旧设备,devicePixelRatio较低,比较奇葩的devicePixelRatio==1.5这样的值,可能导致图片显示锯齿;
  • 新设备,屏幕分辨率在往2k时代发展,devicePixelRatio==3甚至大于3,所以图片显示可能会比较虚;

在没有特殊要求的情况下,一般移动端是不对图片做特殊处理的,统一都是使用2x大小的图片。处理时一般分为两种情况:

直接引用图片<img src="xxx.png">,直接使用2x大小的图片,将图片高宽设置为物理像素的1/2既可。

另一种情形就是最常见的背景图,将background-size设置为物理像素的1/2。比如图片物理像素为200*200,代码如下:

<style>
#b1 {
width: 100px;
height: 100px;
background: url("xxx.png") no-repeat;
-webkit-background-size: 100px 100px;
background-size: 100px 100px;
}
</style>
<div id="b1"></div>

如遇到一些需要背景图自适配宽度的应用场景,可以使用background-size: cover;

操作系统差异

操作系统差异与浏览器差异是会产生重叠知识点,操作系统差异更偏向于描述由于iOS、Android或其他系统差异导致的兼容问题,而浏览器差异偏向描述由于不同浏览器厂商导致的兼容问题。

相比硬件设备来说,操作系统也给移动开发带来了不少麻烦,在前面视觉篇的最后已经提到一个字体兼容的问题,参见:@元彦 给出了解决方案 《字体设置最佳实践》。

另外一个比较经典的问题,在Android下orientationchange事件回调,需要延迟一点时间触发回调函数,才能获取到正确的window.innerWidthwindow.innerHeight的值,在iOS是不需要做这个延迟的。分别使用iOS与Andorid设备访问 DEMO,横竖屏查看对比结果。

我一般会将Android设备的回调延迟300ms处理,代码如下:

var isAndroid =  /android/.test(window.navigator.userAgent.toLowerCase());
function createOrientationChangeProxy(fn) {
return function() {
clearTimeout(fn.orientationChangeTimer);
var args = Array.prototype.slice.call(arguments, 0);
fn.orientationChangeTimer = setTimeout(function() {
var ori = window.orientation;
if (ori != fn.lastOrientation) {
fn.apply(null, args);
}
fn.lastOrientation = ori;
}, isAndroid ? 300 : 0);
};
}
window.addEventListener('orientationchange', createOrientationChangeProxy(function() {
if (window.orientation == 0 || window.orientation == 180) {
resizeIcon();
}
}), false);

但其实,即使延迟300ms也不能解决所有Android设备的问题,比如我在小米2原生浏览器上需要延迟800ms才能获取到正确高宽。我想这与小米浏览器的内部实现有关,一些浏览器在进入全屏状态收起地址栏时,会执行一个收起地址栏动画,这个动画大概要消耗500ms左右的时间,这个动画并不是所有浏览器都是这么实现的,所以,我想可能是因为这个原因导致有些浏览器需要更长时间才能获取到正确的高宽,也可能是我猜错了。

另外,我还在三星手机上遇到过一些更奇葩的问题,使用JavaScript处理animation动画时,设置动画属性。比如:transformanimation时,必须使用-webkit前缀的属性,如果没有这个前缀,在三星手机原生浏览器下,动画会失效,而在其他浏览器下使用前缀的属性是OK的。

操作系统差异与浏览器差异,没有一个完整的边界,产生的问题也模拟两可。如果在所有Android设备上都出相同的问题,这样的问题都可以认为是操作系统差异,一般这类问题都是由于Webkit内核或系统底层的一些原因导致。

浏览器差异

对于移动Web开发来说,我们处理的70%兼容问题都会是浏览器差异导致,在这里我不会总结浏览器差异的兼容问题,因为实在太多,阅读过 @jtyjty99999 mobileTech项目 就能体会到,那个篇幅,那个长度,简直无力吐槽。可以这么说,只要浏览器版本在更新,就会不断有新的兼容问题产生,一切浏览器个性化功能和对底层引擎的优化都是兼容问题的罪恶之源。

但是,要肯定一点,移动开发兼容一般只需要做两种浏览器的兼容:Webkit内核与IE的Trident内核。如果不考虑WP用户的话,更是连IE兼容都可以省了,所以写代码时,都优先考虑-webkit前缀的兼容,这点是移动Web开发的优势。

浏览器的个性化

在iOS中,苹果强制所有浏览器必须使用自家的Webkit内核,所以所有浏览器的体验非常一致,出问题的话也都出一样的问题,改问题也比较容易点。幸运的是iOS把它优化得十分不错,所以更多的程序员都喜欢做iOS下的前端开发。

相比iOS,Andorid可谓是百花齐放,各个浏览器都个性十足,比如UC浏览器,它包含很多功能:

  • 极速模式
  • 自带手势,比如:左右手势滑动切换页签
  • 无图模式
  • 云加速
  • 网页预读
  • 广告过滤
  • 夜间模式
  • 等等

每个浏览器优化的功能都是一个陷阱,都可能导致应用无法正常工作。最常见的是浏览器自带的手势与页面手势冲突,导致页面手势无法正常工作,又或者浏览自带一些悬浮按钮对页面上的按钮产生了遮挡等等。

一些不太容易遇见的异常就可能与应用场景有关。比如我之前做的一个功能,在页面初始化时需要使用JS记录页面运行一些状态参数,由于UC浏览器的网页预读功能,它会自动识别当前页面的下一页按钮,然后预读下一页并且提前渲染与处理JavaScript。这就导致页面状态记录错乱,因为在用户没有真实看到下一页时,实际上状态参数已经改变为下一页的状态了。这个问题最后是在下一页按钮上加上了disabled样式解决的,如果<a>disabled样式或属性,那么UC在预读时就会忽略掉。

再比如 APP下载链接被当作广告过滤掉等等,类似这样的问题还有很多,都是因为浏览器自身特性导致的兼容问题。

浏览器实现差异

浏览器差异除自身功能特性之外,还有很多实现差异导致的兼容问题,这样的问题是最坑爹的。为什么说坑爹呢?看下面几个例子:

软键盘

文本框

  • 在一些Android浏览器下,文本框focus被激活时,层级最高,会挡住所有页面元素(包括fixed元素);
  • 这种遮挡问题同样在Android一些浏览器的<video>标签中也有体验,比如UC或QQ;

position:fixed

前些天又总结了一篇博文《微信内置浏览器WebApp开发,踩坑》也是有关浏览器踩坑的问题。

这些在正常情况下,都认为没有问题的地方,往往都会出现各种奇葩的兼容问题,而正是这些问题耗费了我们大量的精力和时间。

小结

现在回过头看以前遇到的一些兼容问题,随着Android版本、Webkit引擎和各种浏览器的升级,很多兼容都在从底层被解决,并且对标准的支持也越来越好。

以前我老是会纠结是否需要去解决一些老旧设备遇到的兼容问题,经过这么长时间,对这个问题我也找到了一个自己的答案:“应该大胆的使用更高级,能带给用户更好体验的特性,不要顾虑太多,移动技术发展得太快,快到等你做完这些兼容之后,这些设备已经被淘汰了。

和大家分享一组内部的统计数据:采样12万个,Android系统,Andorid 2.x 占15.47%,Android 4+ 占82.12%。

更正

视觉篇中提到的:维基百科中List of displays by pixel density详细的记录了各类设备的尺寸和分辨率。
更正:维基百科页面被删除,原因不明。使用两个替代方案查询设备的尺寸和分辨率:

移动Web应用开发入门指南——兼容篇的更多相关文章

  1. 移动Web应用开发入门指南——交互篇

    交互篇 从PC到移动端,视觉和交互是用户能直接感受到的差异.在视觉篇中已经提到,移动设备的物理属性一部分影响到视觉,另外一些部分将影响到交互.那么,移动设备影响交互的物理属性都有哪些变化呢?对于这个问 ...

  2. 移动Web应用开发入门指南——视觉篇

    视觉篇 智能移动设备由于发展历史短,但更新速度快,从而导致移动设备的物理属性差异巨大,其中一部分物理属性影响视觉,另一部分影响到交互.兼容或性能.对人类来说,至少有80%以上的外界信息通过视觉获得,视 ...

  3. 微信公众平台开发:Web App开发入门

    WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...

  4. Office 365 机器人(Bot)开发入门指南 (新篇)

    最近在整理书稿时,发现我在2017年7月份写的这篇 Office 365 机器人(Bot)开发入门 的内容,因为相关平台的升级,已经完全不能体现当前的开发过程,所以我再专门写一篇新的开发入门指南给有兴 ...

  5. 【转帖】H5 手机 App 开发入门:概念篇

    H5 手机 App 开发入门:概念篇 http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html 作者: 阮一峰 日期: 2019年 ...

  6. mxGraph进阶(一)mxGraph教程-开发入门指南

    mxGraph教程-开发入门指南 概述 mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图.图表.网络图和普通图形的Web应用程序.mxgraph下载包中包括用 ...

  7. 《Office 365开发入门指南教程》正式上线,限时优惠和邀请分享推广

    我很高兴地通知大家,<Office 365 开发入门指南教程>已经正式在网易云课堂上线,你可以通过直接访问  https://aka.ms/office365devlesson 这个短地址 ...

  8. 所有人都可以是开发人员——《Office 365开发入门指南》视频教程即将上市

      今天是春节假期的最后一天,在这里给全国的朋友们拜个晚年,祝大家身体健康,晚年幸福啊.这个春节大家过的怎么样啊,我自己是在老家过的年,家乡的年味还是比较浓的,也再次感谢朋友圈的大家给我看了各地的风光 ...

  9. 《Office 365开发入门指南》上市说明和读者服务

    写在最开始的话 拙作<Office 365开发入门指南>上周开始已经正式在各大书店.在线商城上市,欢迎对Office 365的开发.生态感兴趣的开发者.项目经理.产品经理参考本书,全面了解 ...

随机推荐

  1. 【python】lamda表达式,map

    一个很好的博客:http://blog.csdn.net/mathboylinlin/article/details/9413551 博客不让转载,我只摘抄了里面几个例子,更多内容到博客里去看 lam ...

  2. [MAC] mac系统如何截图

    mac自带截图工具,因此不需要安装任何第三方软件,便可以实现屏幕截图,截图的方法有若干种,下面介绍最简单的方法:通过快捷键进行截图: 全屏截图: 同时按住键盘左下方的  command   和   s ...

  3. 重命名nginx服务器

    为了防止被黑客扫描到web服务器信息,通过相对应的web服务器信息找出对应的版本漏洞,从而对web服务器进行入侵,nginx虽然功能强大,但是也是软件,软件就可能会有漏洞,例如nginx-0.6.32 ...

  4. 仓鼠找sugar(洛谷 3398)

    题目描述 小仓鼠的和他的基(mei)友(zi)sugar住在地下洞穴中,每个节点的编号为1~n.地下洞穴是一个树形结构.这一天小仓鼠打算从从他的卧室(a)到餐厅(b),而他的基友同时要从他的卧室(c) ...

  5. MySQL主备库切换(MHA)演练与总结

      演练包括被动切换和主动切换两部分.被动切换是主库宕机,主动切换是人工手动触发.   演练步骤大致如下:       1 先停掉主库,模拟主库宕机     2 mha将vip切到备库,备库变成主库, ...

  6. hdu 1009:FatMouse' Trade(贪心)

    FatMouse' Trade Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  7. APP性能分析1

    我们使用云测试平台对产品进行了性能测试,情况如下:   详见这里.

  8. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  9. env

    shell环境变量以及set,env,export的区别 原文链接 一.shell环境变量的分类以及set env export的区别: set:显示(设置)shell变量 包括的私有变量以及用户变量 ...

  10. 其他主流开源硬件简介BeagleBone Black快速入门

    其他主流开源硬件简介BeagleBone Black快速入门 1.3 其他主流开源硬件简介 开源硬件种类繁多,但主要有两款开源硬件常与BeagleBone比较.它们就是Arduino和Raspberr ...