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应用

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

为了满足本地存储数据的需求，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开发中使用的特性：

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

选择器：

地理定位：

HTML5移动web开发指南笔记相关推荐

HTML5移动Web开发指南
HTML5移动Web开发指南唐俊开著 ISBN 978-7-121-16083-7 2012年3月出版定价:59.00元 16开 384页宣传语绝无仅有的HTML5移动Web开发专著 jQu ...
Django企业开发实战高效Python Web框架指南笔记 (一)
Django企业开发实战高效Python Web框架指南笔记 (一) 内容: 作者是 the5fire,他的博客地址:https://www.the5fire.com/957.html 2016年 ...
[转帖]2019 简易Web开发指南
2019 简易Web开发指南 2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术与大家分 ...
HTML5与CSS3权威指南笔记案例1
第1章 <!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title&g ...
Html5和CSS3开发指南学习
Html5和CSS3开发指南学习 1. 为什么学习HTML5 跨平台运行--PC/手机/Pad跨平台使用硬件要求低 flash之外的选择,尤其是手机端开发 2. HTML介绍 2-1 什么是HTML ...
HTML5的web开发,基于Html5技术的WEB开发
摘要:HTML是互联网上应用最广泛的语言,得到了业界大力支持,已经成为WEB发展的标准.它强大了对多媒体的支持力度和远程与本地对数据的处理能力,本文对HTML5的新特性进行了总结,分析了该语言在移动 ...
《HTML5移动Web开发实战》—— 1.6　在移动网站中使用HTML5
本节书摘来异步社区<HTML5移动Web开发实战>一书中的第1章,第1.6节,作者:石川,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.6 在移动网站中使用 ...
web开发指南_成为专业Web开发人员的实用指南
web开发指南 This article is meant to serve as a practical guide to becoming a professional web developer ...
html5移动web开发简答题,HTML5移动Web开发简单知识点介绍
原标题:HTML5移动Web开发简单知识点介绍 1 :基于HTML5的移动Web应用 Canvas绘图:通过获取HTML中的Dom元素Canvas,调用其渲染上下文的Context对象,使用Js进行图 ...

HTML5移动web开发指南笔记

HTML5移动web开发指南笔记相关推荐

最新文章

热门文章