我要招人

前端/移动开发面试题更新 2026-08-05

在 PC 端打开时展示 Web 应用、在移动端打开时展示 H5 应用，这样的前端页面该如何设计？

前端/移动开发系统设计方案权衡

考察说明

考查候选人针对多端适配的前端架构设计能力，以及响应式与独立 H5 方案的取舍。

回答思路

  1. 【回答框架 1】核心思路是识别用户设备环境，再决定渲染哪套应用。常见做法是服务端根据 User-Agent 或客户端宽度做重定向或分流，也可在前端用媒体查询或 JS 判断后加载不同入口。
  2. 【回答框架 2】若两端交互和功能差异大，推荐独立 H5 工程，通过 nginx 或网关按 UA 分流到不同站点，避免用同一套代码强行适配，减少维护成本。
  3. 【回答框架 3】若两端差异小，可采用响应式设计，用 CSS 媒体查询、弹性布局和视口单位适配，但要注意移动端触摸事件、性能与加载资源。
  4. 【回答框架 4】更现代的做法是使用同一套代码，通过路由或组件库按设备渲染，配合 PWA 或 SSR 优化首屏，但需权衡复杂度。
  5. 【回答框架 5】最终方案要结合业务复杂度、团队维护能力和性能要求，并做好设备检测的降级处理，避免误判。
  6. 【关键点 1】服务端按 User-Agent 分流到独立 Web 与 H5 应用，适合差异大的场景。
  7. 【关键点 2】前端媒体查询与 JS 判断可做轻量适配，但无法彻底解决交互差异。
  8. 【关键点 3】独立 H5 与响应式方案的取舍取决于功能差异、维护成本与性能目标。
  9. 【关键点 4】设备检测需考虑降级，如无 JS 时默认展示 PC 版或提供切换入口。
  10. 【关键点 5】移动端需关注触摸事件、视口 meta 与资源加载优化。
  11. 【易错点 1】仅靠 CSS 响应式无法处理复杂交互差异，可能导致移动端体验不佳。
  12. 【易错点 2】过度依赖 UA 判断可能因新设备或爬虫误判，需结合特性检测。
  13. 【易错点 3】忽略移动端性能优化，如资源过大或未做懒加载，会拖慢首屏。