前端必须注意的40条移动端H5坑位指南

拼搏现实的明天。 2023-01-12 10:08 22阅读 0赞

### 前言 ###

不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。`Android`和`iOS`各显神通，`Android`的系统版本和屏幕分辨率多得难以一招兼容，`iOS`的顽固标准和未知特性多得难以快速掌握。

三年半沉淀通过本文记录下所遇到的坑位，或许有些坑位还未遇到，但本文记录的**40条坑位**绝对能让同学们少走很多弯路，特别是前端小白。为了减少废话提高本文质量，对以下内容做一些约定。

*  提及的安卓系统包括`Android`和基于`Android`开发的系统
 *  提及的苹果系统包括`iOS`和`iPadOS`
 *  本文针对的开发场景是`移动端浏览器`，因此大部分坑位的解决方案在`桌面端浏览器`里不一定有效
 *  解决方案若未提及适用系统就默认在安卓系统和苹果系统上都适用，若提及适用系统则会详细说明
 *  `Webkit`及其衍生内核在`移动端浏览器`市场占有率里达到惊人的`97%`，因此无需太过担心`CSS3`、`ES6`和`浏览器新特性`的兼容性
 *  真正的开发环境都是基于`webpack`构建，因此代码演示都不会带上CSS前缀，除非该属性是`Webkit`独有才会带上`-webkit-`

每次填坑都是一次实践过程，全部坑位的源码都按语言方向记录在笔者[Github][]上，若有未记录的坑位可提[PR][]让笔者合并，给个[Star][Github]支持下咧！

本来想为每个坑位都`截图`或`录制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]`，笔者曾经发表过[《H5与App的通讯方式》][H5_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>
    复制代码

禁止页面缩放

在智能手机的普及下，很多网站都具备`桌面端`和`移动端`两种浏览版本，因此无需双击缩放查看页面。禁止页面缩放可保障`移动端浏览器`能无遗漏地展现页面所有布局。

禁止页面缓存

**Cache-Control**指定请求和响应遵循的缓存机制，不想使用浏览器缓存就禁止呗！

禁止字母大写

有时在输入框里输入文本会默认开启首字母大写纠正，就是输入首字母小写会被自动纠正成大写，特么的烦。直接声明`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`表示。

当然还可依据`屏幕宽度`与`设计图宽度`的比例使用`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`禁止用户长按操作和选择复制。

* {
        /* pointer-events: 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);
        /* transform: translateZ(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][]有现成的`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%;
    }
    复制代码

支持往返刷新

点击`移动端浏览器`的`前进按钮`或`后退按钮`，有时不会自动执行旧页面的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"); // Invalid Date
    复制代码

查看`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][]，它会滚动目标元素的父容器使之对用户可见，简单概括就是相对视窗让容器滚动到目标元素位置。它有三个可选参数能让`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][]，它提供一种异步观察目标元素及其祖先元素或顶级文档视窗交叉状态的方法。详情可参照[MDN文档][IntersectionObserver]，在此不作过多介绍。

懒性加载的第一种使用场景：**图片懒加载**。只需确认图片进入可视区域就赋值加载图片，赋值完成还需对图片停止监听。

<img data-src="pig.jpg">
    
    复制代码

懒性加载的第二种使用场景：**下拉加载**。在列表最底部部署一个占位元素且该元素无任何高度或实体外观，只需确认占位元素进入可视区域就请求接口加载数据。

<ul>
        <li></li>
        
    </ul>
    
    <div id="bottom"></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][]让笔者合并，我们一起记录更多的**移动端坑位**，让更多前端开发者少走弯路。本文也是笔者2021年在掘金社区的首篇文章，希望今年能产出更多高质量文章。从笔者角度上看，一篇文章不是技术多牛逼笔风多优雅才归纳为好文章，而是整体内容能帮助自己和更多人进步才算是好文章。向这个方向进发，为自己打Call。

转载：https://juejin.cn/post/6921886428158754829

[Github]: https://github.com/JowayYoung/mobile-devpit
[PR]: https://github.com/JowayYoung/mobile-devpit/pulls
[H5_App]: https://juejin.cn/post/6844904020201455624
[fastclick]: https://github.com/ftlabs/fastclick
[scrollIntoView]: https://developer.mozilla.org/zh-cn/docs/web/api/element/scrollintoview
[IntersectionObserver]: https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver