HTML5移动web开发指南笔记

手机内置浏览器：

•  Android：Andriod Browser
• IOS：Mobile Safari
• BlackBerry：Webkit
• Symbian S60： Web Browser for S60

其浏览器的核心都是基于Webkit

Webkit简介：

    一种浏览器引擎，同时也是一个开源的项目

Web浏览器带来的意义：

    可以通过浏览器直接访问任何通过HTML静态语言或类似PHP、ASP等动态语言构建的Web网站或应用程序

智能手机Web浏览器的特点:

• 有限的屏幕尺寸
• 触屏、缩放
• 硬件设备的提升
• 基于Webkit内核

原生APP的优缺点：

    优点：

•  更好的用户体验和交互操作
• 不收网络限制，节省带宽
• 可以充分发挥设备硬件和操作系统的特性

    缺点：

• 平台间移植困难，存在版本间的兼容问题的风险
• 开发周期长，维护成本高，调试困难
• 需要依赖第三方应用商店的审核上架

WebAPP优缺点：

    优点：

•  开发效率高，成本低；
• 跨平台应用，界面风格统一；
• 调试和发布方便，一次编写，云端升级；
• 无须安装或更新。

    缺点：

• •无法发挥本地硬件和操作系统的优势；
• •受网络环境的限制；
• •难以实现复杂的用户界面效果。

基于HTML5的移动Web应用

1. Canvas绘图
2. 多媒体：但是其支持的格式 不相同，实现多媒体功能还需要时间
3. 本地存储：

为了满足本地存储数据的需求，HTML5标准中新增两种存储机制，WebStorage和WebSQLDatabase。前者通过提供key/value方式存储数据，后者通过类似关系数据库的 形式存储数据。

移动Web浏览器对WebStorage的支持情况比较理想。

      4.    离线应用

      5.   使用地理位置

现在，很多现代浏览器中都实现了一种神奇的功能，它能实时获取到你当前在地图 上所在的位置。

虽然地理定位标准严格上来说并不属于HTML5标准规范的一部分，但它已经逐渐 得到大部分浏览器的支持。

      6.  移动Web框架

因为有了Webkit和HTML5的支持，越来越多的Web开发者开始研究基于移动平台的Web应用框架，例如基于jQueiy页面驱动的jQueryMobile、基于ExtTS架构的SenchaTouch，以及能打通Web和Native两者之间通道的PhoneGap框架。

HTML5本地存储:Web Storage

判断是否支持web storage:

if(window.localStorage){

      //浏览器支持localStorage

 }

if(window.sessionStorage){

    //浏览器支持sessionStorage

}

   

需要注意的是，Opera公司发布的Opera Mobile和Opera Mini两款移动Web浏览器 虽然都适用于手机浏览器，但两者是有区别的。Opera Mobile仅用于Android和Symbian 智能手机，而Opera Mini则适用于几乎所有的手机。由于Opera Mini的渲染过程在服务 器端，因此对HTML5的支持并不理想。Opera系列的移动浏览器虽然在对HTML5的 支持上稍显逊色，但完全不影响iOS和Android平台系列的支持，而且Symbian也得到 Opera Mobile的支持，因此完全可以放心地使用Web Storage特性。

localStorage:

    

localStorage保存的数据，一般情况下是永久保存的，也就是说只要采用localStorage 保存信息，数据便一直存储在用户的客户端中。即使用户关闭当前Web浏览器后重新 启动，数据仍然存在。直到用户或程序明确指定删除，数据的生命周期才会结束。

localStorage是域内安全的，即localStorage是基于域的，任何在该 域内的所有页面，都可以访问localStorage数据。但仍然存在一个问题，就是各个浏览 器厂商的浏览器之间的数据是各自独立的。也就是说,如果在Firefox中使用localStorage存储一组数据，在Chrome浏览器下是无法读取的。同样，由于localStorage数据是保存 在用户的设备中的，因此同一个应用程序在不同设备上保存的数据是不同

离线应用：

    

    离线与缓存：都是为了更好滴缓存各种文件以提高读取的速度

    

检查浏览器是否支持离线应用：

    

    

注意：

manifest文件编写：

监听离线情况：

判断浏览器在线或离线：

form表单属性：

CSS3最适合在移动web开发中使用的特性：

• 增强的选择器
• 阴影
• 强大的背景设置
• 圆角边框

选择器：

    

    

    

    

    

    

    

    

    

            

    

        

    

    

    

地理定位：