摘要：标签相关能优化移动浏览器的显示。会导致添加到主屏后以全屏模式打开页面时出现黑边如果不是响应式网站，不要使用或者禁用缩放。这一对事件可以用来检测元素上的单击和双击。
meta标签相关 viewport：能优化移动浏览器的显示。
如果不是响应式网站，不要使用initial-scale或者禁用缩放。
适配 iPhone 6 和 iPhone 6plus 则需要写：
大部分 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，则用户将不能放大/缩小网页来看到全部的内容。
移动端的meta
移动端事件 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（或所在的前端团队）在项目中都是怎么处理移动端的点击事件的？
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/80529.html
摘要：游戏开发实战主要讲解使用来开发和设计各类常见游戏的思路和技巧，在介绍相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧，在介绍HTML5 Canvas相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。在本书...
摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习 前端方向，自学，vue技术栈 时间背景 大概是在11月9日准备...
摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习 前端方向，自学，vue技术栈 时间背景 大概是在11月9日准备...
摘要：目录移动端开发的基本观点像素基础知识原理解析弹性布局响应式设计的运用移动端的事件库的使用移动端开发的基本观点移动端开发的意义移动端用户使用量市场需求市场供给公司需要移动端开发人才工资高，就业易涌现大波程序猿到了猴年马月，工资才会 目录 移动端开发的基本观点 像素基础知识 viewport原理解析 弹性布局 响应式设计 1rem的运用 移动端的事件 zepto库的使用 移动端开发的...
摘要：目录移动端开发的基本观点像素基础知识原理解析弹性布局响应式设计的运用移动端的事件库的使用移动端开发的基本观点移动端开发的意义移动端用户使用量市场需求市场供给公司需要移动端开发人才工资高，就业易涌现大波程序猿到了猴年马月，工资才会 目录 移动端开发的基本观点 像素基础知识 viewport原理解析 弹性布局 响应式设计 1rem的运用 移动端的事件 zepto库的使用 移动端开发的...
阅读 3402·2023-04-26 02:41
阅读 2444·2023-04-26 00:14
阅读 2822·2021-08-11 10:22
阅读 1274·2019-12-27 11:38
阅读 3570·2019-08-29 18:34
阅读 2374·2019-08-29 12:13
阅读 2950·2019-08-26 18:26
阅读 1833·2019-08-26 16:49
