移动端开发基础 干货分享

移动端开发

咱们如今关注的点还在移动M站上，或者咱们能够叫作webapp，其实就是运行在移动端浏览器中的web网站

app:application应用程序。手机软件:主要指安装在智能手机上的软件，完善原始系统的不足与个性化。

移动端开发是与PC端确定是有很大不一样的，因此咱们须要学习如何在移动设备上开发完美适配的app

开发移动端应用咱们须要学习的知识点能够分红以下几个：

1. 移动端布局适配

2. 移动端事件

3. 移动端交互效果

4. 移动端前端框架

5. 移动端调试

移动端布局适配

从屏幕尺寸、屏幕类型等方面来看的话，移动设备和PC设备大有不一样，因此从布局、适配等方面都须要咱们考虑到

Viewport视口的做用

在好久之前，咱们的设备还不是智能设备的时候，设备访问智能访问到网页的左上角（当时都是pc网站），查看所有内容须要经过滚动条

慢慢的咱们发现，咱们的一个页面放到移动端中访问的时候，没有滚动条了，可是内容都缩小了

这是由于咱们有了一个叫作viewport的一个东西

网页不是直接放入浏览器中的，而是先放入到viewport中，而后viewport在等比缩放到浏览器的宽度，放入浏览器，viewport在缩放的过程当中，网页内容也被缩小了

这样的话咱们须要作一些处理，其实问题的根源在于viewport的宽度和浏览器宽度不同，若是咱们能将其设置为同样的话，不会出现这样的问题了

咱们能够经过meta标签来设置viewport将其设置为浏览器的宽度，也就是设备的宽度，这样的话布局就会简单多了

viewport的宽度

当浏览器宽度小于980的时候，宽度就是980，当浏览器尺寸宽度大于980的时候，宽度和浏览器宽度一致

经过meta标签来设置viewport

标签提供关于 HTML 文档的元数据。它不会显示在页面上，可是对于机器是可读的。可用于浏览器（如何显示内容或从新加载页面），搜索引擎（关键词），或其余 web 服务。

meta标签大全

meta viewport 的6个属性：

width	值
initial-scale	设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
minimum-scale	设置页面的初始缩放值，为一个数字，能够带小数
maximum-scale	容许用户的最大缩放值，为一个数字，能够带小数
height	设置layout viewport 的高度，这个属性并不重要，不多使用
user-scalable	是否容许用户进行缩放，值为"no"或"yes", no 表明不容许，yes表明容许

移动端布局方式与设计图

现有的布局方式：

1. 固定布局，每个元素都是固定的尺寸，内容区域居中在浏览器中间

   内容区域的尺寸：980,1000,1100,1200

2. 响应式布局，利用媒体查询来实现不一样尺寸的浏览器显示结构不同

   通常会有三张设计图，PC,平板,手机

3. 自适应布局，属于响应式里的一种，利用rem、百分比、vwvh等布局单位来实现

   设计图通常只有一张，640、750居多

移动端布局

移动的屏幕和PC的屏幕有一个很大的区别，移动端是视网膜高清屏（Retina）

retina屏幕有一个属性叫DPR（设备像素缩放比） = 物理像素/逻辑像素

例如，iphone 5s手机商宣传手机的尺寸是：640宽，这个值就是物理像素，而从开发者眼里咱们所指的实际上是320px（逻辑像素）

在dpr为2的手机中，咱们的一个逻辑像素会从横纵两个方向分别以2个像素点来渲染

若是无论dpr的话，其实咱们布局依然能够，由于咱们设置一个像素宽高的东西的话，在手机上看见的基本也就是这么大，至于手机设备用多少个物理像素去渲染，大小仍是不会变化的

设计师出图都是2倍的，是由于，在页面中除了字体（矢量图）大部分都是位图，也就是若是一个像素宽高的盒子里准备放入图片，若是图片的尺寸也是一个像素宽高的话，由于其实在移动端渲染的时候是用四个像素来渲染，图片会失真，可是若是咱们给一像素宽高的盒子放入2像素宽高的图片的话，不就失真

布局单位

由于咱们的移动设备有不少种，因此咱们的布局不多是固定布局，因此咱们要使用自适应布局

咱们在开发中能够选用不少自适应布局单位，这些单位必须知足一个条件

1. %比布局

   优势：简单，无需设置，兼容性好
   缺点：基于父元素的属性来设置，若是父元素没有宽高，设置无效

2. vwvh

   一个vw等于viewport宽度的百分之一，一个vh等于viewport高度的百分之一
   vmax等于vw和vh中较大的那个 vmin等于vw和vh中较小的那个

   优势：简单，无需设置
   缺点：兼容性很差

3. rem

   一个rem等于根元素（html）的字体大小，兼容性很好

   优势：兼容好，使用简单
   缺点：须要设置

rem与适配

当咱们想使用一个自适应单位的时候，发现%有缺陷，vwvh兼容性差，弹性盒所针对的是元素排列的问题，只适用于某种状况，因此咱们就想，能给我一个没啥上面的缺陷的单位，想到了rem

rem的兼容性好一点，它也确实是一个布局单位，不受父子元素的影响，设置了rem以后，也不会对px、em等单位形成影响，它是一个理想的单位

rem也有一个致命的问题，就是它不是一个自适应的单位，不会跟着设备尺寸不一样而不一样，可是没有关系，咱们有万能的js，能够去动态的设置它

方法1：

咱们能够将1rem设置成屏幕的某一个比例，好比将1rem设置成屏幕的十分之一

假设咱们的设计图是640宽的，咱们拿到以后量了一下a的宽度为480px，获得比例a所占屏幕3/4，根据rem与屏幕的关系，最后设置成7.5rem

就是说在设置元素的宽度是时候，会根据设定好的比例关系去进行换算

方法2：

若是设计图是640的图，这个时候咱们知道它是照着i5来的，咱们如今假设世界上全部的手机都是320的，也就是每个人用的都是i5，在这个理想的状况下，由于手机都同样，尺寸都同样，和pc端的固定布局也就同样了

假设有一个在640的图上咱们量得的宽度是320，由于是二倍图，因此咱们知道，它的实际宽度是160px，这样的话，咱们直接给这个设置设置width：160px就能够了，这个时候，咱们玩个花子，不要单纯的使用px来设置，用rem来设置，例如，我能够将rem设置为100px，这样的，刚才的盒子设置为width：1.6rem，算法就是 量的宽度/(dpr*100) = 要设置的rem值

这样咱们就能够开心的开发，量一个尺寸，除个2，再小数点推两位，设置就性了，可是咱们也知道，手机的尺寸并不可能都是320，这样的话，没有关系，咱们能够根据一个比例来算rem到底设置为多少

在手机宽度为320的时候，咱们设置的1rem=100px，因此有一个比例 b = 100/320

那么在W宽度的手机上，1rem应该是多少呢？设为x 那么x/w = b

获得x = w/3.2

那么就不要写死html的fontsize为100了。而是用js去设置：

document.documentElement.style.fontSize = document.documentElement.clientWidth/3.2 + 'px'

这样，咱们就能够获得一个自适应的rem

方法3：

设计图若是是640的，咱们知道设计的依据屏幕依然是320，假设全部的手机都是320的

有一个div量得320，咱们知道它的实际宽度是160，因此咱们在css里直接设置160px。布局就很简单了，由于量多少，除以2就能够直接设置了

可是手机不能只有这一个尺寸，不过不要紧，咱们能够想办法，咱们知道，页面是放在viewport里的，页面的宽度就是viewport的宽度，咱们在前面的方法会会将viewport经过meta标签设置为手机屏幕的宽度，可是如今咱们就将viewport的宽度强行设置为320px，那么咱们页面就会认为它的屏幕宽度就是320px，若是是在屏幕宽度不等于320的手机里，viewport也会进行缩放，缩放到手机屏幕大小，可是这个时候，页面依然认为手机屏幕是320的，也就是说，布局使用固定布局，自适应由viewport去作了，让它将我们320的页面缩放到不一样尺寸的移动设计，达到表现一致

饿了么的作法：认为世界的手机都是二倍宽的，而后再调整viewport

常见的须要注意的问题

1. 1px边框

   在移动端中，若是给元素设置一个像素的边框的话，那么在手机上看起来是会比一个像素粗的。

   解决方法：使用伪类元素模拟边框，使用transform缩放

.a::after{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: #333;
        position: absolute;
        left: 0;bottom: 0;
        transform: scaleY(0.5)
    }

1. 响应式图片

   在移动端中，图片的处理应该是很谨慎的，假设有一张图片自己的尺寸是X宽，设置和包裹它的div同样宽，若是是div宽度小于图片宽度没有问题，可是若是div宽度大于图片的宽度，图片被拉伸失真

   解决方法：让图片最大只能是本身的宽度

   img{
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

移动端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也很快就有了

1. 不用click，用自定义事件tap

   tap是须要自定义的：若是用户执行了touchstart在很短的时间又触发了touchend，且两次的距离很小，并且不能触发touchmove

   使用zepto类库的时候，里面自带tap事件,，可是须要在zepto.js后面加上一段js

   zepto官网;Touch模块

   百度有一款touch.js的插件教程

   hammar.js也是一个手势事件库文档

2. 引入fastclick库来解决

点透bug的产生

点透bug有一个特定的产生状况：

当上层元素是tap事件，且tap后消失，下层元素是click事件。这个时候，tap上层元素的时候就会触发下层元素的click事件

解决方式：

1. 上下层都是tap事件，缺点：a标签等元素自己就是自带的click事件，更改成tap比较困难
2. 缓动动画，让上层元素消失的时候不要瞬间消失，而是以动画的形式消失，事件超过300ms就能够了
3. 使用中间层,添加一个透明的中间元素，给它添加click事件并消失，这个时候接收点透的是透明的中间层
4. 使用fastclick

移动端测试

1. 使用chrome浏览器有移动设备模拟功能，在这里能够作一些模拟测试，可是要注意的是，毕竟不是真机，会有一些测试不到的问题

2. 手机链接上电脑的无线，总之使其在同一个网络里，而后就能够经过ip访问

须要测试的浏览器：

chrome，firefox，UC,百度，QQ，微信，Android，safari

移动端交互

动画效果所有使用css3

JQ生成二维码

可使用jquery.qrcode.js插件，能够快速的生成基于canvas绘制的二维码

兼容查阅网站

can i use,在这里能够查看不少属性、api的兼容性

375/52.08 = X/100 x = 37500/52.08