禁止滚动传播

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

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

禁止（因为滚动条导致的）屏幕抖动

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

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

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

禁止动画闪屏

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

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

对齐输入占位

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

修复点击无效

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

  1. .elem {
  2.     cursor: pointer;
  3. }

滑动穿透

移动端浏览器里出现弹窗时，若在屏幕上滑动能触发弹窗底下的内容跟着滚动，这个是众所周知的事情。
首先明确解决滑动穿透需保持哪些交互行为，那就是除了弹窗内容能点击或滚动，其他内容都不能点击或滚动。目前很多解决方案都无法做到这一点，全部解决方案都能禁止<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>全局滚动的影响，当然也可用于局部滚动容器里，因此很值得推广。

  1. body.static {
  2.     position: fixed;
  3.     left: 0;
  4.     width: 100%;
  5. }
  6. 复制代码
  1. const body = document.body;
  2. const openBtn = document.getElementById("open-btn");
  3. const closeBtn = document.getElementById("close-btn");
  4. openBtn.addEventListener("click", e => {
  5.     e.stopPropagation();
  6.     const scrollTop = document.scrollingElement.scrollTop;
  7.     body.classList.add("static");
  8.     body.style.top = `-${scrollTop}px`;
  9. });
  10. closeBtn.addEventListener("click", e => {
  11.     e.stopPropagation();
  12.     body.classList.remove("static");
  13.     body.style.top = "";
  14. });

支持往返刷新

点击移动端浏览器的前进按钮或后退按钮，有时不会自动执行旧页面的JS代码，这与往返缓存有关。这种情况在Safari上特别明显，简单概括就是往返页面无法刷新。
往返缓存指浏览器为了在页面间执行前进后退操作时能拥有更流畅体验的一种策略，以下简称BFCache。该策略具体表现为：当用户前往新页面前将旧页面的DOM状态保存在BFCache里，当用户返回旧页面前将旧页面的DOM状态从BFCache里取出并加载。大部分移动端浏览器都会部署BFCache，可大大节省接口请求的时间和带宽。
了解什么是BFCache再对症下药，解决方案就在window.onunload上做文章。

  1. // 在新页面监听页面销毁事件
  2. window.addEventListener("onunload", () => {
  3.     // 执行旧页面代码
  4. });

若在Vue SPA上使用keep-alive也不能让页面刷新，可将接口请求放到beforeRouteEnter()里。
当然还有另一种解决方案。pageshow事件在每次页面加载时都会触发，无论是首次加载还是再次加载都会触发，这就是它与load事件的区别。pageshow事件暴露的persisted可判断页面是否从BFCache里取出。

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

若浏览器不使用<meta http-equiv="Cache-Control" content="no-cache">禁用缓存，该解决方案还是很值得一用。

解析有效日期

在苹果系统上解析YYYY-MM-DD HH:mm:ss这种日期格式会报错Invalid Date，但在安卓系统上解析这种日期格式完全无问题。

  1. new Date("2019-03-31 21:30:00"); // Invalid Date

查看Safari相关开发手册发现可用YYYY/MM/DD HH:mm:ss这种日期格式，简单概括就是年月日必须使用/衔接而不能使用-衔接。当然安卓系统也支持该格式，然而接口返回字段的日期格式通常是YYYY-MM-DD HH:mm:ss，那么需替换其中的-为/。

  1. const date = "2019-03-31 21:30:00";
  2. new Date(date.replace(/\-/g, "/"));

修复高度坍塌

当页面同时出现以下三个条件时，键盘占位会把页面高度压缩一部分。当输入完成键盘占位消失后，页面高度有可能回不到原来高度，产生坍塌导致Webview底色露脸，简单概括就是输入框失焦后页面未回弹。

  • 页面高度过小
  • 输入框在页面底部或视窗中下方
  • 输入框聚焦输入文本

只要保持前后滚动条偏移量一致就不会出现上述问题。在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。

  1. const input = document.getElementById("input");
  2. let scrollTop = 0;
  3. input.addEventListener("focus", () => {
  4.     scrollTop = document.scrollingElement.scrollTop;
  5. });
  6. input.addEventListener("blur", () => {
  7.     document.scrollingElement.scrollTo(0, this.scrollTop);
  8. });

修复输入监听

在苹果系统上的输入框输入文本，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就近对齐
    1. const gotopBtn = document.getElementById("gotop-btn");
    2. openBtn.addEventListener("click", () => document.body.scrollIntoView({ behavior: "smooth" }));
    当然还可滚动到目标元素位置，只需将document.body修改成目标元素的DOM对象。一行核心代码就能搞掂的事情为何还编写那么多代码去完成，不累吗？

自动播放媒体

常见媒体元素包括音频<audio>和视频<video>，为了让用户得到更好的媒体播放体验与不盲目浪费用户流量，大部分移动端浏览器都明确规定不能自动播放媒体或默认屏蔽autoplay。为了能让媒体在页面加载完成后自动播放，只能显式声明播放。

  1. const audio = document.getElementById("audio");
  2. const video = document.getElementById("video");
  3. audio.play();
  4. video.play();

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

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

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

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