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

文章正文还需 7 分钟

这是在掘金看的到一篇文章，在总结移动端开发，所遇到的问题，以及技巧，有些是小编所遇到过的，我在这里认为自己陌生的做了记录，具体的请看原文

HTML方向

调用系统功能

使用能快速调用移动设备的电话/短信/邮件三大通讯功能，使用能快速调用移动设备的的图库/文件。

这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略

<!-- 拨打电话 -->
<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>

忽略自动识别

有些移动端浏览器会自动将数字字母符号识别为电话/邮箱并将其渲染成上述调用系统功能里的。虽然很方便却有可能违背需求

html 复制代码

<!-- 忽略自动识别电话 -->
<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*"弹起数字键盘，适合输入验证码等纯数字格式

html 复制代码

<!-- 纯数字带#和* -->
<input type="tel">

<!-- 纯数字 -->
<input type="number" pattern="\d*">

唤醒原生应用

禁止页面缩放

禁止页面缓存

禁止字母大写

针对Safari配置

针对其他浏览器配置

让:active有效，让:hover无效

有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给注册一个空的touchstart事件可将两种状态反转。

html 复制代码

<body ontouchstart></body>

CSS方向

自动适应布局

自动适应背景

监听屏幕旋转

支持弹性滚动

在苹果系统上非元素的滚动操作可能会存在卡顿，但安卓系统不会出现该情况。通过声明overflow-scrolling:touch调用系统原生滚动事件优化弹性滚动，增加页面滚动的流畅度

css 复制代码

body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}

禁止滚动传播

与桌面端浏览器不一样，移动端浏览器有一个奇怪行为。当页面包含多个滚动区域时，滚完一个区域后若还存在滚动动量则会将这些剩余动量传播到下一个滚动区域，造成该区域也滚动起来。这种行为称为滚动传播。

若不想产生这种奇怪行为可直接禁止

css 复制代码

.elem {
    overscroll-behavior: contain;
}

禁止屏幕抖动

对于一些突然出现滚动条的页面，可能会产生左右抖动的不良影响。在一个滚动容器里，打开弹窗就隐藏滚动条，关闭弹窗就显示滚动条，来回操作会让屏幕抖动起来。提前声明滚动容器的padding-right为滚动条宽度，就能有效消除这个不良影响。

每个移动端浏览器的滚动条宽度都有可能不一致，甚至不一定占位置，通过以下方式能间接计算出滚动条的宽度。100vw为视窗宽度，100%为滚动容器内容宽度，相减就是滚动条宽度，妥妥的动态计算。

css 复制代码

body {
    padding-right: calc(100vw - 100%);
}

禁止长按操作

禁止字体调整

禁止高亮显示

禁止动画闪屏

美化表单外观

美化滚动占位

美化输入占位

对齐输入占位

对齐下拉选项

修复点击无效

在苹果系统上有些情况下非可点击元素监听click事件可能会无效，针对该情况只需对不触发click事件的元素声明cursor:pointer就能解决

css 复制代码

.elem {
    cursor: pointer;
}

识别文本换行

开启硬件加速

描绘像素边框

控制溢出文本

JS方向

禁止点击穿透

禁止滑动穿透

支持往返刷新

解析有效日期

修复高度坍塌

修复输入监听

简化回到顶部

简化懒性加载

优化扫码识别

自动播放媒体

常见媒体元素包括音频

js 复制代码

const audio = document.getElementById("audio");
const video = document.getElementById("video");
audio.play();
video.play();

对于像微信浏览器这样的内置浏览器，还需监听其应用SDK加载完成才能触发上述代码，以保障WebView正常渲染。其他内置浏览器同理，在此不作过多介绍。

js 复制代码

document.addEventListener("WeixinJSBridgeReady", () => {
    // 执行上述媒体自动播放代码
});

在苹果系统上明确规定用户交互操作开始后才能播放媒体，未得到用户响应会被Safari自动拦截，因此需监听用户首次触摸操作并触发媒体自动播放，而该监听仅此一次。

js 复制代码

document.body.addEventListener("touchstart", () => {
    // 执行上述媒体自动播放代码
}, { once: true });