移动端开发
叫做webapp
知识点可以分成如下几个：
移动端布局适配
移动端事件
移动端交互效果
移动端前端框架
移动端调试
移动端布局适配
Viewport视口的作用
网页不是直接放入浏览器中的，而是先放入到viewport中，然后viewport在等比缩放到浏览器的宽度，放入浏览器，viewport在缩放的过程中，网页内容也被缩小了
网页访问到的clientWidth其实是viewport的宽度
这样的话我们需要做一些处理，其实问题的根源在于viewport的宽度和浏览器宽度不一样，如果我们能将其设置为一样的话，不会出现这样的问题了
我们可以通过meta标签来设置viewport将其设置为浏览器的宽度，也就是设备的宽度，这样的话布局就会简单多了
viewport的宽度
当浏览器宽度小于980的时候，宽度就是980，当浏览器尺寸宽度大于980的时候，宽度和浏览器宽度一致
通过meta标签来设置viewport
<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
meta viewport 的6个属性：
| width | 值 |
|---|---|
| initial-scale | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| minimum-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，这个属性并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
移动端布局方式与设计图
现有的布局方式：
-
固定布局，每一个元素都是固定的尺寸，内容区域居中在浏览器中间
内容区域的尺寸：980,1000,1100,1200
-
响应式布局，利用媒体查询来实现不同尺寸的浏览器显示结构不一样
一般会有三张设计图，PC,平板,手机
-
自适应布局，属于响应式里的一种，利用rem、百分比、vwvh等布局单位来实现
设计图一般只有一张，640、750居多
移动端布局
移动的屏幕和PC的屏幕有一个很大的区别，移动端是视网膜高清屏（Retina）
retina屏幕有一个属性叫DPR（设备像素缩放比） = 物理像素/逻辑像素
例如，iphone 5s手机商宣传手机的尺寸是：640宽，这个值就是物理像素，而从开发者眼里我们所指的其实是320px（逻辑像素）
在dpr为2的手机中，我们的一个逻辑像素会从横纵两个方向分别以2个像素点来渲染
如果不管dpr的话，其实我们布局依然可以，因为我们设置一个像素宽高的东西的话，在手机上看见的基本也就是这么大，至于手机设备用多少个物理像素去渲染，大小还是不会变化的
设计师出图都是2倍的，是因为，在页面中除了字体（矢量图）大部分都是位图，也就是如果一个像素宽高的盒子里准备放入图片，如果图片的尺寸也是一个像素宽高的话，因为其实在移动端渲染的时候是用四个像素来渲染，图片会失真，但是如果我们给一像素宽高的盒子放入2像素宽高的图片的话，不就失真
布局单位
因为我们的移动设备有很多种，所以我们的布局不可能是固定布局，所以我们要使用自适应布局
我们在开发中可以选用很多自适应布局单位，这些单位必须满足一个条件
-
%
优点：简单，无需设置，兼容性好缺点：基于父元素的属性来设置，如果父元素没有宽高，设置无效
-
vwvh
一个vw等于viewport宽度的百分之一，一个vh等于viewport高度的百分之一vmax等于vw和vh中较大的那个 vmin等于vw和vh中较小的那个
优点：简单，无需设置缺点：兼容性不好
-
rem
一个rem等于根元素（html）的字体大小，兼容性很好
优点：兼容好，使用简单缺点：需要设置
rem与适配
当我们想使用一个自适应单位的时候，发现%有缺陷，vwvh兼容性差，弹性盒所针对的是元素排列的问题，只适用于某种情况，所以我们就想，能给我一个没啥上面的缺陷的单位，想到了rem
rem的兼容性好一点，它也确实是一个布局单位，不受父子元素的影响，设置了rem之后，也不会对px、em等单位造成影响，它是一个理想的单位
rem也有一个致命的问题，就是它不是一个自适应的单位，不会跟着设备尺寸不同而不同，但是没有关系，我们有万能的js，可以去动态的设置它
方法1：
我们可以将1rem设置成屏幕的某一个比例，比如将1rem设置成屏幕的十分之一
假设我们的设计图是640宽的，我们拿到之后量了一下a的宽度为480px，得到比例a所占屏幕3/4，根据rem与屏幕的关系，最后设置成7.5rem
就是说在设置元素的宽度是时候，会根据设定好的比例关系去进行换算
<script>
<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="n158" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; display: block; break-inside: avoid; text-align: left; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">document.documentElement.style.fontSize = document.documentElement.clientWidth/10 + 'px'</pre>
</script>
常见的需要注意的问题
-
1px边框
在移动端中，如果给元素设置一个像素的边框的话，那么在手机上看起来是会比一个像素粗的。
解决方法：使用伪类元素模拟边框，使用transform缩放
<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="n202" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; display: block; break-inside: avoid; text-align: left; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">
.a::after{
content: '';
display: block;
width: 100%;
height: 1px;
background: #333;
position: absolute;
left: 0;bottom: 0;
transform: scaleY(0.5)
}</pre>
-
响应式图片
在移动端中，图片的处理应该是很谨慎的，假设有一张图片本身的尺寸是X宽，设置和包裹它的div一样宽，如果是div宽度小于图片宽度没有问题，但是如果div宽度大于图片的宽度，图片被拉伸失真
解决方法：让图片最大只能是自己的宽度
<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="n211" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; display: block; break-inside: avoid; text-align: left; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">
img{
max-width: 100%;
display: block;
margin: 0 auto;
}</pre>
移动端webkit
移动端的浏览器的内核百分之99都是webkit内核
移动端事件
移动端中的事件和PC的事件有一些是不同的，例如，mouse部分事件在移动端里没有了
取而代之的是touch事件：
touchstart/touchmove/touchend/touchcancel
添加事件的时候可以用ontouchstart，但是有的时候很可能失效，建议使用addEventListener的方式
touchcancel比较少见，在系统取消触摸的时候触发
touch事件对象里面的属性和mouse的略有不同，例如在mouse事件里可以直接从事件对象里取出pageX,clientX,screenX
touch事件对象里有touches,changedTouches,targetTouches三个属性，上面保存着关键的位置信息
它们里面保存的是触发事件的手指的信息，但是要注意，虽然三个里面保存的信息看似都一样，但是在touchend事件里，只能使用changedTouches
click的300ms延迟问题
在移动端中，click事件是生效的，但是它有一个问题，点击之后会有300ms的延迟响应
原因：safari是最早做出这个机制的，因为在移动端里，浏览器需要等待一段事件来判断此次用户操作是单击还是双击，所以就有click300ms的延迟机制，Android也很快就有了
-
不用click，用自定义事件tap
tap是需要自定义的：如果用户执行了touchstart在很短的时间又触发了touchend，且两次的距离很小，而且不能触发touchmove
使用zepto类库的时候，里面自带tap事件,，但是需要在zepto.js后面加上一段js
百度有一款touch.js的插件教程
hammer.js也是一个手势事件库文档
引入fastclick库来解决
点透bug的产生
点透bug有一个特定的产生情况：
当上层元素是tap事件，且tap后消失，下层元素是click事件。这个时候，tap上层元素的时候就会触发下层元素的click事件
解决方式：
上下层都是tap事件，缺点：a标签等元素本身就是自带的click事件，更改为tap比较困难
缓动动画，让上层元素消失的时候不要瞬间消失，而是以动画的形式消失，事件超过300ms就可以了
使用中间层,添加一个透明的中间元素，给它添加click事件并消失，这个时候接收点透的是透明的中间层
使用fastclick
移动端测试
使用chrome浏览器有移动设备模拟功能，在这里可以做一些模拟测试，但是要注意的是，毕竟不是真机，会有一些测试不到的问题
手机连接上电脑的无线，总之使其在同一个网络里，然后就可以通过ip访问
需要测试的浏览器：
chrome，firefox，UC,百度，QQ，微信，Android，safari
移动端交互
动画效果全部使用css3
JQ生成二维码
可以使用jquery.qrcode.js插件，可以快速的生成基于canvas绘制的二维码
兼容查阅网站
can i use ,在这里可以查看很多属性、api的兼容性
