作为前端开发人员，业务上时常会涉及一些移动 H5 需求页面开发。但 Web 页面开发久了，转到 H5 页面形式开发难免会遇到一些问题。
笔者将自己所遇到的问题通过笔记形式，作为本文内容呈现给读者，希望能够一定程度给每一位读者带来帮助。
一、元素 点击/长按 后 :hover 样式一直存在
移动 H5 环境下 点击 或 长按 元素时（如：material-ui Button），元素的 :hover 伪类选择器的样式一直应用存在，导致影响了元素默认的样式。
原则上 H5 环境下的元素是不需要设置 :hover 样式交互的，但避免比较会有一个组件元素同时适应 Web 和 H5。
解决办法可以是：用元素自身的属性权重高于 :hover 内设定的属性权重。
二、H5 部分元素点击会有背景阴影闪烁
当测试同学给你提了 Bug 说 H5 页面某一处元素点击后会有背景闪烁，这是由于你在此设置了 cursor: pointer，网上给到的一些解决方案是设置：-webkit-tap-highlight-color: transparent; 取消交互高亮。
从这个属性来看，它是存在兼容问题的。其实，原则上 H5 应用是不用设置 cursor 的，最好的解决办法是设置 cursor: default; 取消 pointer 交互行为。
三、iOS 浏览器导航回退，页面未重新加载
在 iOS 端（如：Safari 浏览器），从 A 页面到 B 页面后，通过浏览器导航返回按钮，回到 A 页面后，会发现 A 页面没有重新加载，包括数据请求。
比如实现一个支付功能，在 B 页面支付完成了，回到 A 页面后期望重新请求数据来更新支付状态。安卓一切正常（部分安卓可能也有类似问题），但 iOS 并不会如期实现。
分析原因：这是因为 浏览器的“往返缓存(back-forward cache - bfcache)”特性 的一种缓存机制，用来加快用户在点击浏览器前进或者后退按钮时的速度。bfcache 将离开页面时的DOM和JS的状态全都保存了下来，也就是说将整个页面保存了下来放在了页面的缓存当中。
解决方案：onpageshow 事件会在每次加载页面时触发（不论页面是否来自 bfcache），结合 PageTransitionEvent 对象的 persisted 属性来判断页面是否从缓存中读取。
// iOS 浏览器后退页面后，决绝读取的缓存快照问题
window.onpageshow = function (e) {
if (e.persisted) {
// 如果页面是读取缓存，刷新页面
location.reload();
}
}
四、Android 安卓浏览器导航会退，ajax 看上去请求了，但实际未走到后台
在 Android 手机浏览器上，从 A 页面到 B 页面后，通过浏览器导航返回按钮，回到 A 页面后，与 iOS 不同的是：页面是重新加载了，并且会执行 mount 时定义的接口请求。
但是接口下发的数据都是老的，并不是在 B 页面操作后最新的数据。
联系后台同学查看 API 接口日志后，发现 ajax 看似在前端浏览器内发起请求了，但实际却是未进入后台。
经过查询分析，发现 ajax 在一些浏览器下，为了减少重复请求，会将载入的数据进行缓存，在请求 url 没有发生变化时，会直接读取缓存中的数据，并不会真正请求到后台。
所以我们需要禁止这种缓存特征，提供两种方式来解决：
在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)；
在 URL 后面加上时间戳：“?random=” + Date.now()。