1. 根元素字号问题
根元素字号不小于16px，如果小于16px，部分系统会在用户输入时自动放大页面导致体验问题。 在初始化页面以及window.onresize可以调用以下方法以解决当客户端自定义字号时导致的样式问题。
/*假如根元素实际渲染字体变大，将其重置为原始大小*/
function htmlFontSize () {
const html = document.querySelector('html')
let originSize = '16px'
let realSize = getComputedStyle(html).fontSize
originSize = parseFloat(originSize.replace('px', ''), 2)
realSize = parseFloat(realSize.replace('px', ''), 2)
if (originSize !== realSize) {
document.getElementsByTagName('html')[0].style.cssText = 'font-size: ' + originSiz e * (originSize / realSize) + 'px'
}
}
2. 全局组件显隐的体验问题
用户可以通过操作系统的能力返回上一页等，不要忘记监听并重置弹窗等全局组件。
3. 时间格式化
在移动端目前只有 / 兼容性比较好，如2020/02/01没问题，2020-02-01在iOS会有问题
4. 缩放
在无需双击缩放查看页面时禁止页面缩放可保障移动端浏览器能无遗漏地展现页面所有布局。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
5. 保持浏览器一致性
除了常见的reset，也要注意不常见的，可以仅用某些特定浏览器的一些特性保证体验的一致性
<!-- 禁止UC浏览器私有夜间模式 -->
<meta name="nightmode" content="disable">
6. 让:active有效，让:hover无效
有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给注册一个空的touchstart事件可将两种状态反转。
7. 修复点击无效
在苹果系统上有些情况下非可点击元素监听click事件可能会无效，针对该情况只需对不触发click事件的元素声明cursor:pointer就能解决。
8. 屏幕旋转样式表
/* 竖屏 */
@media all and (orientation: portrait) {}
/* 横屏 */
@media all and (orientation: landscape) {}
9. 缓存导致的事件绑定问题
例如Vue的keep-alive组件，尤其是存在触发软键盘的表单时，可能会引发移动端某些与resize事件绑定的插件更新问题 可以在需要刷新的位置手动派发resize事件，其他事件同理
var ev = new Event('resize')
window.dispatchEvent(ev)
10. 元素滚动到可视区域
DOM的scrollIntoView方法会滚动目标元素的父容器使之对用户可见，简单概括就是相对视窗让容器滚动到目标元素位置。
它有三个可选参数能让scrollIntoView滚动起来更优雅：
behavior：动画过渡效果，默认auto无，可选smooth平滑
inline：水平方向对齐方式，默认nearest就近对齐，可选start顶部对齐、center中间对齐和end底部对齐
block：垂直方向对齐方式，默认start顶部对齐，可选center中间对齐、end底部对齐和nearest就近对齐
