移动端开发知识小结

meta标签相关

viewport：能优化移动浏览器的显示。

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会致使 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

若是不是响应式网站，不要使用initial-scale或者禁用缩放。
适配 iPhone 6 和 iPhone 6plus 则须要写：

<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">

大部分 4.7~5 寸的安卓设备的 viewport宽设为 360px，iPhone 6 上倒是 375px，大部分 5.5 寸安卓机器（好比说三星 Note）的 viewport宽为 400，iPhone 6 plus 上是 414px。

width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
height：高度（数值 / device-height）（范围从223 到10,000）
initial-scale：初始的缩放比例 （范围从>0 到10）
minimum-scale：容许用户缩放到的最小比例
maximum-scale：容许用户缩放到的最大比例
user-scalable：用户是否能够手动缩 (no,yes)
minimal-ui：能够在页面加载时最小化上下状态栏。（已弃用）
注意，不少人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户须要手动移动页面或者缩放。若是和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到所有的内容。

WebApp全屏模式：假装app，离线应用。

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

移动端的meta

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telephone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，好比黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->

移动端事件

zepto封装的手势事件

• tap —元素tap的时候触发。

singleTap and doubleTap — 这一对事件能够用来检测元素上的单击和双击。(若是你不须要检测单击、双击，使用 tap 代替)。

• longTap — 当一个元素被按住超过750ms触发。
• swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过期触发。(可选择给定的方向)

手机浏览器经常使用手势动做监听封装

现今大多数触屏手机webkit内核提供了touch事件的监听，让开发者能够获取用户触摸屏幕时的一些信息。

其中包括：touchstart,touchmove,touchend,touchcancel 这四个事件

touchstart,touchmove,touchend事件能够类比于mousedown，mouseover ，mouseup的触发

而touchcancel许多人不知道它在何时会被触发而忽略它，其实当你的手指尚未离开屏幕时，有系统级的操做发生时就会触发touchcancel，例如alert和confirm弹框，又或者是android系统的功能弹窗
这4个事件的触发顺序为：

touchstart -> touchmove -> …… -> touchmove ->touchend

点击穿透bug

点击穿透场景及缘由

咱们常常会看到“弹窗/浮层”这种东西，整个容器里有一个底层元素的div，和一个弹出层div，为了让弹出层有模态框的效果，我又加了一个遮罩层.而后为底层元素绑定 click 事件，而弹出层的关闭按钮绑定 tap 事件。
点击关闭按钮，touchend首先触发tap，弹出层和遮罩就被隐藏了。touchend后继续等待300ms发现没有其余行为了，则继续触发click，因为这时弹出层已经消失，因此当前click事件的target就在底层元素上，因而就alert内容。整个事件触发过程为 touchend -> tap -> click。

　　而因为click事件的滞后性（300ms），在这300ms内上层元素隐藏或消失了，下层一样位置的DOM元素触发了click事件（若是是input框则会触发focus事件），看起来就像点击的target“穿透”到下层去了。
所以，点击穿透的现象就容易理解了，在这 300ms 之内，由于上层元素隐藏或消失了，因为 click 事件的滞后性，一样位置的 DOM 元素触发了 click 事件（若是是 input 则触发了 focus 事件）。在代码中，给咱们的感受就是 target 发生了飘移。
通用解决方案：采起fastclick

性能优化

技术相关

离线缓存
css优化【3d动画优化】
js优化 【js worker】
spdy,http2
service worker
入口dns预解析
域名收敛
cookie压缩
网速及网络状况侦测
webp

策略相关

前端资源压缩去重
首屏前置与资源lazyload
页面模板与数据分离
适当的base64,首屏css不建议使用
script 异步
后台智能加载下一页
图片渐进显示

参考资料

HTML head 头标签
点击穿透原理及解决
各位前端er（或所在的前端团队）在项目中都是怎么处理移动端的点击事件的？