第1页
长沙前端群：12130166
志刚
QQ：4241089 | Tomato
志刚
QQ：4241089 | Tomato
浅谈移动Web开发
第2页
第3页
viewport
也就是可视区域。
移动设备屏幕不同web,改变viewport;
操作的属性有4 个：
width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素）
height - // viewport 的高度 （范围从223 到10,000）
initial-scale - // 初始的缩放比例 （范围从>0 到10）
minimum-scale - // 允许用户缩放到的最小比例
maximum-scale - // 允许用户缩放到的最大比例
user-scalable - // 用户是否可以手动缩 (no,yes)
也就是可视区域。
移动设备屏幕不同web,改变viewport;
操作的属性有4 个：
width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素）
height - // viewport 的高度 （范围从223 到10,000）
initial-scale - // 初始的缩放比例 （范围从>0 到10）
minimum-scale - // 允许用户缩放到的最小比例
maximum-scale - // 允许用户缩放到的最大比例
user-scalable - // 用户是否可以手动缩 (no,yes)
第4页
使用 viewport
target-densitydpi 被弃用了
第5页
网络
window.navigator.onLine检测网络是否可用
window.navigator.onLine检测网络是否可用
navigator.connection 判断网络类型
第6页
localStorage
1、它是同步的。
2、它仅支持字符串。需要使用 JSON.parse 与 JSON.stringify 进行序列号和反序列化。
这是因为 localStorage 中仅支持 JavaScript 字符串值。
不支持数值，布尔值，Blob 类型的数据。
2、它仅支持字符串。需要使用 JSON.parse 与 JSON.stringify 进行序列号和反序列化。
这是因为 localStorage 中仅支持 JavaScript 字符串值。
不支持数值，布尔值，Blob 类型的数据。
第7页
模拟:hover伪类
因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：
因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：
然后用CSS增加hover效果：
a:hover, a.hover { /* 你的hover效果 */ }
a:hover, a.hover { /* 你的hover效果 */ }
第8页
// 隐藏地址栏 & 处理事件的时候 ，防止滚动条出现
addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});
添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）
第9页
启用原声应用
首先通过URL Scheme尝试打开本地APP，如果打开成功，网页中setTimeout将会挂起，重新回到页面时超时不再执行，否则，如果打开失败，则尝试下载或进入下载页面。
首先通过URL Scheme尝试打开本地APP，如果打开成功，网页中setTimeout将会挂起，重新回到页面时超时不再执行，否则，如果打开失败，则尝试下载或进入下载页面。
http://www.zhihu.com/question/19907735
第10页
需求：
按屏滚动即用户滑动屏幕翻页，屏幕自动锁定到当前页。我们会碰到的问题：
按屏滚动即用户滑动屏幕翻页，屏幕自动锁定到当前页。我们会碰到的问题：
重置<html>高度；
document.documentElement.style.height = window.innerHeight + 'px';
第11页
如何解决音频播放预加载与延时的问题
第12页
摇一摇功能
//DeviceOrientation包括两个事件：
//1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。
//2、deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。
第13页
https://github.com/educastellano/qr-code/tree/gh-pages/src
二维码生成
第14页
重力感应的实现相对简单，具体见如下代码。值得注意的是，android需3.0及以上才支持。
第15页
http://cubiq.org/iscroll-5
http://touch.code.baidu.com/
第16页
1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。
备注：transparent的属性值在android下无效。
2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影，解决iOS下无法修改按钮样式，测试还发现一个小问题就是，加了上面的属性后，iOS下默认还是带有圆角的，不过可以使用 border-radius属性修改。
3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅（这个属性会调用硬件加速模式，无需通过JS引擎，直接浏览器内核渲染），但是在android下不可乱用，很多见所未见的bug就是因为这个。
4、@-webkit-keyframes可以预定义很多你所想到的动画，然后通过-webkit-transition来调用。
5、-webkit-background-size可以做高清图标，不过一些低版本的android只能识别background-size，所以有必要两个都要写上；用这个属性的时候推荐用cover这个值，可以自动去匹配宽和高。
6、border-radius、box-shadow、gradient、border-image，不解释，可以精简代码。
7、android、ios4及以下，固定宽/高块级元素的overflow:scroll/auto失效，属于浏览器的bug，可借助第三方工具实现。
8、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。
9、css3动画会影响你的自动聚焦，所以自动聚焦要在动画执行之前来做，或者直接舍弃。
10、如果涉及较多域外链接，DNS Prefetching可以帮你做DNS预解析。
11、如果你希望你的站点更多地在SNS上传播，那么Open Graph Protocol会比较适合你。
12、当用iScroll时候，不能使用:focus{outline:0}伪类，否则滑动会卡。
13、IOS禁止横竖屏时字体变大，-webkit-text-size-adjust: none;
14、iphone的Retina显示屏的css中的数值都得翻倍，包括图片大小也得翻倍，Retina显示屏精致，可以简单理解为Retina显示屏上的1像素相当于普通的2像素。
15、解决闪屏，-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d；
16、触摸事件用touch系列，不要用click替代；
17、关于电量，JPEG最省电（JPEG>PNG>GIF）,图片数量约多，约大约耗电，AJAX动态内容耗电，reflow和repaint耗电，webGL和translate3d耗电
备注：transparent的属性值在android下无效。
2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影，解决iOS下无法修改按钮样式，测试还发现一个小问题就是，加了上面的属性后，iOS下默认还是带有圆角的，不过可以使用 border-radius属性修改。
3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅（这个属性会调用硬件加速模式，无需通过JS引擎，直接浏览器内核渲染），但是在android下不可乱用，很多见所未见的bug就是因为这个。
4、@-webkit-keyframes可以预定义很多你所想到的动画，然后通过-webkit-transition来调用。
5、-webkit-background-size可以做高清图标，不过一些低版本的android只能识别background-size，所以有必要两个都要写上；用这个属性的时候推荐用cover这个值，可以自动去匹配宽和高。
6、border-radius、box-shadow、gradient、border-image，不解释，可以精简代码。
7、android、ios4及以下，固定宽/高块级元素的overflow:scroll/auto失效，属于浏览器的bug，可借助第三方工具实现。
8、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。
9、css3动画会影响你的自动聚焦，所以自动聚焦要在动画执行之前来做，或者直接舍弃。
10、如果涉及较多域外链接，DNS Prefetching可以帮你做DNS预解析。
11、如果你希望你的站点更多地在SNS上传播，那么Open Graph Protocol会比较适合你。
12、当用iScroll时候，不能使用:focus{outline:0}伪类，否则滑动会卡。
13、IOS禁止横竖屏时字体变大，-webkit-text-size-adjust: none;
14、iphone的Retina显示屏的css中的数值都得翻倍，包括图片大小也得翻倍，Retina显示屏精致，可以简单理解为Retina显示屏上的1像素相当于普通的2像素。
15、解决闪屏，-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d；
16、触摸事件用touch系列，不要用click替代；
17、关于电量，JPEG最省电（JPEG>PNG>GIF）,图片数量约多，约大约耗电，AJAX动态内容耗电，reflow和repaint耗电，webGL和translate3d耗电
第17页
加载中有哪些优化手段：
基于联通3G网络平均338KB/s(2.71Mb/s)
第18页
A.显性加载
第19页
B.隐性加载
第20页
C.按需加载
第21页
D.响应式加载方式
第22页
JPEG复杂颜色及形状、尤其是照片
而对于png有以下结论：
a.多彩图片使用png24
b.低彩图片使用png8
而对于png有以下结论：
a.多彩图片使用png24
b.低彩图片使用png8
第23页
非常小的图片可以直接用base64
第24页
第25页
第26页
第27页
一代宗师。
学习，分享，再学习....
第28页
Thank you！