前端开发-企业实战之web移动端兼容和常见技巧

最近在一家还算比较大的公司的前端岗位实习，以下是我实战开发中和公司大佬内部技术分享会上罗列的主要移动端开发技巧和兼容问题的总结

移动端H5页面的概念以及和web端的区别

刚就业是我也是被手机端和web端搞混了，当时简历写的面向web端的，想来也是糊涂和偏执。

基本概念

部分人把手机端也称为web端？？
按照我的习惯和大佬的称谓，移动端的页面开发可称为移动H5页面、wap页面、流应用。电脑端（大显示器环境，也可包括部分电脑）成为PC端、web端。

目前属于移动互联网时代，前端由传统的web前端转向手机端的流应用（app内嵌页、小程序、wap网页）
刚实习前，我对移动端的概念不深，从来没专门做过移动端，倒是做过一些web端又兼容移动端的响应式布局。准备面试时抱佛脚刷了一些博文，了解到，web端常用的布局方式是px；兼容不同屏幕大小就是用媒体查询即响应式；主要在手机端打开就是用rem布局。真实情况怎么样呢，请看下文

区别

1.浏览器内核区别

• PC五大浏览器：IE、Chrome、火狐、Safari、Opera，外加各种国产双核+ IE七大版本：6 7 8 9 10 11 Edge
• 移动端：Webkit引擎，-webkit-前缀

虽然移动端的内核单一，但还是要考虑低版本手机（老安卓）怪异模式、不支持滚动等逼死人的缺陷。
2.对编程语言的支持

• PC端就不说了，IE永远过不去的坎…
• 移动端对HTML5的支持包括主流的：新标签、新特性（所以称之为移动H5页面也是有道理的）
• 移动端对CSS3的支持：transform、transition、keyframes、flex（CSS3动画、弹性布局放心用）
• 移动端对JS(ES5、ES6)的支持：every、some、forEach、filter、map，（ES6没问题，但有时要考虑使用老版本的插件库所以完全使用ES6只是接近可能）
  3.移动端常使用的库
• 移动端常用库：zepto、swipe、iscroll、arttemplate、fastclick（每个库干啥的，按照名字百度即可，这里就不细说了）
  移动端touch事件：touchstart、touchmove、touchend、touchcancel（移动端click会有延迟）
  4.视口
  见过宇宙条的面试题 要求写viewport并解释含义，当时一脸懵逼
  下面一段（不懂可baidu）
  可视窗口

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

常见的移动端兼容问题

屏幕尺寸和安卓浏览器引擎

移动端使用rem，可是rem是相对根元素大小的布局单位，在调试时效果比px相比差远了。
在实际开发中并不直接使用rem，而是通过webpack等打包器将px转化为rem，那么本地调试呢？vs code中有个easy LESS插件可以在保存less时将其转化为css。什么是less？可编译的类css样式语言。没错现在主流开发并不直接写原生css

常见兼容性问题

不支持的特性：优雅降级
Can i use：http://caniuse.com/

问题1：flex兼容性

1. 新老版本写法，建议用Autoprefixer 自动添加前缀：
   

2. flex-wrap支持较差，慎用。一行两个的商品流式布局还是用float吧。

3. 某些手机浏览器，flex不生效，需要手动把flex容器内的行内元素设置
   display:block,或者display:inline-block

4. UC近期版本才开始支持justify-content:space-around

问题2：click延时

移动端浏览器click事件，会有大概300ms的延时。

解决方案：

1. 换用zepto的tap事件
2. 使用fastclick.js库

问题3：tap穿透

页面上有个浮层，给浮层或里面的按钮绑定tap事件，点击需要关掉浮层，结果会触发点击下面的页面，点到链接或者输入框。
解决方案：

1. 监听touchend事件，并在事件中使用preventDefault()阻止冒泡
2. tap换成click
3. 延迟关闭浮层
4. 使用fastclick.js库
   tap穿透详细原因
   用户在点击tap事件（touchstart、touchend）时需要冒泡到document上才会触发。然而用户在touchstart和touchend时会触发click事件，但是此时click事件处于延时300ms，如果在这300ms之内tap事件已经完成，将上层元素删除或隐藏。在300ms到来之际，根据click事件的原则（当click事件的元素处于最上层时会处于click事件，所以有的时候错误的z-index的设置导致无法触发click事件），下层事件被执行，出现穿透现象。当下层是input元素，即使没有绑定click事件，由于其默认聚焦弹出键盘，穿透现象尤为严重。

问题4：1像素边框

由于设备像素比的存在，前端页面上设置的1px的线，最后渲染出来可能是1个、2个、3个设备物理像素。
解决方案：

1. 设置宽度.5px, 有些设备不支持
2. transform:scale(x,y)，设置线条为1px，然后通过transform:scale(x,y)来缩放线条为原来的一半。参考http://www.cnblogs.com/PeunZhang/p/4709822.html

问题5：webp

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

上图为前端基础库app.js中的代码，懒加载图片时会自动判断是否加载webp格式图片。

问题6：app唤醒

启动应用程序
有些浏览器不能成功唤醒，如UC、微信等，听天由命吧。