中高级前端必须注意的 40 条移动端 H5 坑位指南
不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。 Android 和 iOS 各显神通，Android 的系统版本和屏幕分辨率多得难以一招兼容， iOS 的顽固标准和未知特性多得难以快速掌握。
三年半沉淀通过本文记录下所遇到的坑位，或许有些坑位还未遇到，但本文记录的40 条坑位绝对能让同学们少走很多弯路，特别是前端小白。为了减少废话提高本文质量，对以下内容做一些约定。
- 提及的安卓系统包括 Android 和基于 Android 开发的系统
- 提及的苹果系统包括 iOS 和 iPadOS
- 本文针对的开发场景是 移动端浏览器 ，因此大部分坑位的解决方案在 桌面端浏览器 里不一定有效
- 解决方案若未提及适用系统就默认在安卓系统和苹果系统上都适用，若提及适用系统则会详细说明
- Webkit 及其衍生内核在 移动端浏览器 市场占有率里达到惊人的 97% ，因此无需太过担心 CSS3 、 ES6 和 浏览器新特性 的兼容性
- 真正的开发环境都是基于 webpack 构建，因此代码演示都不会带上 CSS 前缀，除非该属性是 Webkit 独有才会带上 -webkit-
每次填坑都是一次实践过程，全部坑位的源码都按语言方向记录在笔者Github( github /JowayYoung/mobile-devpit)上，若有未记录的坑位可提PR( github /JowayYoung/mobile-devpit/pulls)让笔者合并，给个Star支持下咧！
本来想为每个坑位都 截图 或 录制 GIF 作为演示，但考虑到目前掘金的 Markdown 编辑器 操作图片还存在缺陷就放弃了，每次上传图片都会花费很多时间甚至上传失败，若需演示只能自行复制代码了。
HTML 方向
调用系统功能
使用 <a> 能快速调用移动设备的 电话 / 短信 / 邮件 三大通讯功能，使用 <input> 能快速调用移动设备的的 图库 / 文件 。
这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被 移动端浏览器 忽略。
<a href="tel:10086">拨打电话给10086小姐姐</a>
<a href="sms:10086">发送短信给10086小姐姐</a>
<a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a>
<input type="file" accept="image/*">
<input type="file" accept="video/*">
<input type="file" multiple>
忽略自动识别
有些 移动端浏览器 会自动将数字字母符号识别为 电话 / 邮箱 并将其渲染成上述调用系统功能里的 <a> 。虽然很方便却有可能违背需求。
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no, email=no">
弹出数字键盘
使用 <input type="tel"> 弹起数字键盘会带上 # 和 * ，适合输入电话。推荐使用 <input type="number" pattern="\d*"> 弹起数字键盘，适合输入验证码等纯数字格式。
<input type="tel">
<input type="number" pattern="\d*">
唤醒原生应用
通过 location.href 与原生应用建立通讯渠道，这种页面与客户端的通讯方式称为URL Scheme，其基本格式为 scheme://[path][?query] ，查阅文章《h3 与 App 的通讯方式》讲述 URL Scheme 的使用。
- scheme：应用标识，表示应用在系统里的唯一标识
- path：应用行为，表示应用某个页面或功能
- query：应用参数，表示应用页面或应用功能所需的条件参数
URL Scheme 一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用，有些 移动端浏览器 即使安装了该应用也无法唤醒原生应用，因为它认为 URL Scheme 是一种潜在的危险行为而禁用它，像 Safari 和 微信浏览器 。还好 微信浏览器 可开启白名单让 URL Scheme 有效。
若在页面引用第三方原生应用的 URL Schema ，可通过抓包第三方原生应用获取其 URL 。
<a href="weixin://">打开微信</a>
<a href="alipays://">打开支付宝</a>
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>
禁止页面缩放
在智能手机的普及下，很多网站都具备 桌面端 和 移动端 两种浏览版本，因此无需双击缩放查看页面。禁止页面缩放可保障 移动端浏览器 能无遗漏地展现页面所有布局。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
禁止页面缓存
Cache-Control指定请求和响应遵循的缓存机制，不想使用浏览器缓存就禁止呗！
<meta http-equiv="Cache-Control" content="no-cache">
禁止字母大写
有时在输入框里输入文本会默认开启首字母大写纠正，就是输入首字母小写会被自动纠正成大写，特么的烦。直接声明 autocapitalize=off 关闭首字母大写功能和 autocorrect=off 关闭纠正功能。
<input autocapitalize="off" autocorrect="off">
针对 Safari 配置
贴一些 Safari 较零散且少用的配置。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)">
<link rel="apple-touch-icon" sizes="76x76" href="pig.jpg">
<link rel="apple-touch-icon-precomposed" href="pig.jpg">
针对其他浏览器配置
贴一些其他浏览器较零散且少用的配置，主要是常用的 QQ 浏览器 、 UC 浏览器 和 360 浏览器 。从网易 MTL 的测试数据得知，新版的 QQ 浏览器 和 UC 浏览器 已不支持以下 <meta> 声明了。
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="renderer" content="webkit">
让: active 有效，让: hover 无效
有些元素的 :active 可能会无效，而元素的 :hover 在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给 <body> 注册一个空的 touchstart 事件 可将两种状态反转。
<body ontouchstart></body>
CSS 方向
自动适应布局
针对移动端，笔者通常会结合 JS 依据 屏幕宽度 与 设计图宽度 的比例动态声明 <html> 的 font-size ，以 rem 为长度单位声明所有节点的几何属性，这样就能做到大部分移动设备的页面兼容，兼容出入较大的地方再通过 媒体查询 做特别处理。
笔者通常将 rem 布局比例 设置成 1rem=100px ，即在设计图上 100px 长度在 CSS 代码上使用 1rem 表示。
function AutoResponse(width = 750) {
const target = document.documentElement;
if (target.clientWidth >= 600) {
target.style.fontSize = "80px";
} else {
target.style.fontSize = target.clientWidth / width * 100 + "px";
}
}
AutoResponse();
window.addEventListener("resize", () => AutoResponse());
当然还可依据 屏幕宽度 与 设计图宽度 的比例使用 calc() 动态声明 <html> 的 font-size ，这样就能节省上述代码。不对，是完全代替上述代码。
html {
font-size: calc(100vw / 7.5);
}
若以 iPad Pro 分辨率 1024px 为移动端和桌面端的断点，还可结合 媒体查询 做断点处理。 1024px 以下使用 rem 布局 ，否则不使用 rem 布局 。
@media screen and (max-width: 1024px) {
html {
font-size: calc(100vw / 7.5);
}
}
自动适应背景
使用 rem 布局 声明一个元素背景，多数情况会将 background-size 声明为 cover 。可能在设计图对应分辨率的移动设备下，背景会完美贴合显示，但换到其他分辨率的移动设备下就会出现左右空出 1px 到 npx 的空隙。
此时将 background-size 声明为 100% 100% ，跟随 width 和 height 的变化而变化。反正 width 和 height 都是量好的实际尺寸。
.elem {
width: 1rem;
height: 1rem;
background: url("pig.jpg") no-repeat center/100% 100%;
}
监听屏幕旋转
你还在使用 JS 判断横屏竖屏调整样式吗？那就真的 Out 了。
@media all and (orientation: landscape) {}
@media all and (orientation: portrait) {}
支持弹性滚动
在苹果系统上非 <body> 元素的滚动操作可能会存在卡顿，但安卓系统不会出现该情况。通过声明 overflow-scrolling:touch 调用系统原生滚动事件优化 弹性滚动 ，增加页面滚动的流畅度。
body {
-webkit-overflow-scrolling: touch;
}
.elem {
overflow: auto;
}
禁止滚动传播
与 桌面端浏览器 不一样， 移动端浏览器 有一个奇怪行为。当页面包含多个滚动区域时，滚完一个区域后若还存在滚动动量则会将这些剩余动量传播到下一个滚动区域，造成该区域也滚动起来。这种行为称为滚动传播。
若不想产生这种奇怪行为可直接禁止。
.elem {
overscroll-behavior: contain;
}
禁止屏幕抖动
对于一些突然出现滚动条的页面，可能会产生左右抖动的不良影响。在一个滚动容器里，打开弹窗就隐藏滚动条，关闭弹窗就显示滚动条，来回操作会让屏幕抖动起来。提前声明滚动容器的 padding-right 为滚动条宽度，就能有效消除这个不良影响。
每个 移动端浏览器 的滚动条宽度都有可能不一致，甚至不一定占位置，通过以下方式能间接计算出滚动条的宽度。 100vw 为视窗宽度， 100% 为滚动容器内容宽度，相减就是滚动条宽度，妥妥的动态计算。
body {
padding-right: calc(100vw - 100%);
}
禁止长按操作
有时不想用户长按元素呼出菜单进行 点链接 、 打电话 、 发邮件 、 保存图片 或 扫描二维码 等操作，声明 touch-callout:none 禁止用户长按操作。
有时不想用户 复制粘贴 盗文案，声明 user-select:none 禁止用户长按操作和选择复制。
* {
user-select: none;
-webkit-touch-callout: none;
}
但声明 user-select:none 会让 <input> 和 <textarea> 无法输入文本，可对其声明 user-select:auto 排除在外。
input,
textarea {
user-select: auto;
}
禁止字体调整
旋转屏幕可能会改变字体大小，声明 text-size-adjust:100% 让字体大小保持不变。
* {
text-size-adjust: 100%;
}
禁止高亮显示
触摸元素会出现半透明灰色遮罩，不想要！
* {
-webkit-tap-highlight-color: transparent;
}
禁止动画闪屏
在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个 3D 环境 就能让动画稳定运行了。
.elem {
perspective: 1000;
backface-visibility: hidden;
transform-style: preserve-3d;
}
美化表单外观
表单元素样式太丑希望自定义， appearance:none 来帮你。
button,
input,
select,
textarea {
appearance: none;
}
美化滚动占位
滚动条样式太丑希望自定义， ::-webkit-scrollbar-* 来帮你。记住以下三个关键词就能随机应变了。
- ::-webkit-scrollbar：滚动条整体部分
- ::-webkit-scrollbar-track：滚动条轨道部分
- ::-webkit-scrollbar-thumb：滚动条滑块部分
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-image: linear-gradient(135deg, #09f, #3c9);
}
美化输入占位
输入框占位文本太丑， ::-webkit-input-placeholder 来帮你。
input::-webkit-input-placeholder {
color: #66f;
}
对齐输入占位
有强迫症的同学总会觉得输入框文本位置整体偏上，感觉未居中心里就痒痒的。 桌面端浏览器 里声明 line-height 等于 height 就能解决，但 移动端浏览器 里还是未能解决，需将 line-height 声明为 normal 才行。
input {
line-height: normal;
}
对齐下拉选项
下拉框选项默认向左对齐，是时候改改向右对齐了。
select option {
direction: rtl;
}
修复点击无效
在苹果系统上有些情况下非可点击元素监听 click 事件 可能会无效，针对该情况只需对不触发 click 事件 的元素声明 cursor:pointer 就能解决。
.elem {
cursor: pointer;
}
识别文本换行
多数情况会使用 JS 换行文本，那就真的 Out 了。若接口返回字段包含 \n 或 <br> ，千万别替换掉，可声明 white-space:pre-line 交由浏览器做断行处理。
* {
white-space: pre-line;
}
开启硬件加速
想动画更流畅吗，开启 GPU 硬件加速 呗！
.elem {
transform: translate3d(0, 0, 0);
}
描绘像素边框
万年话题，如何描绘 一像素边框 ？
.elem {
position: relative;
width: 200px;
height: 80px;
&::after {
position: absolute;
left: 0;
top: 0;
border: 1px solid #f66;
width: 200%;
height: 200%;
content: "";
transform: scale(.5);
transform-origin: left top;
}
}
控制溢出文本
万年话题，如何控制文本做 单行溢出 和 多行溢出 ？
.elem {
width: 400px;
line-height: 30px;
font-size: 20px;
&.sl-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.ml-ellipsis {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
JS 方向
禁止点击穿透
移动端浏览器 里点击操作会存在 300ms 延迟，往往会造成点击延迟甚至点击无效，这个是众所周知的事情。
2007 年 苹果发布首款 iPhone 搭载的 Safari 为了将桌面端网站能较好地展示在 移动端浏览器 上而使用了双击缩放。该方案就是上述 300ms 延迟的主要原因，当用户执行第一次单击后会预留 300ms 检测用户是否继续执行单击，若是则执行缩放操作，若否则执行点击操作。鉴于该方案的成功，其他 移动端浏览器 也复制了该方案，现在几乎所有 移动端浏览器 都配备该功能。而该方案引发的点击延迟被称为点击穿透。
在前端领域里最早解决点击穿透是 jQuery 时代 的 zepto ，估计现在大部分同学都未使用过 zepto ，其实它就是移动端版本的 jquery 。 zepto 封装 tap 事件 能有效地解决点击穿透，通过监听 document 上的 touch 事件 完成 tap 事件 的模拟，并将 tap 事件 冒泡到 document 上触发。
在 移动端浏览器 上不使用 click 事件 而使用 touch 事件 是因为 click 事件 有着明显的延迟，后续又出现 fastclick 。该解决方案监听用户是否做了双击操作，可正常使用 click 事件 ，而点击穿透就交给 fastclick 自动判断。更多 fastclick 原理可自行百度，在此不作过多介绍。
fastclick( github /ftlabs/fastclick)有现成的 NPM 包 ，可直接安装到项目里。引入 fastclick 可使用 click 事件 代替 tap 事件 ，接入方式极其简单。
import Fastclick from "fastclick";
FastClick.attach(document.body);
禁止滑动穿透
移动端浏览器 里出现弹窗时，若在屏幕上滑动能触发弹窗底下的内容跟着滚动，这个是众所周知的事情。
首先明确解决滑动穿透需保持哪些交互行为，那就是 除了弹窗内容能点击或滚动，其他内容都不能点击或滚动 。目前很多解决方案都无法做到这一点，全部解决方案都能禁止 <body> 的滚动行为却引发其他问题。
- 弹窗打开后内部内容无法滚动
- 弹窗关闭后页面滚动位置丢失
- Webview 能上下滑动露出底色
当打开弹窗时给 <body> 声明 position:fixed;left:0;width:100% 并动态声明 top 。声明 position:fixed 会导致 <body> 滚动条消失，此时会发现虽然无滑动穿透，但页面滚动位置早已丢失。通过 scrollingElement 获取页面当前滚动条偏移量并将其取负值且赋值给 top ，那么在视觉上就无任何变化。当关闭弹窗时移除 position:fixed;left:0;width:100% 和动态 top 。
scrollingElement 可兼容地获取 scrollTop 和 scrollHeight 等属性，在 移动端浏览器 里屡试不爽。 document.scrollingElement.scrollHeight 可完美代替曾经的 document.documentElement.scrollHeight || document.body.scrollHeight ，一眼看上去就是代码减少了。
该解决方案在视觉上无任何变化，完爆其他解决方案，其实就是一种反向思维和障眼法。该解决方案完美解决 固定弹窗 和 滚动弹窗 对 <body> 全局滚动的影响，当然也可用于局部滚动容器里，因此很值得推广。
body.static {
position: fixed;
left: 0;
width: 100%;
}
const body = document.body;
const openBtn = document.getElementById("open-btn");
const closeBtn = document.getElementById("close-btn");
openBtn.addEventListener("click", e => {
e.stopPropagation();
const scrollTop = document.scrollingElement.scrollTop;
body.classList.add("static");
body.style.top = `-${scrollTop}px`;
});
closeBtn.addEventListener("click", e => {
e.stopPropagation();
body.classList.remove("static");
body.style.top = "";
});
支持往返刷新
点击 移动端浏览器 的 前进按钮 或 后退按钮 ，有时不会自动执行旧页面的 JS 代码，这与 往返缓存 有关。这种情况在 Safari 上特别明显，简单概括就是往返页面无法刷新。
往返缓存指浏览器为了在页面间执行前进后退操作时能拥有更流畅体验的一种策略，以下简称 BFCache 。该策略具体表现为：当用户前往新页面前将旧页面的 DOM 状态保存在 BFCache 里，当用户返回旧页面前将旧页面的 DOM 状态从 BFCache 里取出并加载。大部分 移动端浏览器 都会部署 BFCache ，可大大节省接口请求的时间和带宽。
了解什么是 BFCache 再对症下药，解决方案就在 window.onunload 上做文章。
window.addEventListener("onunload", () => {
});
若在 Vue SPA 上使用 keep-alive 也不能让页面刷新，可将接口请求放到 beforeRouteEnter() 里。
当然还有另一种解决方案。 pageshow 事件 在每次页面加载时都会触发，无论是首次加载还是再次加载都会触发，这就是它与 load 事件 的区别。 pageshow 事件 暴露的 persisted 可判断页面是否从 BFCache 里取出。
window.addEventListener("pageshow", e => e.persisted && location.reload());
若浏览器不使用 <meta http-equiv="Cache-Control" content="no-cache"> 禁用缓存，该解决方案还是很值得一用。
解析有效日期
在苹果系统上解析 YYYY-MM-DD HH:mm:ss 这种日期格式会报错 Invalid Date ，但在安卓系统上解析这种日期格式完全无问题。
new Date("2019-03-31 21:30:00");
查看 Safari 相关开发手册发现可用 YYYY/MM/DD HH:mm:ss 这种日期格式，简单概括就是年月日必须使用 / 衔接而不能使用 - 衔接。当然安卓系统也支持该格式，然而接口返回字段的日期格式通常是 YYYY-MM-DD HH:mm:ss ，那么需替换其中的 - 为 / 。
const date = "2019-03-31 21:30:00";
new Date(date.replace(/\-/g, "/"));
修复高度坍塌
当页面同时出现以下三个条件时，键盘占位会把页面高度压缩一部分。当输入完成键盘占位消失后，页面高度有可能回不到原来高度，产生坍塌导致 Webview 底色露脸，简单概括就是输入框失焦后页面未回弹。
- 页面高度过小
- 输入框在页面底部或视窗中下方
- 输入框聚焦输入文本
只要保持前后滚动条偏移量一致就不会出现上述问题。在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。
const input = document.getElementById("input");
let scrollTop = 0;
input.addEventListener("focus", () => {
scrollTop = document.scrollingElement.scrollTop;
});
input.addEventListener("blur", () => {
document.scrollingElement.scrollTo(0, this.scrollTop);
});
修复输入监听
在苹果系统上的输入框输入文本， keyup/keydown/keypress 事件 可能会无效。当输入框监听 keyup 事件 时，逐个输入英文和数字会有效，但逐个输入中文不会有效，需按回车键才会有效。
此时可用 input 事件 代替输入框的 keyup/keydown/keypress 事件 。
简化回到顶部
曾几何时编写一个 返回顶部 函数麻烦得要死，需 scrollTop 、 定时器 和 条件判断 三者配合才能完成。其实 DOM 对象里隐藏了一个很好用的函数可完成上述功能，一行核心代码就能搞定。
该函数就是 scrollIntoView( developer.mozilla 组织网/zh-cn/docs/web/api/element/scrollintoview)，它会滚动目标元素的父容器使之对用户可见，简单概括就是相对视窗让容器滚动到目标元素位置。它有三个可选参数能让 scrollIntoView 滚动起来更优雅。
- behavior：动画过渡效果，默认 auto 无 ，可选 smooth 平滑
- inline：水平方向对齐方式，默认 nearest 就近对齐 ，可选 start 顶部对齐 、 center 中间对齐 和 end 底部对齐
- block：垂直方向对齐方式，默认 start 顶部对齐 ，可选 center 中间对齐 、 end 底部对齐 和 nearest 就近对齐
const gotopBtn = document.getElementById("gotop-btn");
openBtn.addEventListener("click", () => document.body.scrollIntoView({ behavior: "smooth" }));
当然还可滚动到目标元素位置，只需将 document.body 修改成目标元素的 DOM 对象。一行核心代码就能搞掂的事情为何还编写那么多代码去完成，不累吗？
简化懒性加载
与上述简化回到顶部一样，编写一个 懒性加载 函数也同样需 scrollTop 、 定时器 和 条件判断 三者配合才能完成。其实 DOM 对象里隐藏了一个很好用的函数可完成上述功能，该函数无需监听容器的 scroll 事件 ，通过浏览器自身机制完成滚动监听。
该函数就是 IntersectionObserver( developer.mozilla 组织网/zh-CN/docs/Web/API/IntersectionObserver)，它提供一种异步观察目标元素及其祖先元素或顶级文档视窗交叉状态的方法。详情可参照MDN 文档( developer.mozilla 组织网/zh-CN/docs/Web/API/IntersectionObserver)，在此不作过多介绍。
懒性加载的第一种使用场景：图片懒加载。只需确认图片进入可视区域就赋值加载图片，赋值完成还需对图片停止监听。
<img data-src="pig.jpg">
const imgs = document.querySelectorAll("img.lazyload");
const observer = new IntersectionObserver(nodes => {
nodes.forEach(v => {
if (v.isIntersecting) {
v.target.src = v.target.dataset.src;
observer.unobserve(v.target);
}
});
});
imgs.forEach(v => observer.observe(v));
懒性加载的第二种使用场景：下拉加载。在列表最底部部署一个占位元素且该元素无任何高度或实体外观，只需确认占位元素进入可视区域就请求接口加载数据。
<ul>
<li></li>
</ul>
<div></div>
const bottom = document.getElementById("bottom");
const observer = new IntersectionObserver(nodes => {
const tgt = nodes[0];
if (tgt.isIntersecting) {
console.log("已到底部，请求接口");
}
})
bottom.observe(bottom);
优化扫码识别
通常 移动端浏览器 都会配备 长按二维码图片识别链接 的功能，但长按二维码可能无法识别或错误识别。二维码表面看上去是一张图片，可二维码生成方式却五花八门，二维码生成方式有以下三种。
- 使用 <img> 渲染
- 使用 <svg> 渲染
- 使用 <canvas> 渲染
从网易 MTL 的测试数据得知，大部分 移动端浏览器 只能识别 <img> 渲染的二维码，为了让全部 移动端浏览器 都能识别二维码，那只能使用 <img> 渲染二维码了。若使用 SVG 和 Canvas 的方式生成二维码，那就想方设法把二维码数据转换成 Base64 再赋值到 <img> 的 src 上。
一个页面可能存在多个二维码，若长按二维码只能识别最后一个，那只能控制每个页面只存在一个二维码。
自动播放媒体
常见媒体元素包括音频 <audio> 和视频 <video> ，为了让用户得到更好的媒体播放体验与不盲目浪费用户流量，大部分 移动端浏览器 都明确规定不能自动播放媒体或默认屏蔽 autoplay 。为了能让媒体在页面加载完成后自动播放，只能显式声明播放。
const audio = document.getElementById("audio");
const video = document.getElementById("video");
audio.play();
video.play();
对于像微信浏览器这样的内置浏览器，还需监听其应用 SDK 加载完成才能触发上述代码，以保障 WebView 正常渲染。其他内置浏览器同理，在此不作过多介绍。
document.addEventListener("WeixinJSBridgeReady", () => {
});
在苹果系统上明确规定用户交互操作开始后才能播放媒体，未得到用户响应会被 Safari 自动拦截，因此需监听用户首次触摸操作并触发媒体自动播放，而该监听仅此一次。
document.body.addEventListener("touchstart", () => {
}, { once: true });
总结
若有未记录的坑位可提 PR( github /JowayYoung/mobile-devpit/pulls) 让笔者合并，我们一起记录更多的移动端坑位，让更多前端开发者少走弯路。
上述坑位按照HTML 方向、CSS 方向和JS 方向三大类型划分，能更高效地区分出每个坑位的使用场景和解决方案，减少混乱记忆。
湘公网安备 43102202000103号