1 未来平台及浏览器内核
1.1 三大移动平台
- iOS
- Android
- Windows Phone
1.2 四大浏览器内核
- WebKit-based(WebKit)
- Firefox(Gecko)
- Opera(Presto)
- Interner Explorer(Trident)
WebKit是一个开源的浏览器布局引擎,它可以渲染HTML和CSS并且执行JavaScript。目前广泛应用于Safari, Chrome的移动版和桌面浏览器,包括Android系统自带的浏览器。Nokia手机上的Symbian系统从S40 6th开始采用基于WebKit内核的浏览器。不过各个WebKit-based浏览器在具体实现上也存在着差异。
2 主流移动浏览器
2.1 主流移动浏览器及平台
- Safari on iOS (iPhone, iPad)
- Android Browser (Android OS 2.x & 4.0, Tablets)
- Google Chrome (Android OS 4.0)
- BlackBerry Browser (BlackBerry OS)
- Nokia Browser (Symbian, MeeGo-N9)
- Internet Explorer (Windows Phone 7.5)
- Opera Mobile (Android & Symbian)
- Opera Mini (Java, iOS & Android)
- Firefox (Android OS)
- WebOS Browser (HP Phones)
- UC Browser (Multi-platform)
2.2 2011.6-2012.6移动浏览器市场占比
2.3 2011.6-2012.6移动平台市场占比
3. HTML5, CSS3, Application API 兼容性表
针对目前主流的4种对HTML5,CSS3以及Application API支持较好的4种浏览器(Android Browser on Android OS, Safari on iOS, Firefox Mobile, Opera Mobile)做出兼容性对比表。从手机浏览器 HTML5 特性支持度得分上来看,Android 系统 4.0 上的 Chrome, 主流平台上的 Opera Mobile 12.00, Firefox Mobile 10 以及 iOS 设备上的 Safari 对 HTML5 支持程度最好。开发版的 Dolphin, BlackBerry 10, Tizen1 以及 iOS 6.0 上的 Safari 的支持度增加了不少。
3.1 HTML5 Features
3.2 CSS3 Features
3.3 Application APIs
4 Web App特性
对于Web App来说,传统的Native App占有很大的优势,包括可靠性和稳定性,以及更多权限来访问设备的硬件或软件系统。因此诞生了PhoneGap,它起了封装和桥接的作用,PhoneGap提供的API分13个大类 (Accelerometer, Camera, Capture, Compass, Connection, Contact, Device, Events, File, Geolocation, Media, Notification, Storage),包括设备Ready事件,多任务,网络连通事件,电池事件,加速器,通讯录访问,录音和播放媒体,访问相机,网络连接状态,文件访问权限,定位,消息通知以及更稳定的本地储存等。以上特性虽然在在HTML5的规范中有一部分体现,但是大部分都在草案阶段,另一部分则还没有,有些接口只有个别浏览器有简单的实现,不过针对移动设备的诸多特性在以后的标准里面会逐步体现出来。
以下列出几个HTML5特性的基本实例:
4.1 设备方位和运动相关事件
当设备屏幕方位发生变化时触发该事件
window.addEventListener('orientationchange', function(event) { alert(window.orientation || screen.orientation) }, false); window.addEventListener('deviceorientation', function(event) { var a = event.alpha; var b = event.beta; var g = event.gamma; console.log([a, b, c]); }, false); window.addEventListener('compassneedscalibration', function(event) { alert('Your compass needs calibrating! Wave your device in a figure-eight motion'); event.preventDefault(); }, false); window.addEventListener('devicemotion', function(event) { // Process event.acceleration, event.accelerationIncludingGravity, // event.rotationRate and event.interval }, false);
4.2 网络连接类型
可以通过 navigator.connection.type 判断当前网络连接类型,网络类型 type: unknown, ethernet, wifi, 2g, 3g, 4g, none.
function updateConnectionClass() { var root = document.documentElement, types = "unknown ethernet wifi 2g 3g 4g none".split(" "); for (var i = 0, n = types.length; i < n; i++) { root.classList.remove("network-" + types[i]); } root.classList.add("network-" + navigator.connection.type); } window.onload = window.ononline = window.onoffline = updateConnectionClass;
4.3 地理定位
地理定位可以做天气或者地图等应用。
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var marker = new google.maps.Marker({position: latLng, map: map}); map.setCenter(latLng); }, errorHandler); }
4.4 离线应用
清单文件 .manifest
CACHE 指定离线资源的相对或绝对路径
NETWORK 指定不能离线的资源
FALLBACK 当应用离线运行时请求不能离线的资源时的情况处理
指定缓存文件列表清单
CACHE MANIFEST CACHE: index.html icon.png app.js style.css /libs/sencha/sencha-touch.js /libs/sencha/resources/css/sencha-touch.css NETWORK: http://maps.google.com/ http://maps.googleapis.com/ FALLBACK: offline.html
在 <html> 元素添加属性 manifest="app.manifest"
app.manifest 文件 MIME type 为 text/cache-manifest
.htaccess file in Apache:
AddType text/cache-manifest .manifest
4.5 客户端存储
-
Web Storage
- Local Storage
- Session Storage
- Web SQL Database
Web Stroage现在广泛应用于各个浏览器(包括WP7),很容易存储一些配置信息和偏好设置。
Web SQL Database 虽然W3C标准不再维护此规范,但大多数浏览器都有很大程度的实现,且对于永久存储数据的WebApp来讲有很大的好处。可以考虑在实验性的项目中来使用。
var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); db.transaction(function(tx) { tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback); });
4.6 触屏事件
触屏相关的事件:
- touchstart 单指接触屏幕时触发
- touchmove 单指在屏幕上移动时触发
- touchend 单指离开屏幕时触发
- touchcancel 取消跟踪时触发
- gesturestart 当2个或多个手指接触屏幕时手势事件开始
- gesturechange 当手势移动时触发
- gestureend 当手势结束时触发
Touch Events 和 Gesture Events属于UI交互事件,主要针对有触摸感应能力的设备,在移动设备上触发的机会很多。
4.7 动画
1) Transitions
Transitions提供了简单的动画创建方式,CSS动画发生在当某个CSS属性发生变化时,需要提供几个参数:变化的属性,时间,函数和延迟。
可以简单写为:
transition: [<transition-property> < transition-duration> < transition-timing-function> < transition-delay>[, < transition-property> < transition-duration> < transition-timing-function> < transition-delay>, …]]
2) Transforms
Transforms包括2D和3D的一些变换效果,有两个基本属性,transform-origin 和 transform。transform-origin属性用来确定变换元素的基点位置(相对参考点),默认情况下在元素的中心位置,可以改变transfrom-origin属性来改变参考点,其单位可以为长度,百分比或关键字。Transform属性包含很多2D和3D的变换函数,可以对元素进行平移,旋转和缩放,这些函数包括:
3) Animations
Animations 提供了更复杂的自定义动画,需要提供的参数: 名称,时间,函数,延迟,次数,方式,状态;定义关键帧
animation: [<animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction> <animation-fill-mode>[, <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction> <animation-fill-mode>, …]]
此外可以为animation-play-state属性设置值为”paused”来停止动画,”running”可以继续执行动画,通过定义关键帧可以自定义更复杂的动画效果。
4) RequestAnimationFrame
RequestAnimationFrame是由JavaScript执行的动画,通过浏览器调度在合适的时间智能高效地重绘和渲染视图,因此可以跟少使用CPU,GPU,内存使用和电池电量。
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })();
4.8 其他
一些值得尝试的特性,如语音输入 x-webkit-speech
<input type=”text” x-webkit-speech lang=”zh-CN” />
文档头部新增的很多有意义的 <meta> 和 <link>,这些标签可以很大程度增强用户体验,例如:
允许应用全屏模式运行,通常称为独立模式 (standalone mode) ,可以通过 window.navigator.standalone 属性来区别是否是独立模式运行
<meta name="apple-mobile-web-app-capable" content="yes" />
Web App在主屏显示的图标 (默认57x57)
<meta name="apple-touch-icon" href="icon.png" />
对不同的设备可以指定多个图标
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
应用启动时显示的图像 (320x460)
<link rel="apple-touch-startup-image" href="default.png" />
遵循自适应设计(RWD, Responsive Web Design)的原则,页面呈现宽度适应屏幕
<meta name="viewport" content="width=device-width, initial-scale=1" />
通过 Media queries根据设备大小方向提供不同的样式规则
<link rel="stylesheet" media="screen, handled and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="screen, handled and (orientation:landscape)" href="landscape.css">
5 参考资料
- Android Browser on Android 2.3
- Android Browser on Android 4.0
- Chrome Browser on Android 4.0.3
- Safari on iOS 4.2
- Safari on iOS 5.1
- MobileHTML5: http://mobilehtml5.org/
- HTML5 test: http://html5test.com/compare/feature/index.html
- Caniuse: http://caniuse.com/
- Modernizr 检测浏览器对HTML5和CSS3特性支持的JS库
原创文章,转载请注明出处http://zhangdaiping.iteye.com
相关推荐
为了集成矿井提升机的设计资源,使专业技术人员可以利用移动设备随时随地查询矿井提升机相关信息,便捷高效地进行矿井提升机设计,对基于HTML5移动平台的矿井提升机设计系统的集成进行研究,采用HTML5、CSS、j Query ...
HTML5针对国内移动终端的可行性调研 背景 2 HTML5手机浏览器兼容性调查 3 1.1简介 3 1.2主流手机浏览器对HTML5和CSS3的兼容性 3 1.2.1 HTML5 Web应用程序 4 1.2.2 HTML5移动应用功能 5 1.2.3 HTML5音频编码 5 1.2.4...
C0105国家政务服务平台一体化移动应用支撑平台运维保障要求
重庆移动M2M业务运营支撑平台可行性分析.kdh
为了系统能够运行在所有的移动平台上,公司基于HTML5 技术开发了移动商城的前端部分。 HTML5的最大优势是跨平台,开发人员无需针对平台进行开发,用户无需 下载,只需要打开一个网址,就能在全平台上运行。因为无需...
移动通信系统电磁兼容性限值和测量方法) yd1032(9001800MHz TDMA数字蜂窝移动通信系统电磁兼容性限值和测量方法).pdf
《HTML5移动应用开发入门经典》总共分为24章,以示例的...同时,《HTML5移动应用开发入门经典》还针对不同平台(如iOS、BlackBerry、Android)的移动设备、不同的浏览器,就如何开发高可用性的移动应用程序进行了讲解。
YD_T 1595.1-2012数字蜂窝移动通信系统电磁兼容性限值和测量方法
移动公司业务支撑专业题库
中国移动业务支撑网网管系统规范,业务规范标准范例
本书主要围绕HTML5技术,讲述如何利用HTML5相关技术开发移动Web网站和WebApp应用程序。本书共分为四大部分,第一部分主要讲述Web技术的发展及HTML5标准在移动Web技术中的应用;第二部分主要介绍HTML5的新功能和新...
13Y049 中国移动业务支撑网安全管理平台技术规范
本白皮书以中国市场上主流的移动QQ、移动MSN和PICA三种移动IM平台为例,对总体特征、产品性能、终端支持与内容扩展、最终用户体验、品牌知名度等特性进行分析,希望帮助运营商在选择移动IM平台方面进行参考。
HTML5及其在移动设备上的应用前景分析 非常好
《新手学HTML 5移动开发 面向iOS和Android平台》源码
中国移动mas支撑平台系统,支持mas全业务管理及对EC、SI角色进行管理
本规范是中国移动B-BOSS试点系统规划和建设的业务框架性指导文件,全国中心、试点省份应在满足本框架性指导文件的基础上,编制本省的建设方案和业务规范,进行B-BOSS试点系统的项目建设。 本框架文件包括《商业客户...
构建跨平台APP HTML 5+PhoneGap移动应用实战 - 小例子多,不讲究很深的理论,只要求快速上手 - 技术新,使用HTML5和PhoneGap3,移动APP要用最新最快的技术 - 跨平台,结合HTML5和PhoneGap本身的特色,贯穿全书讲解跨...
MISC系统是中国移动“移动梦网”计划中的技术支撑平台、业务资源调度平台,系统采用先进的技术和高扩展性的系统架构,建立一个有中国特色的全网统一的移动数据服务平台,提供全方位信息服务和商务服务的管理,是SP与...