移动端开发面试题

移动端适配

移动端适配方案有哪些？

方案：

rem 适配：动态设置根元素字体大小
vw/vh 适配：使用视口单位
媒体查询：响应式设计
flexible.js：已废弃

rem 适配的原理？

原理：

根据屏幕宽度动态设置根元素字体大小
使用 rem 单位
1rem = 根元素字体大小

实现：

function setRem() {
  const width = document.documentElement.clientWidth;
  const rem = width / 10; // 375px 设计稿，1rem = 37.5px
  document.documentElement.style.fontSize = rem + 'px';
}

vw/vh 适配的原理？

原理：

使用视口单位
1vw = 视口宽度的 1%
1vh = 视口高度的 1%

使用：

/* 设计稿 375px，元素宽度 100px */
.element {
  width: 26.67vw; /* 100 / 375 * 100 */
}

1px 问题是什么？如何解决？

问题：

高分辨率屏幕（DPR > 1）
1px CSS = 多个物理像素
导致边框变粗

解决方案：

transform scale：缩放边框
viewport 缩放：整体缩放
border-image：使用图片
box-shadow：使用阴影

/* transform scale */
.border::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: #000;
  transform: scaleY(0.5);
}

触摸事件

移动端触摸事件有哪些？

事件：

touchstart：触摸开始
touchmove：触摸移动
touchend：触摸结束
touchcancel：触摸取消

如何实现滑动操作？

实现：

let startX, startY;

element.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

element.addEventListener('touchend', (e) => {
  const endX = e.changedTouches[0].clientX;
  const endY = e.changedTouches[0].clientY;
  
  const deltaX = endX - startX;
  const deltaY = endY - startY;
  
  // 判断滑动方向
});

如何禁止滚动穿透？

方法：

function preventScroll(e) {
  e.preventDefault();
}

// 打开弹窗时
document.body.style.overflow = 'hidden';
document.body.addEventListener('touchmove', preventScroll, { passive: false });

性能优化

移动端性能优化方法？

方法：

减少重排重绘
使用 transform 代替 top/left
图片优化（WebP、懒加载）
代码分割
减少 DOM 操作
使用 will-change

如何优化移动端滚动性能？

优化：

使用 -webkit-overflow-scrolling: touch
减少滚动时的 DOM 操作
使用虚拟滚动
节流滚动事件

.scroll-container {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

兼容性

移动端浏览器兼容性如何处理？

方法：

Autoprefixer：自动添加前缀
Polyfill：填充缺失功能
特性检测：检测浏览器支持
降级方案：提供替代方案

iOS 和 Android 的差异？

差异：

滚动：iOS 有弹性滚动
输入框：iOS 会自动缩放
安全区域：iPhone X+ 有安全区域
字体：iOS 和 Android 字体渲染不同

处理：

/* iOS 安全区域 */
.safe-area {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 禁止 iOS 自动缩放 */
input {
  font-size: 16px; /* 16px 以上不会缩放 */
}

调试

如何调试移动端页面？

方法：

Chrome DevTools：设备模拟器
真机调试：USB 连接调试
vConsole：移动端控制台
Charles/Fiddler：抓包工具

vConsole 如何使用？

<script src="https://cdn.jsdelivr.net/npm/vconsole/dist/vconsole.min.js"></script>
<script>
  const vConsole = new VConsole();
</script>

最佳实践

移动端开发注意事项？

注意：

设置正确的 viewport
处理 1px 问题
优化触摸体验
处理安全区域
性能优化
兼容性处理

移动端适配最佳实践？

实践：

选择合适的适配方案（rem 或 vw/vh）
使用 postcss 插件自动转换
处理 1px 问题
优化触摸体验
性能优化