持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

一、移动端基础事件

手指按下：touchstart <==> mousedown
手指抬起：touchend <==> mouseup
手指移动：touchmove <==> mousemove

touch事件

在chrome的模拟器下，部分版本通过on的方式来添加事件无效，有时候时好时坏，on的方式还会出现事件覆盖

addEventListener(‘事件名’, 函数, 冒泡或捕获)

不会存在前后覆盖问题
在chrome的模拟器下可以一直识别
false-冒泡,true-捕获

冒泡：点击元素，它会把一个事件一直向上传递，从下向上传递

捕获：从上向下传递

事件函数中默认的第一个参数是event对象
e.preventDefault()：阻止默认事件

阻止掉 document touchstart的默认事件，可以解决：

①阻止页面上文字被选中，②阻止页面上的系统菜单

隐患：页面上的所有滚动条失效

e.stopPropagation()：阻止冒泡事件
阻止document的touchmove或者touchstart，可以清除系统默认的回弹

事件点透

PC端的鼠标事件在移动端也可以正常使用，但是注意：事件的执行会有300ms的延迟

我们点击了页面后，浏览器会记录点击下去的坐标，然后300ms后，在该坐标找到现在在这里的元素执行事件

解决办法：1) 阻止默认事件(部分安卓机型不支持)

2) 不在移动端使用鼠标事件，不用a标签做页面跳转

touchEvent

touches：当前屏幕上的手指列表
targetTouches：当前元素的手指列表
changedTouches：触发当前事件的手指列表

二、滑屏原理

① 手指按下去的时候，记录下手指坐标
② 移动的时候，记录下手指坐标
③ 用移动后的坐标 - 移动前的坐标 = 手指移动的距离
④ 手指按下去的时候，记录下元素的位置
⑤ 移动之后，用手指移动的距离 + 元素的初始位置 = 元素现在所要在的位置

三、transform 与 transition

（1）transform/-webkit-transform（移动端）：
  rotate：旋转 deg（度数）
  scale：缩放
  scaleX：X缩放
  scaleY：Y缩放
  translateX：X位移（px）
  translateY：Y位移（px）
  skewX：x斜切（度数）
  skewY：y斜切（度数）

（2）transition：
  transition-duration：动画时间
  transition-delay：延迟时间
  transition-property：要动画的样式
  transtion-timing-function：动画形式

四、使用rem作为单位

给手机设置100px的字体大小，对于320px，其他手机都是等比例匹配；因此设计稿上是多少像素的话，那么转化为rem的时候，rem/100即可；

五、禁用a,button,input,select,textarea等标签背景变暗

在移动端点击后会出现“暗色”的背景，这时候我们需要在css加入如下代码即可：

a, button, input, optgroup, select, textarea {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

六、meta基础知识点

页面窗口自动调整到设备宽度，并禁止用户缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">

属性基本含义：

属性	含义
width=device-width	控制viewport的大小
device-width	设备的宽度
initial	初始的缩放比例
minimun-scale	允许用户缩放到的最小比例
maximun-scale	允许用户缩放到的最大比例
user-scalable	用户是否可以手动缩放

更多的meta：

<!-- 编码格式 -->
  <meta charset="UTF-8">
  <!-- 页面窗口自动调整到设备宽度，并禁止用户缩放页面 -->
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <!-- 忽略将页面中的数字识别为电话号码 -->
  <meta name="format-detection" content="telephone=no">
  <!-- 忽略 android 平台对邮箱的识别 -->
  <meta name="format-detection" content="email=no">
  <!-- 当网站添加到主屏幕快速启动方式，可隐藏地址栏，进针对ios的safari-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <!-- 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <!-- 可选default、black、black-translucent -->
  <!-- 需要在网站的根目录下存放favicon图标，防止404请求 -->
  <link rel="shortcut icon" href="/favicon.ico">

七、移动端如何定义字体font-family

/* 移动端定义字体font-family */
    body {
      font-family: "Helvetica Neue", Helvetica, sans-serif;
    }

八、在android或者IOS下拨打电话

<!-- 在ios或者android下拨打电话 -->
<a href="tel:12345678910">打电话给12345678910</a>

九、发送短信（winphone无效）

<!-- 发送短信（winphone系统无效）-->
<a href="sms:10010">发送短信给10010</a>

十、调用手机系统自带的邮件功能

当用户点击这个链接时，浏览器会自动调用默认的客户端电子邮件客户端，并在收件人框中自动填上收件人的地址：

<!-- 填写抄送地址：-->
<!-- ios要用cc=开头-->
<a href="mailto:zhoujin0606@qq.com?cc=xxxxx@qq.com">填写抄送地址</a>
<!-- android如下 -->
<a href="mailto:zhoujin0606@qq.com?xxxxx@qq.com">填写抄送地址</a>
<!-- 填写密件地址：-->
<!-- ios紧跟抄送地址之后，用&bcc=填上密件抄送地址 -->
<a href="mailto:zhoujin0606@qq.com?cc=xxxxx@qq.com&bcc=xxxxx@qq.com">填写密件抄送地址</a>
<!-- android如下 -->
<a href="mailto:zhoujin0606@qq.com?xxxxx@qq.com?xxxxx@qq.com">填写密件抄送地址</a>
<!-- 包含多个收件人、抄送、密件抄送人，用分号(;)隔开即可-->
<a href="mailto:zhoujin0606@qq.com;zhoujin0606@qq.com;zhoujin0606@qq.com">包含多个收件人、抄送、密件抄送人，用分号(;)隔开即可</a>
<!-- 包含主题，用?subject= 可以填上主题 -->
<a href="mailto:zhoujin0606@qq.com?subject=【邀请函】">包含主题</a>
<!-- 包含内容 用?body-->
<a href="mailto:zhoujin0606@qq.com?body=内容">包含内容</a>
 
<!-- 内容包含链接 -->
<a href="mailto:zhoujin0606@qq.com?body=http://aizhoujin.top">包含内容链接</a>

十一、webkit表单输入框placeholder的颜色值改变

修改默认的颜色:

input::-webkit-input-placeholder{
      color: red;
    }

修改用户操作操作时的颜色

input:focus::-webkit-input-placeholder{
      color: blue;
    }

十二、移动端IOS手机下清楚输入框的内阴影

input,textarea{
      -webkit-appearance: none;
    }

十三、在IOS中禁止长按链接与图片的弹出菜单

a,img{
      -webkit-touch-callout: none;
    }

十四、calc基本语法

它可以支持加，减，乘，除; 在做手机端的时候非常有用的一个知识点;

优点如下：

支持使用 "+"、"-"、"*"、"/" 四则运算
可以混合使用百分比(%)、px、em、rem等作为单位可进行计算

浏览器兼容性：IE9+、FF4.0+、chrome19+、safari6+

用法：

.box {
         width: calc(100% - 20px - 2em);
}
<div class="box">
    测试文本
</div>

十五、移动端开发注意事项

1、安卓浏览器看背景图片，有些设备会模糊。

用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？

经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。

想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了。

代码如下：

background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;display:inline-block; width:100%; height:50px;

或者指定 background-size:contain;都可以。

2、图片加载

若您遇到图片加载很慢的问题，对这种情况，手机开发一般用canvas方法加载：

具体的canvas API 参见：javascript.ruanyifeng.com/htmlapi/can…

下面举例说明一个canvas的例子：

<li><canvas></canvas></li>

js动态加载图片和li 总共举例17张图片！

var total=17;
var zWin=$(window);
var render=function(){
 var padding=2;
 var winWidth=zWin.width();
 var picWidth=Math.floor((winWidth-padding*3)/4);
 var tmpl ='';
 for (var i=1;i<=totla;i++){
 var p=padding;
 var imgSrc='img/'+i+'.jpg';
 if(i%4==1){
  p=0;
 }
 tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';
 var imageObj = new Image();
 imageObj.index = i;
 imageObj.onload = function(){
   var cvs =$('#cvs_'+this.index)[0].getContext('2d');
   cvs.width = this.width;
   cvs.height=this.height;
   cvs.drawImage(this,0,0);
 }
 imageObj.src=imgSrc;
 }
}
render();

3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs。

zeptojs内置Touch events方法，具体可以看zeptojs.com/#Touch events

看了一下zeptio新版的API，已经支持IE10以上浏览器，对zeptojs可以选择使用！

4、防止手机中网页放大和缩小。

这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport

还有就是，有些手机网站我们看到如下声明：

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

设置了DTD的方式是XHTML的写法，假如我们页面运用的是html5，可以不用设置DTD,直接声明。

使用viewport使页面禁止缩放。通常把user-scalable设置为0来关闭用户对页面视图缩放的行为

<meta name="viewport" content="user-scalable=0" />

但是为了更好的兼容，我们会使用完整的viewport设置。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。

5、apple-mobile-web-app-capable

apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。

语法：

<meta name="apple-mobile-web-app-capable" content="yes">

说明：

如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

6、format-detection

format-detection 启动或禁用自动识别页面中的电话号码。

语法：

<meta name="format-detection" content="telephone=no">

说明：

默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。

7、html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。

如下：

<a href="tel:10010">10010</a>

H5移动端开发