移动端适配有何注意要点

移动端适配是前端开发中的核心环节，目标是在不同尺寸、分辨率、系统（iOS/Android）和浏览器上，保证页面的布局合理、文字可读、交互易用、性能流畅。以下是移动端适配的主要注意要点：

一、视口（Viewport）设置

• 必须配置 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
• 避免页面被默认缩放，保证 CSS 像素与设备逻辑像素对应
• 慎用 user-scalable=no（无障碍场景可能需要允许缩放）

二、尺寸与单位选择

1. 常用适配方案

• rem + 动态根字体（如 flexible.js / postcss-pxtorem）
• vw / vh（视口单位，现代项目推荐）
• 百分比布局
• Flex / Grid 布局（首选）

2. 单位建议

• 字体：可用 rem 或 vw，避免过小（正文 ≥ 14px）
• 间距：用 rem / vw / %
• 边框：可用 1px 物理像素方案（transform scale）

三、高清屏与图片适配

• 使用 2x / 3x 图（srcset / image-set）
• 小图标优先使用 SVG / iconfont
• 图片使用 object-fit: cover/contain 控制展示
• 避免大图导致加载慢和内存占用高

四、布局适配要点

• 优先使用 流式布局 + Flex/Grid
• 避免固定宽度（如 width: 750px）
• 注意 安全区域（刘海屏、底部 Home 条）：
  • env(safe-area-inset-bottom)
  • viewport-fit=cover
• 横竖屏切换要可正常使用

五、字体与可读性

• 使用系统字体栈（iOS / Android 各不同）
• 禁止过小字体（易点错、难阅读）
• 行高适中（1.4–1.6）
• 避免过多字体样式

六、交互与手势

• 点击区域 ≥ 44×44px（Apple 规范）
• 避免 :hover 依赖（移动端无 hover）
• 禁用双击缩放、长按选中（按需）
• 滚动使用原生滚动，避免卡顿
• 注意滑动冲突（如轮播与页面滚动）

七、性能适配

• 减少 DOM 数量与重排
• 使用 lazy-load 图片
• 控制 JS / CSS 体积
• 使用 will-change 谨慎优化动画
• 避免大量同步请求

八、系统与浏览器差异

• iOS：
  • 禁止长按图片保存（可配置）
  • 输入框被键盘遮挡问题
  • 300ms 点击延迟（已基本解决）
• Android：
  • 碎片化严重，需多机型测试
  • WebView 版本差异大
• 微信 / 钉钉等内置浏览器特殊行为

九、调试与测试

• 使用真机测试（不可只靠模拟器）
• 覆盖主流机型（iPhone + 安卓旗舰/中端）
• 测试弱网、低内存情况
• 使用 Chrome DevTools 移动模拟

十、常见坑总结

• 1px 边框变粗
• 键盘弹起布局错乱
• 100vh 在移动端不准（可用 100dvh）
• 字体在 iOS 自动加粗
• 音频/视频自动播放限制

如果你需要，我也可以：

• 给你一套 rem / vw 适配代码模板
• 针对 Vue / React 项目给具体方案
• 针对 **某类页面（活动页 / H5 / 小程序）**细讲