FoolのGarden 首页归档标签
中高级前端须注意的40条移动端H5坑位指南
|前端
字数总计: 4.5k|阅读时长: 16 分钟

移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。

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

HTML方向

调用系统功能

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 拨打电话 -->
<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>。虽然很方便却有可能违背需求。

1
2
3
4
5
6
7
8
<!-- 忽略自动识别电话 -->
<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“>`弹起数字键盘，适合输入验证码等纯数字格式。

1
2
3
4
5
<!-- 纯数字带#和* -->
<input type="tel">

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

唤醒原生应用

通过location.href与原生应用建立通讯渠道，这种页面与客户端的通讯方式称为「URL Scheme」，其基本格式为scheme://[path][?query]，笔者曾经发表过《H5与App的通讯方式》讲述URL Scheme的使用。

  • 「scheme」：应用标识，表示应用在系统里的唯一标识
  • 「path」 ：应用行为，表示应用某个页面或功能
  • 「query」：应用参数，表示应用页面或应用功能所需的条件参数

URL Scheme一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。还好微信浏览器可开启白名单让URL Scheme有效。

若在页面引用第三方原生应用的URL Schema，可通过抓包第三方原生应用获取其URL。

1
2
3
4
5
6
7
8
9
10
11
<!-- 打开微信 -->
<a href="weixin://">打开微信</a>

<!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a>

<!-- 打开支付宝的扫一扫 -->
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>

<!-- 打开支付宝的蚂蚁森林 -->
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

禁止页面缩放

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

1
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">

禁止页面缓存

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

1
<meta http-equiv="Cache-Control" content="no-cache">

禁止字母大写

有时在输入框里输入文本会默认开启首字母大写纠正，就是输入首字母小写会被自动纠正成大写，特么的烦。直接声明autocapitalize=off关闭首字母大写功能和autocorrect=off关闭纠正功能。

1
<input autocapitalize="off" autocorrect="off">

针对Safari配置

贴一些Safari较零散且少用的配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 设置Safari全屏，在iOS7+无效 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 改变Safari状态栏样式，可选default/black/black-translucent，需在上述全屏模式下才有效 -->
<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>声明了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 强制QQ浏览器竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- 强制QQ浏览器全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- 开启QQ浏览器应用模式 -->
<meta name="x5-page-mode" content="app">

<!-- 强制UC浏览器竖屏 -->
<meta name="screen-orientation" content="portrait">

<!-- 强制UC浏览器全屏 -->
<meta name="full-screen" content="yes">

<!-- 开启UC浏览器应用模式 -->
<meta name="browsermode" content="application">

<!-- 开启360浏览器极速模式 -->
<meta name="renderer" content="webkit">

让:active有效，让:hover无效

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

1
<body ontouchstart></body>

CSS方向

自动适应布局

针对移动端，笔者通常会结合JS依据屏幕宽度与设计图宽度的比例动态声明<html>的font-size，以rem为长度单位声明所有节点的几何属性，这样就能做到大部分移动设备的页面兼容，兼容出入较大的地方再通过媒体查询做特别处理。

笔者通常将rem布局比例设置成1rem=100px，即在设计图上100px长度在CSS代码上使用1rem表示。

1
2
3
4
5
6
7
8
9
10
11

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，这样就能节省上述代码。不对，是完全代替上述代码。

1
2
3
html {
    font-size: calc(100vw / 7.5);
}

若以iPad Pro分辨率1024px为移动端和桌面端的断点，还可结合媒体查询做断点处理。1024px以下使用rem布局，否则不使用rem布局。

1
2
3
4
5
@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都是量好的实际尺寸。

1
2
3
4
5
.elem {
    width: 1rem;
    height: 1rem;
    background: url("pig.jpg") no-repeat center/100% 100%;
}

监听屏幕旋转

你还在使用JS判断横屏竖屏调整样式吗？那就真的Out了。

1
2
3
4
5
6
7
8
9

/* 竖屏 */
@media all and (orientation: portrait) {
    /* 自定义样式 */
}
/* 横屏 */
@media all and (orientation: landscape) {
    /* 自定义样式 */
}

支持弹性滚动

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

1
2
3
4
5
6
body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}

禁止滚动传播

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

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

1
2
3
.elem {
    overscroll-behavior: contain;
}

禁止屏幕抖动

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

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

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

禁止长按操作

有时不想用户长按元素呼出菜单进行点链接、打电话、发邮件、保存图片或扫描二维码等操作，声明touch-callout:none禁止用户长按操作。

有时不想用户复制粘贴盗文案，声明user-select:none禁止用户长按操作和选择复制。

1
2
3
4
5
* {
    /* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */
    user-select: none; /* 禁止长按选择文字 */
    -webkit-touch-callout: none;
}

但声明user-select:none会让<input>和<textarea>无法输入文本，可对其声明user-select:auto排除在外。

1
2
3
4
input,
textarea {
    user-select: auto;
}

禁止字体调整

旋转屏幕可能会改变字体大小，声明text-size-adjust:100%让字体大小保持不变。

1
2
3
* {
    text-size-adjust: 100%;
}

禁止高亮显示

触摸元素会出现半透明灰色遮罩，不想要！

1
2
3
* {
    -webkit-tap-highlight-color: transparent;
}

禁止动画闪屏

在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了。

1
2
3
4
5
6

.elem {
    perspective: 1000;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

美化表单外观

表单元素样式太丑希望自定义，appearance:none来帮你。

1
2
3
4
5
6
7
button,
input,
select,
textarea {
    appearance: none;
    /* 自定义样式 */
}

美化滚动占位

滚动条样式太丑希望自定义，::-webkit-scrollbar-*来帮你。记住以下三个关键词就能随机应变了。

  • 「::-webkit-scrollbar」：滚动条整体部分
  • 「::-webkit-scrollbar-track」：滚动条轨道部分
  • 「::-webkit-scrollbar-thumb」：滚动条滑块部分
1
2
3
4
5
6
7
8
9
10
11
12
13

::-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来帮你。

1
2
3
input::-webkit-input-placeholder {
    color: #66f;
}

对齐输入占位

有强迫症的同学总会觉得输入框文本位置整体偏上，感觉未居中心里就痒痒的。桌面端浏览器里声明line-height等于height就能解决，但移动端浏览器里还是未能解决，需将line-height声明为normal才行。

1
2
3
input {
    line-height: normal;
}

对齐下拉选项

下拉框选项默认向左对齐，是时候改改向右对齐了。

1
2
3
select option {
    direction: rtl;
}

修复点击无效

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

1
2
3
.elem {
    cursor: pointer;
}

识别文本换行

多数情况会使用JS换行文本，那就真的Out了。若接口返回字段包含\n或<br>，千万别替换掉，可声明white-space:pre-line交由浏览器做断行处理。

1
2
3
* {
    white-space: pre-line;
}

开启硬件加速

想动画更流畅吗，开启GPU硬件加速呗！

1
2
3
4
.elem {
    transform: translate3d(0, 0, 0);
    /* transform: translateZ(0); */
}

描绘像素边框

万年话题，如何描绘一像素边框？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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;
    }
}

控制溢出文本

万年话题，如何控制文本做单行溢出和多行溢出？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.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方向

支持往返刷新

点击移动端浏览器的前进按钮或后退按钮，有时不会自动执行旧页面的JS代码，这与往返缓存有关。这种情况在Safari上特别明显，简单概括就是往返页面无法刷新。
pageshow事件在每次页面加载时都会触发，无论是首次加载还是再次加载都会触发，这就是它与load事件的区别。pageshow事件暴露的persisted可判断页面是否从BFCache里取出。

1
window.addEventListener("pageshow", e => e.persisted && location.reload());

简化回到顶部

曾几何时编写一个返回顶部函数麻烦得要死，需scrollTop、定时器和条件判断三者配合才能完成。其实DOM对象里隐藏了一个很好用的函数可完成上述功能，一行核心代码就能搞定。

该函数就是scrollIntoView，它会滚动目标元素的父容器使之对用户可见，简单概括就是相对视窗让容器滚动到目标元素位置。它有三个可选参数能让scrollIntoView滚动起来更优雅。

  • 「behavior」：动画过渡效果，默认auto无，可选smooth平滑
  • 「inline」：水平方向对齐方式，默认nearest就近对齐，可选start顶部对齐、center中间对齐和end底部对齐
  • 「block」：垂直方向对齐方式，默认start顶部对齐，可选center中间对齐、end底部对齐和nearest就近对齐
1
2
const gotopBtn = document.getElementById("gotop-btn");
openBtn.addEventListener("click", () => document.body.scrollIntoView({ behavior: "smooth" }));

简化懒性加载

与上述「简化回到顶部」一样，编写一个懒性加载函数也同样需scrollTop、定时器和条件判断三者配合才能完成。其实DOM对象里隐藏了一个很好用的函数可完成上述功能，该函数无需监听容器的scroll事件，通过浏览器自身机制完成滚动监听。

该函数就是IntersectionObserver，它提供一种异步观察目标元素及其祖先元素或顶级文档视窗交叉状态的方法。详情可参照MDN文档，在此不作过多介绍。

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

1
2
3
4
5
6
7
8
9
10
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));

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul>
    <li></li>
    <!-- 很多<li> -->
</ul>
<!-- 也可将#bottom以<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上。

一个页面可能存在多个二维码，若长按二维码只能识别最后一个，那只能控制每个页面只存在一个二维码。

文章转自 作者JowayYoung https://mp.weixin.qq.com/s/nge9FPgVS6FZcuVOTxCBtQ
文章作者: FoolのGarden
文章链接: https://gofugui.github.io/2021/03/30/中高级前端须注意的40条移动端H5坑位指南/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 FoolのGarden！
JavaScriptWebES6html