简介

前端兼容问题主要包含：不同浏览器兼容、Web端不同分辨率适配、H5移动端适配：

• 不同浏览器兼容主要针对的是 IE 浏览器，因当前 IE 浏览器已下线，暂不讨论；
• Web端常用分辨率主要适配 1366-1920 屏幕，主要采用 媒体查询 实现，定制化可使用 window.onsize 监听；
• H5移动端适配，采用物理像素点，跟 px 之间的对应关系，做动态适配；

媒体查询

💡 Tips：通过监听不同屏幕宽度，编写相应的样式代码，实现适配

@media screen and (max-width: 1920px) {
  html {
    font-size: 20px !important;
  }
}
@media screen and (max-width: 1680px) {
  html {
    font-size: 17.5px !important;
  }
}

px、rpx、em、rem、vw、vh、vm 像素单位概念

像素单位	概念
rpx	微信小程序解决自适应屏幕尺寸的尺寸单位，屏幕的宽度为750rpx
em	相对于父元素的 font-size 值
rem	相对于根元素 html 的 font-size 值
vw	CSS3新单位，屏幕宽度等于100vw
vh	CSS3新单位，屏幕高度等于100vh
vm	屏幕宽度、高度中小的那个等于100vm，使用较少

IOS 对 fixed 布局兼容问题

IOS 在页面滚动、键盘弹出、收起时，有时会出现 fixed 布局失效问题
解决方案：用 绝对定位 替换 fixed 定位，通过页面整体高度 100vh、宽度 100vw 计算来实现定位

刘海屏、全面屏兼容适配

💡 Tips：全面屏 因 底部虚拟按钮 存在，布局时需要考虑底部安全距离

/* 底部按钮距离适配 */
.footer {
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
  padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}

💡 Tips：刘海屏 需要考虑 状态栏高度、标题栏高度

// uniapp 框架获取手机系统信息
uni.getSystemInfo({
  success: res => {
    const { platform, screenHeight, statusBarHeight, safeArea } = res
    const titleHeight = platform == 'ios' ? 44 : 48
    this.navBarHeight = statusBarHeight + titleHeight	// 状态栏高度 + 标题栏高度
    this.bottomSafaHeight = screenHeight - safeArea.bottom // 底部安全距离
  }
})