2017最新整理移动Web开发遇到的坑

随着前端的热度不断升温，行业对前端的要求越来越高；精准无误的实现UI设计，已成为前端职业更加精细化的一种表现；
随着移动互联网的发展、WebApp似乎一种不可逾越的鸿沟；越来越多的企业开始趋势于轻量级的设计，H5正在慢慢的发酵可以完成更多的原生体验；
交互质量的提升，对前端更是一种质的飞越；前端作为门槛低，精深难的事实一直被论证，想成为真正大神，要经历痛苦的月球表面-满满的都是坑；
只有爬过来的人，才有资格说：要改变、要革新、做架构~

说了那么多，就是为了小伙伴们在前端的路上更加精细的学习；本文持续更新移动Web的各种大小泥坑~

目录（更新20170216）

1.meta基础知识

<!-- 声明文档使用的字符编码 -->

    <meta charset='utf-8'>

    <!-- 优先使用 IE 最新版本和 Chrome -->

    <meta name="flexible" content="initial-dpr=1"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!-- 页面描述 -->

    <meta name="description" content="不超过150个字符"/>

    <!-- 页面关键词 -->

    <meta name="keywords" content=""/>

    <!-- 网页作者 -->

    <meta name="author" content="male"/>

    <!-- 搜索引擎抓取 -->

    <meta name="robots" content="index,follow"/>

    <!-- iOS 设备 begin -->

    <meta name="apple-mobile-web-app-title" content="标题">

    <!-- 添加到主屏后的标题（iOS 6 新增） -->

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

    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <!-- 设置苹果工具栏颜色 -->

    <meta name="format-detection" content="telphone=no, email=no"/>

    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->

    <!-- 启用360浏览器的极速模式(webkit) -->

    <meta name="renderer" content="webkit">

    <!-- 避免IE使用兼容模式 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <!-- 不让百度转码 -->

    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <!-- windows phone 点击无高光 -->

    <meta name="msapplication-tap-highlight" content="no">

    <meta name="msapplication-TileColor" content="#000"/>

2.移动端字体解决方案

body {

font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;}

iOS 4.0+ （iOS 9以下系统已经非常少） 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。 中文字体设置为华文黑体STHeiTi。
iOS 9+ Safari开始支持 -apple-system 参数， Chrome 使用 BlinkMacSystemFont ，兼容 iOS ／ MacOS
微软雅黑是为了兼容Win系统，毕竟视网膜分辨率的win系统用Simsun是非常丑陋的，可以用4K屏@windowns 去看 JD 淘宝，你能忍的话我就没话说
PingFang SC 是简体苹方，看需要 如果要命中对应 苹方字体的话 直接写 PingFang 不带引号。
4.0之前版本英文字体原生Android使用的是Droid Sans，中文字体原生Android会命中Droid Sans Fallback。
4.0+ 中英文字体都会使用原生Android新的Roboto字体。
其他第三方Android系统也一致选择默认的无衬线字体。
Android 就直接让它命中系统字体吧，因为你无法预知发行厂商会去内置什么字体，或者人家root去修改什么字体。
移动端字体单位font-size选择px还是rem
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

rem配置参考，适合视觉稿宽度为750px的:

html{font-size:10px}

@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

@media screen and (min-width:800px){html{font-size:25px}}

3.Touch事件的详细解析
当用户手指放在移动设备在屏幕上滑动会触发的touch事件
以下支持webkit
touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
TouchEvent
touches：屏幕上所有手指的信息
targetTouches：手指在目标区域的手指信息
changedTouches：最近一次触发该事件的手指信息
touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息
参数信息(changedTouches[0])
clientX、clientY在显示区的坐标
target：当前元素
参考：https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
4.Click事件的延时问题
移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。
原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。
解决方案：
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序
1、ontouchstart 
2、ontouchmove 
3、ontouchend 
4、onclick
解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应。
5.webkit表单输入框placeholder的颜色值能改变么

input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

其他：

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片:.css{-webkit-touch-callout: none}

禁止ios和android用户选中文字:.css{-webkit-user-select:none}

5.常用的移动端框架
zepto.js
语法与jquery几乎一样，会jquery基本会zepto~
最新版本已经更新到1.16
官网：http://zeptojs.com/
中文(非官网)：http://www.css88.com/doc/zeptojs_api/
常使用的扩展模块：
浏览器检测：https://github.com/madrobby/zepto/blob/master/src/detect.js
tap事件：https://github.com/madrobby/zepto/blob/master/src/touch.js
iscroll.js
解决页面不支持弹性滚动，不支持fixed引起的问题~
实现下拉刷新，滑屏，缩放等功能~
最新版本已经更新到5.0
官网：http://cubiq.org/iscroll-5
underscore.js
笔者没用过，不过听说好用，推荐给大家~
该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。
最新版本已经更新到1.8.2
官网：http://underscorejs.org/
滑屏框架
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js
fullpage.js

swiper.js

6.Flex布局
flex布局目前可使用在移动中，并非所有的语法都全兼容，但以下写法笔者实践过，效果良好~

/* ============================================================

   flex：定义布局为盒模型

   flex-v：盒模型垂直布局

   flex-1：子元素占据剩余的空间

   flex-align-center：子元素垂直居中

   flex-pack-center：子元素水平居中

   flex-pack-justify：子元素两端对齐

   兼容性：ios 4+、android 2.3+、winphone8+

   ============================================================ */

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}

.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}

.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}

.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}

.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

7.0.5像素边框的实现
大家都知道，设计稿中的1像素，在页面上其实就是2像素；这时他们就会说，我们的1px太粗；
其实，我们应该用理解的态度对待这件事，因为0.5像素的线确实好看，因为原生的线也是0.5像素；如果你学习了这个方法，其实也不会再介意1px和0.5px了；
下面是一个demo 纯css利用伪类实现，总体来讲还是比较稳定的，要求同级必须是相对定位；

<div class="box">

    <div class="btn">

        0.5像素↓

    </div>

</div>

<style type="text/css" media="all">

    .box{

        width:300px;

        height:300px;

        background-color:#f1f1f1;

    }

    .btn{

        width:300px;

        line-height:150px;

        position:relative;

        background-color:#f1f1f1;

        text-align:center;

    }

    .btn:after {

    content: " ";

    position: absolute;

    left: 0;

    width: 100%;

    height: 1px;

    color: #d9d9d9;

    bottom: 0;

    border-bottom: 1px solid #fff;

    -webkit-transform-origin: 0 100%;

    transform-origin: 0 100%;

    -webkit-transform: scaleY(.5);

    transform: scaleY(.5)

}

/**less写法**/

.bor-b(@col:#eee) {

  position: relative;

  &:after{

    content: " ";

    position: absolute;

    left: 0;

    width: 100%;

    height: 1px;

    color: #d9d9d9;

    bottom: 0;

    border-bottom: 1px solid @col;

    -webkit-transform-origin: 0 100%;

    transform-origin: 0 100%;

    -webkit-transform: scaleY(0.5);

    transform: scaleY(0.5);}

}

</style>

8.解决移动端双击页面上滑问题

function proMove() {

var agent = navigator.userAgent.toLowerCase(); //检测是否是ios

var iLastTouch = null; //缓存上一次tap的时间

if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0) {

document.body.addEventListener('touchend', function(event) {

var iNow = new Date().getTime();

iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;

var delta = iNow - iLastTouch;

if(delta < 500 && delta > 0) {

event.preventDefault();

return false;

}

iLastTouch = iNow;

}, false);

}

}