(07).前端知识库之移动端篇

一、移动端适配的常用方法

1. 视口配置

• 在 HTML 中设置 <meta name="viewport">，确保页面按比例缩放：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

• width=device-width：根据设备宽度自适应。
• initial-scale=1.0：初始缩放比例为 1。

2. 弹性布局（Flexbox/Grid）

• Flexbox：通过 display: flex 和 justify-content, align-items 实现灵活排列。
• Grid：二维网格布局，适合复杂页面结构。

3. 相对单位

• rem：基于根字体大小的单位（通常设置 html { font-size: 16px }，1rem = 16px）。
• vw/vh：基于视口宽高（如 width: 50vw 表示视口宽度的 50%）。

4. 媒体查询（Media Queries）

• 根据设备屏幕尺寸、分辨率等条件应用不同的 CSS 样式：

  @media (max-width: 768px) {
    /* 手机端样式 */
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    /* 平板端样式 */
  }
  

5. PostCSS 处理像素比

• 使用 postcss-pxtorem 自动将 px 转换为 rem，适配不同设备像素密度（DPR）。

6. 图片适配

• 响应式图片：通过 <picture> 或 srcset 动态加载不同尺寸图片：

  <picture>
    <source srcset="image-480w.jpg" media="(max-width: 480px)">
    <source srcset="image-800w.jpg" media="(max-width: 800px)">
    <img src="image.jpg" alt="描述">
  </picture>
  

---

二、移动端触摸事件的处理与应用

1. 基本触摸事件

• touchstart：手指触碰屏幕时触发。
• touchmove：手指滑动时持续触发。
• touchend：手指离开屏幕时触发。
• touchcancel：系统取消触摸时触发（如来电中断）。

2. 事件对象属性

• touches：当前所有接触点的列表（最多 10 个点）。
• targetTouches：仅包含当前元素的接触点。
• changedTouches：本次事件中发生变化的接触点。

3. 应用场景

• 滑动删除：通过监听 touchmove 计算偏移量，实现列表项的左右滑动。
• 手势识别：
  • 滑动方向判断：通过 touchstart 和 touchend 的坐标差计算方向（如 dx = e.endX - e.startX）。
  • 缩放操作：结合 touchstart、touchmove 和 touchend 监听多点触控缩放。

4. 阻止默认行为

• 使用 e.preventDefault() 阻止页面滚动或元素默认操作（如链接跳转）：

  document.addEventListener('touchmove', function(e) {
    e.preventDefault(); // 阻止滚动
  });
  

5. 与鼠标事件的差异

• 移动端无 dblclick 事件，且 click 事件有 300ms 延迟（可通过 fastclick 库优化）。
• 触摸事件支持多点触控，而鼠标事件仅单点。

---

三、优化移动端页面性能与用户体验

1. 性能优化

• 减少资源体积：
  • 压缩图片（WebP 格式）、压缩 CSS/JS（Gzip 或 Brotli）。
  • 删除冗余代码和未使用的第三方库。
• 懒加载（Lazy Loading）：
  • 图片、视频延迟加载（使用 loading="lazy" 属性）：

    <img src="image.jpg" loading="lazy" alt="描述">
    

• CDN 加速：静态资源通过 CDN 分发，降低延迟。
• 代码分割：按需加载模块（如 Webpack 的代码分割）。

2. 渲染优化

• 避免重排重绘：
  • 使用 transform 和 opacity 替代 left/top 属性触发重排。
  • 批量修改 DOM（使用 DocumentFragment 或 requestAnimationFrame）。
• CSS containment：限制元素的影响范围（如 contain: strict）。

3. 用户体验优化

• 首屏加载优化：
  • 减少关键路径资源体积，优先加载核心内容。
  • 使用骨架屏（Skeleton Screen）提升等待体验。
• 动画流畅度：
  • 使用 CSS 动画（@keyframes）而非 JavaScript 实现简单动画。
  • 启用硬件加速（通过 translateZ(0) 或 will-change 属性）。
• 离线支持：
  • 使用 Service Worker 缓存静态资源，实现离线访问。

4. 其他优化

• 字体优化：通过 font-display: swap; 加快字体加载。
• 减少主线程阻塞：将耗时任务（如数据处理）放到 Web Worker 中执行。
• 监控与调试：使用 Chrome DevTools 的 Performance 面板分析性能瓶颈。

---