html5移动web开发实战必读书记

标签: html5 移动 web | 发表时间:2014-08-12 20:15 | 作者:flowerwrong
出处:http://www.iteye.com

一、配置移动开发环境
1.各种仿真器、模拟器的下载安装
http://www.mobilexweb.com/emulators
https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulators-&-Simulators

2.html5 DTD
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
safari: 设为屏幕宽度,并根据initial-scale=1.0禁止浏览器缩放

3.帮助html5跨浏览器的库
modernizr
html5shim
innershiv

4.使html5元素在旧版本IE中变成块级元素以及css重置

5.始终使用流式布局fluid layout

6.css媒介查询 media query
@media screen and (min-width: 480px) {...}

@media only screen and (min-width: 320px) {...}

7.用户需求分析工具
google analytics
percentmobile

jQuery mobile的浏览器分级列表:http://jquerymobile.com/gbs/
https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices

二、移动端的配置和优化
1.提供启动图标(优化对各种浏览器的支持)

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114-precomposed.png"> # iphone4
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72-precomposed.png"> # ipad
<link rel="apple-touch-icon-precomposed" href="icons/apple-touch-icon-precomposed.png"> # android
<link rel="shortcut icon" href="icons/apple-touch-icon.png"> # symbian60

 

文档:关于触摸式图标的一起

2.避免字体被浏览器自动重置
html {
    -webkit-text-size-adjust: none;
}
改进
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

3.使用px

4.浏览器宽度完整解决方案
<meta name="HandheldFriendly" content="true"> # 古老版本浏览器
<meta name="MobileOptimized" content="320"> # 老版本浏览器
<meta name="viewport" content="width=device-width">

5.修复移动版safari的re-flow scale问题
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0"> # 不能缩放了
使用js代码解决不能缩放问题:

var metas = document.getElementByTagName("meta");
var i;
if(navigator.userAgent.match("/iPhone/i)) {
  for(i=0; i<metas.length; i++) {
    if(meta[i].name == "viewport") {
      metas[i].content = "width=device-width, maximum-scale=1.0, minimum-scale=1.0";
    }
  }
  document.addEventListener("gesturestart", gestureStart, false);
}

function gestureStart() {
  for(i=0; i<metas.length; i++) {
    if(meta[i].name == "viewport") {
      metas[i].content = "width=device-width, maximum-scale=1.6, minimum-scale=0.25";
    }
  }
}

 

更好的版本:https://gist.github.com/903131
jquery mobile版本:https://gist.github.com/1183357

6.在浏览器中启动原生应用
查看safari,黑莓,索爱支持哪些链接启动原生应用

7.iphone下全屏
<meta name="apple-mobile-web-app-capable" content="yes"> # 从界面图标启动时,全屏
<meta name="apple-mobile-web-app-status-bar-style" content="black"> # 顶部一个状态栏
<link rel="apple-touch-startup-image" href="img/1/splash.png"> # 预加载界面图片,类似ajax效果

8.防止ios在聚焦时自动缩放,例如填写表单时
<script>
</script>

9.禁用或者限制部分webkit特性
-webkit-touch-callout
-webkit-user-select
-webkit-tap-highlight-color
-webkit-appearance

为狭窄的浏览器添加省略号功能:
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

三、移动设备的交互方式
1.利用触控来移动页面元素
2.检测盒处理横竖屏切换事件
window.onorientationchange事件
禁止横竖屏对于网友非常困难
3.利用手势旋转页面元素
ongestureend
4.利用滑动创建图库
zepto框架

5.利用手势缩放图片
ongesturechange

四、构建快速响应式移动互联网站点
1.html5标签
header,nav,footer,small,address

2.css3辅助
polyfills库
ultimate css gradient generator # css线性渐变效果编辑器
CSS3 PIE # 兼容IE9

3.响应式
使用modernizr库开检查浏览器对html3和css3的支持
可以用来检查后是否加载respond.min.js
yepnope异步加载

4.检测客户端
.htaccess重定向

5.使用书签冒泡为应用添加桌面快捷方式
mobilebookmark bubble库 from google # 只支持safari

6.构建可伸缩的文本输入框
mobile boilerplate库的helper.js

7.加速按钮反馈
touchstart

8.隐藏浏览器地址栏
MBP.hideUrlBar();

五、移动设备访问
1.获取位置信息
经度、纬度、当前位置的精确程度
navigator.geolocation.getCurrentPosition()

2.跨浏览器定位
geo-location-javascript库
延伸:YQL Geo库

手势缩放:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

3.实时显示地理位置
watchPosition

4.DeviceOrientation事件 # 适用于ios
包括设备移动事件和横竖屏切换事件

5.使用foursquare定位
Marelle基于jquery和coffeescript
https://praized.github.com/marelle/
包括两个例子:登录和签到

foursquare接口列表
https://developer.foursquare.com/docs/libraries.html

六、移动富媒体
1.移动设备上播放音频
<audio>
不支持html5的浏览器使用polyfills解决

2.移动设备上播放视频
<video>
不支持html5的使用<boject>

http://diveintohtml5.info/video.html

3.使用离线缓存
使用.appcache

4.使用网络存储
web storage # 浏览器支持度最高
html5的indexed database api和web sql database
jqueryoffine库

5.使用web workers
javascript多线程的补充

6.使用session和history api构建类Flash导航效果

七、移动设备调试
1.使用opera dragonfly远程调试
2.使用weinre远程调试

3.移动设备上使用firebug
4.使用js console远程调试

5.配置移动safari调试器

八、服务器端性能调优
1.防止移动设备转码
.htaccess配置

2.添加移动设备支持的MIME类型
.htaccess配置 # 针对blackberry和Symbian等

3.正确显示cache manifest # 主要用来做离线应用存储功能,但是扩展名不能被服务器识别
.htccess配置

4.在头文件中设置未来过期时间
.htccess配置

5.使用gzip压缩
.htaccess配置

6.移除etags
.htaccess配置

九、移动性能测试
1.使用blaze的移动设备速度测试

2.在线分析移动页面速度
google page speed

3.pcap网站性能分析

4.移动版http archive

5.使用jdrop存储性能数据

十、拥抱移动互联网特性
1.window.onerror
2.使用ecmascript5中的新方法
3.html5中的新输入类型
date、datetime、month、time、range
4.HTML中内嵌svg
5.position:fixed
6.overflow:scroll # ios5+
-webkit-overflow-scrolling: touch



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [html5 移动 web] 推荐:

html5移动web开发实战必读书记

- - 移动开发 - ITeye博客
一、配置移动开发环境. 1.各种仿真器、模拟器的下载安装. safari: 设为屏幕宽度,并根据initial-scale=1.0禁止浏览器缩放. 3.帮助html5跨浏览器的库. 4.使html5元素在旧版本IE中变成块级元素以及css重置. 5.始终使用流式布局fluid layout. 6.css媒介查询 media query.

【HTML5】Web Storage简析

- - 博客园_首页
什么是Web Storage. web storage是HTML5规范中提出的一种本地存储解决方案. 在这之前,我们在开发中遇到本地存储问题时,通常有两种解决方式. cookie:兼容性最好,但也有不少问题,下面会简单做下对比. 各浏览器实现的非标准化的本地存储方案,如IE的userData,firefox的global storage等,毫无疑问,最大的问题是兼容性.

Lanyrd是如何应用HTML5创建出优秀的移动Web应用的

- - HTML5研究小组
当谈到HTML5移动web应用发展的时候,很多开发者都在等待确定前景一片光明以后才愿意尝试使用它. 确实,HTML5移动web应用有改变整个移动应用生态系统的潜力,但至少在现在,本地应用才是经过试验的开发者真正相信的渠道. 还需要有一些决定性的并且是成功的HTML5移动web应用出现,才会让这个生态系统中的其他人加入进来.

HTML5的Web标准实战

- johnny - blog.moocss.com
我记得2009年下半年的时候,我就开始尝试使用HTML5的新元素,具体的说应该是HTML5的结构性元素的使用. 我使用HTML5的结构性元素重构我的博客,刚开始,查看了大量老外博客,也归纳总结了一下使用场景,在什么情况下使用HTML5的新元素代替原有的没有语义性div,还有如何组织文档内容结构也是比较头疼的事情.

HTML5 Web socket和socket.io - wishyouhappy

- - 博客园_首页
   HTML5的新特性,用于双向推送消息(例如网页聊天,手机推送消息等). client利用regular http请求webpage. 请求的webpage 执行javascript脚本,open a connection to server.. 有新的信息时服务器和客户端可以相互发送信息(Real-time traffic from the server to the client .

Bizness Apps 帮助中小企业同时制作本地移动应用和 HTML5 Web 应用

- walker - 36氪
Bizness Apps 为中小企业提供工具,让他们可以方便快速的创建自己公司的移动应用. 成立于 2010 年 10 月,9 个月内覆盖 20 多个国家,超过 10 种语言,目前已经帮助中小企业创建 1000 多个移动应用. Bizness Apps 的理念在于,他们希望让中小企业主,可以很容易的做出便宜实惠、可定制的移动应用,他们允许用户 DIY 自己的应用,支持 iPhone, iPad 和 Android 平台,用户不需要会编程就可以创建、编辑、管理自己的应用.

HTML5引领下的Web革命

- - 译言-电脑/网络/数码科技
HTML5引领下的Web革命. ACM通讯,第55卷,第7刊,16到17页 10.1145/2209249.2209256. 万维网开发人员最近表示新的HTML5标准对网络的演变过程,工作方式和使用途径而言,都是一次非凡的革新. 新的标准简化了程序运行方式,协调了各种终端设备和应用程序之间互访的入口,给用户带了让人惊喜的全新功能.

Nokia Maps 正式推出 HTML5 web app 版

- - UNWIRE.HK 流動科技生活
看來近年寫程式的趨勢,已由以往的 native app,開始轉向採用 web app,因為後者始終不受平台限制,只要編寫一個支援 HTML-5 格式的 web app,就可以在 iPhone、iPad、Android 手機、平板、Windows Phone 手機、甚至在 Blackberry 平台的裝置上使用,對於研發程式的公司來說,確實是最具經濟效益的方法.

AT&T公布HTML5 Web应用API

- - HTML5研究小组
北京时间1月10日消息,据国外媒体报道,AT&T首席营销官大卫·克里斯托弗(David Christopher)今天在该公司第六届开发者峰会公布了面向HTML5应用的API(应用编程接口)平台API Catalog. HTML5应用可以在多种设备和移动操作系统上运行.   iPhone版Visual Voicemail将是AT&T的首款网络API.

HTML5本地存储 Web Storage - 紫尘

- - 博客园_首页
Web Storage基本介绍.   HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数据的保存时长及数据的共享方式.     localStorage 一直存储在本地,数据存储是永久的,除非用户或程序对其进行删除操作;.