概述
操作系统:现在分成两大阵营:ios和android,基本局势已定。
基于这两种操作系统,网页开发的共同点:
1.两个系统浏览器都是webkit内核的,so--移动端的web开发主要面向webkit内核的浏览器开发,不用顾及IE等浏览器。
2.移动端的浏览器对HTML5支持较理想,可以使用HTML5的特性。
移动端的浏览器按照存在形式可以分为下面几类:
- 内置浏览器
- 用户安装浏览器
- WebView
- 代理浏览器
内置浏览器
内置浏览器搭载在系统固件中,一般由系统产商开发,如 iOS 的 Safari,Android 的 Android WebKit 或 Chrome。
内置浏览器一般无法单独升级,需要升级系统才能更新。所以,有时会被又老又烂的内置浏览器拖住开发后腿,尤其是 Android 平台。所以适配内置浏览器的时候要关注系统的版本。
用户安装浏览器
有许多浏览器是用户可以自行下载安装的,如 Chrome、Firefox、Opera、UC、QQ 等。
需要注意的是,同是用户安装浏览器,不同平台上会有本质差别,如 iOS(包括 Windows Phone)不允许使用其他的渲染引擎,所以 iOS 上的 Chrome 并非它该有的 Blink 内核,Firefox 的内核也不是Gecko。
用户安装浏览器可以被更新,获得最新的功能和更好的体验,这点区别于系统自带的浏览器。
用户习惯地域差异:
- 国外(例如美国):很少有用户去安装别的浏览器——就算知道可以安装;
- 我国:用户会下载(有时可能是「全家桶」之类的被下载)安装各种浏览器,如 QQ、UC 浏览器。
WebView
WebView 是系统提供给原生应用的内置浏览器接口。比如 iOS 上的第三方浏览器,都是基于系统 WebView 开发。
WebView 一般是独立的程序,使用内置浏览器的底层组件(如渲染引擎、JavaScript 引擎),但某些方面可能会有所不同,如性能上会有所限制。从实际操作情况来看,有些时候确实调用的webview和系统自带浏览器是不一样的。浏览器里一个样,webview里又是一个样。
代理浏览器
代理浏览器在其服务器上渲染 HTML、CSS,执行 JavaScript,然后把结果返回给浏览器。如 Opera Mini、早期的 UC 浏览器、Nokia Express 等。
与代理浏览器相对应的是完整浏览器(full browser),即把资源下载到客户端渲染、执行的浏览器。
ios VS android 不同:
1.对于浏览器来说,android厂商碎片化比较严重,然后webkit浏览器又是开源的,所以市面上的webkit内核浏览器的版本很多。厂商总是根据自己的喜好来修改webkit浏览器,这导致HTML5碎片化很严重。Android 4.4 之前的 Android 系统浏览器内核是 WebKit,Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink。
(例子,需要实际设备试验截图)例如对input type="date"的实现,有些厂商实现了这个标准,有些没有实现,而对于实现了这个标准的浏览器,界面展现及交互又不尽相同。而除去系统自带浏览器,还有各app的webview,微信6.1版本以上的android用户,都是使用的QQ浏览器的X5内核,5.4-6.1之间的版本,若用户安装了QQ浏览器就是使用的X5内核,若用户未安装浏览器,使用的是系统内核。
2.从系统的角度而言,android系统版本的碎片化也很严重,现在已经到6.0了。之前主要分2.X和4.X阶段(3.X主要为TV等设备制作),其中2.X版本的浏览器是webkit533.X版本,这个版本的浏览器是谷歌为手机订制的,是精简版的,对HTML5的实现不是特别彻底。其中又以2.3版本为界限,2.3之前的版本对HTML5支持不是很好,2.3之后的版本开始移植PC的Chrome代码,有了一次飞跃。截至2016年3月,可能还有超多用户再用Android 2.3版本,比如微信用户中有3%用户使用Android 2.3及以下版本。
3.ios是封闭的,苹果不允许使用其他渲染引擎。且apple对于HTML5标准的实现较好,so ios上HTML5的支持情况较好。这种封闭性对浏览器厂商可能是束缚,对用户和 Web 开发者则是好事,保持一致的用户体验,降低开发、测试成本。
然而,虽然同样基于 iOS 提供的 WebView,Chrome、Firefox、微信 WebView、QQ 浏览器、UC 浏览器等还是会存在细微差别,在 Safari 上正常的功能,在这些用户代理上未必。
4.ios和android对于html5的规范实现在界面层和交互层的实现是不同的,就拿上面的列子来说 type date的日期控件,ios和android的交互实现,不太一样。虽然都按照w3c的标准进行了实现。select的实现也不尽相同,UI五花八门。
移动端设备性能
移动端和桌面端开发差异比较大的地方还有移动端设备的性能。需要了解下移动端设备的性能特点。
移动端设备的硬件发展还是很迅速的,但是与桌面设备比起来还是有差异。所以在移动端,性能和功能需要一个平衡点。例如一些复杂的动画,看上去很炫酷,但在网页运行的时候,会发现手机有点发烫,并且电量消耗很快,不一会又要充电了。所以移动端网页,性能是会受到一定的限制的。web受性能的影响比起native还是会大些,由于web不是编译型语言,只能在设备上解析运行,加上webkit内核所占用的内存较大,并且是单进程的应用,所以受CPU、内存的影响更大。
页面渲染
移动端web在性能上影响较大的是渲染问题,js问题不那么突出,原因是android使用了V8引擎,比较大幅度的提升了脚本执行性能。移动端页面渲染和PC端有较大差别,原因在于桌面端在页面渲染上,有高性能的硬件,加上强劲的显卡,性能甩移动端好几条街。而移动端有限的硬件性能,加上没有专门的显卡,使得所有页面渲染的工作都由CPU来执行,CPU本身的执行频率有限,会造成页面渲染缓慢。所以在手机上,页面大量渲染的时候,容易出现卡顿,比如渲染一个很长的列表,滑动的时候就容易卡。还有比如页面的切换,也容易卡。所以涉及到页面渲染,就更需要小心处理了。
键盘
键盘和桌面端也有很多不同。
移动端使用软键盘,在唤起软键盘的时候,布局会发生微妙的变化,可能会影响页面的布局。由于手机的界面非常小,所以键盘会占据很多空间。对键盘布局的处理,ios和android也是不同的。
移动端事件:
touchmove的preventDefault():可以在手指在屏幕上滑动的时候,阻止滑动事件,可以根据自己的需求确定要不要e.preventDefault()