html5移动web开发实战必读书记
一、配置移动开发环境
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
html5移动web开发实战必读书记的更多相关文章
- HTML5移动Web开发实战 PDF扫描版
<HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web. ...
- html5移动Web开发实战
1.解决横竖屏字体大小变化 html{ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust:100 ...
- 《Java web 开发实战经典》读书笔记
去年年末,也就是大四上学期快要结束的时候,当时保研的事情确定了下来,终于有了一些空闲的时间可以学点实用的技术. 之前做数据库课程设计的时候,也接触过java web的知识,当时做了一个卖二手书籍的网站 ...
- Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接
Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接: 推荐给你高品质的实战课程 https://laravel-china.org/courses?rf=158 ...
- HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
- 《Java Web开发实战》——Java工程师必备干货教材
一年一度毕业季,又到了简历.offer漫天飞,失望与希望并存的时节.在IT行业,高校毕业生求职时,面临的第一道门槛就是技能与经验的考验,但学校往往更注重学生的理论知识,忽略了对学生实践能力的培养,因而 ...
- 《Python Web开发实战》|百度网盘免费下载|Python Web开发
<Python Web开发实战>|百度网盘免费下载|Python Web开发 提取码:rnz4 内容简介 这本书涵盖了Web开发的方方面面,可以分为如下部分: 1. 使用最新的Flask ...
- HTML5离线Web应用实战：五步创建成功
[IT168 技术]HTML5近十年来发展得如火如荼,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化.HTML功能越来越丰富,支持图片上传拖拽.支持localstorage. ...
- Web开发人员必读的12个网站
The more you actually create, the more you’ll learn.(创造的越多,学习的越多),世界上有无数个开发人员会在网上分享他们的开发经验,我们无法向所有人学 ...
随机推荐
- HDU（搜索专题） 1000 N皇后问题（深度优先搜索DFS)解题报告
前几天一直在忙一些事情,所以一直没来得及开始这个搜索专题的训练,今天做了下这个专题的第一题,皇后问题在我没有开始接受Axie的算法低强度训练前,就早有耳闻了,但一直不知道是什么类型的题目,今天一看,原 ...
- <Error>: CGContextRestoreGState: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
转自这里 出 错原因:设置app的状态栏样式的使用使用了旧的方式,在info.plist里面设置了View controller- based status bar appearance为NO,默 ...
- C# 微信扫码支付API （微信扫码支付模式二）
一.SDK下载地址:https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=11_1,下载.NET C#版本: 二.微信相关设置:(微信扫码 ...
- PHP的语言规范
PHP的语言规范: 1.php中的变量名区分大小写,但是函数名,类名,方法名,不区分大小写,但建议区分大小写 2.php代码必须书写在<?php?>(php标签),开启标记(<?ph ...
- union 中可以存储的是不带构造函数的类对象
union 中可以存储的是不带构造函数的类对象 否则不符合逻辑 为什么不符合逻辑?
- POJ 2528 Mayor’s posters
Mayor's posters Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 37982 Accepted: 11030 ...
- 在Mac OS X中使用VIM开发STM32（4）
本文原创于http://www.cnblogs.com/humaoxiao,非法转载者请自重! 在上三篇文章中,我们基本搭建好了开发STM32的IDE环境,当然vim.ctags.tagl ...
- KnockoutJS(2)-监控属性
本节主要涉及到3个内容: 1. 监控属性 Observables (这个用的比较多,但是其本身使用比较简单,唯一需要注意就是,它监控的对象是一个方法,所以取值和设置值的时候容易混淆) 2. 计算属性 ...
- 【Qt】数据库连接池
请查看公孙二狗的文章 数据库连接池
- js获取url参数值的两种方式
js获取url参数值的方法有很多,下面也为大家介绍两种. 方法一:正则分析法 function getQueryString(name) { var reg = new RegExp(" ...