移动端适配与兼容性处理

移动端适配与兼容

一、适配方案

• rem方案：根据屏幕宽度动态设置根字体
• vw/vh方案：视口单位，更直观
• rpx方案：小程序专用，750rpx基准

二、安全区域

• iOS刘海屏：env(safe-area-inset-top)
• 底部Home键：env(safe-area-inset-bottom)
• 横屏适配：左右安全区域

三、兼容性问题

• 1px边框：CSS伪元素+transform
• 300ms延迟：touch-action或fastclick
• 键盘弹起：调整viewport
• Safari弹性滚动：overflow: hidden

四、调试工具

Chrome DevTools远程调试、vConsole、Eruda。

相关文章推荐