移动端 H5 开发指南涉及html、css、js三大方向

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>

忽略自动识别

<!-- 忽略自动识别电话 -->
<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*">

唤醒原生应用

<!-- 打开微信 -->
<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">

禁止页面缓存

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

禁止字母大写

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

针对Safari配置

<!-- 设置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浏览器竖屏 -->
<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在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给<body>注册一个空的touchstart事件可将两种状态反转。

<body ontouchstart></body>

ios端兼容input光标高度

问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上
当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。

解决办法：高度height和行高line-height内容用padding撑开

例如：

 .content{float: left;box-sizing: border-box;height: 88px;width: calc(100% - 240px); .content-input{display: block;box-sizing: border-box;width: 100%;color: #333333;font-size: 28px;//line-height: 88px;padding-top: 20px;padding-bottom: 20px;}}

ios端微信h5页面上下滑动时卡顿、页面缺失

解决办法：只需要在公共样式加入下面这行代码

*{-webkit-overflow-scrolling: touch;
}

ios键盘唤起，键盘收起以后页面不归位

<div class="list-warp"><div class="title"><span>投·被保险人姓名</span></div><div class="content"><input class="content-input" placeholder="请输入姓名"v-model="peopleList.name"@focus="changefocus()"@blur.prevent="changeBlur()"/>    </div></div>changeBlur(){let u = navigator.userAgent, app = navigator.appVersion;let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);if(isIOS){setTimeout(() => {const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0window.scrollTo(0, Math.max(scrollHeight - 1, 0))}, 200)}}

安卓弹出的键盘遮盖文本框

解决办法：给input和textarea标签添加focus事件，如下，先判断是不是安卓手机下的操作，当然，可以不用判断机型，Document 对象属性和方法，setTimeout延时0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了

changefocus(){let u = navigator.userAgent, app = navigator.appVersion;let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;if(isAndroid){setTimeout(function() {document.activeElement.scrollIntoViewIfNeeded();document.activeElement.scrollIntoView();}, 500);       }
},

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判断横屏竖屏调整样式吗？

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

支持弹性滚动

在苹果系统上非<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会让和无法输入文本，可对其声明user-select:auto排除在外。

input,
textarea {user-select: auto;
}

禁止字体调整

* {text-size-adjust: 100%;
}

禁止高亮显示

*** {
-webkit-tap-highlight-color: transparent;
}
**

禁止动画闪屏

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

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

美化表单外观

button,
input,
select,
textarea {appearance: none;/* 自定义样式 */
}

美化滚动占位

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

[x] 「::-webkit-scrollbar」：滚动条整体部分
[x] 「::-webkit-scrollbar-track」：滚动条轨道部分
[x] 「::-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或
，千万别替换掉，可声明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>全局滚动的影响，当然也可用于局部滚动容器里，因此很值得推广。

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上特别明显，简单概括就是往返页面无法刷新。

// 在新页面监听页面销毁事件
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事件。

简化回到顶部

const gotopBtn = document.getElementById("gotop-btn");
openBtn.addEventListener("click", () => document.body.scrollIntoView({ behavior: "smooth" }));

简化懒性加载

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

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

<img src="pig.jpg">
<!-- 很多<img> -->

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><!-- 很多<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);

优化扫码识别

通常移动端浏览器都会配备长按二维码图片识别链接的功能，但长按二维码可能无法识别或错误识别。二维码表面看上去是一张图片，可二维码生成方式却五花八门，二维码生成方式有以下三种。

[x] 使用<img>渲染
[x] 使用<svg>渲染
[x] 使用<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 });

SEO

Open Graph Protocol（开放图谱协议），简称 OG 协议

og:image

尽量确保你遵循开放图形文档[5]中的所有注释和示例。此外，一些社交网络可能会对图像有特殊要求。例如，[Twitter 要求](https://developer.twitter.com...[6])比例为2:1，最小尺寸为 300x157，最大尺寸为 4096x4096，小于 5MB，JPG、PNG、WEBP 或 GIF 格式。

og:title 最多 35 个字符。

og:description 最多 65 个字符

入门示例

<meta property="og:site_name" content="Colby Fayock" />
<metaproperty="og:title"content="Anyone Can Map! Inspiration and an
introduction to the world of mapping - Colby Fayock"
/>
<metaproperty="og:description"content="Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of…"
/>
<metaproperty="og:url"content="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/"
/>
<meta property="og:type" content="article" />
<meta property="article:publisher" content="https://www.colbyfayock.com" />
<meta property="article:section" content="Coding" />
<meta property="article:tag" content="Coding" />
<metaproperty="og:image"content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<metaproperty="og:image:secure_url"content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="twitter:card" content="summary_large_image" />
<metaproperty="twitter:image"content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta property="twitter:site" content="@colbyfayock" />