我要招人

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

在移动端开发中，通常会遇到哪些典型的兼容性问题？请结合 iOS 与 Android 平台，说明它们之间存在哪些关键差异？

前端/移动开发技术原理方案权衡问题排查AndroidCSSJavaScript

考察说明

考查候选人对移动端跨平台兼容性问题的实际认知，以及能否区分 iOS 与 Android 在渲染、交互、系统能力上的差异。

回答思路

  1. 【回答框架 1】移动端兼容性问题主要集中在浏览器内核差异、CSS 支持、JavaScript API 可用性、设备硬件特性以及网络环境等方面。iOS 主要使用 WebKit 内核（如 Safari），Android 则碎片化严重，从 WebView 到 Chrome 内核均有差异，导致同一代码在不同设备上表现不一致。
  2. 【回答框架 2】常见兼容性问题包括：CSS 样式差异，如 flexbox 旧版语法、position: fixed 在 iOS 上的滚动异常；iOS 上 100vh 包含地址栏导致布局错位；Android 上部分机型对 CSS 动画的支持效果不同。
  3. 【回答框架 3】JavaScript 方面，iOS Safari 对某些 ES6 语法支持晚于 Android Chrome，且 iOS 上有些 Web API 实现有偏差，如 Date 对象解析格式、输入事件触发时机等。移动端触摸事件、300ms 点击延迟（虽然新版已修复）等历史问题也是重点。
  4. 【回答框架 4】iOS 与 Android 的差异还体现在：iOS 禁止全局字体设置（需通过系统设置），而 Android 可应用自定义字体；iOS 的输入框默认样式与键盘行为与 Android 不同；iOS 上软键盘弹出可能遮挡输入框，Android 则自适应调整。
  5. 【回答框架 5】处理策略包括：使用标准兼容的 CSS 特性、借助 autoprefixer 自动添加前缀、使用 polyfill 填充 API 差异、进行真机测试并利用平台特定样式或媒体查询适配。
  6. 【关键点 1】移动端兼容性问题主要源于浏览器内核差异、CSS 支持不一致和 JavaScript API 差异性。
  7. 【关键点 2】iOS Safari 与 Android 浏览器对同一功能支持程度不同，如 flexbox、position: fixed 等。
  8. 【关键点 3】iOS 上 100vh 布局受地址栏影响，需使用 window.innerHeight 动态计算。
  9. 【关键点 4】处理兼容性需综合使用标准写法、polyfill、自动化工具（如 autoprefixer）和真机测试。
  10. 【关键点 5】平台差异如字体、输入行为、键盘弹出等需针对性适配。
  11. 【易错点 1】误以为使用相同代码即可在所有移动设备正常显示，忽视内核差异。
  12. 【易错点 2】过度依赖第三方库而忽略其对内核对版本的依赖，导致引入新的兼容性隐患。
  13. 【易错点 3】未考虑 iOS 软键盘弹出对 fixed 定位元素的影响，可能导致输入框被遮挡。