2024 高级前端面试题之 移动端多端开发 「精选篇」

该内容主要整理关于 移动端多端开发 的相关面试题，其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。

---

1. 移动端适配

• 为什么要做适配

  为了适应各种移动端设备，完美呈现应有的布局
  各个移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨下等比缩放

• 适配方案

  • 固定高度，宽度百分比适配-布局非常均匀，适合百分比布局
  • 固定宽度，改变缩放比例适配——什么情况都可以
  • rem适配
  • 像素比适配

单位

• em 根据元素自身的字体大小计算，元素自身 16px 1em=16px
• rem r -> root 根节点( html ) 根据html的字体大小计算其他元素尺寸

百分比适配

固定高度，宽度百分比适配

• 根据设置的大小去设置高度，单位可以用 px 百分比 auto
• 常用 Flex 布局
• 百分比宽度

rem适配(常用)

• 根据屏幕的分辨率动态设置html的文字大小，达到等比缩放的功能
• 保证html最终算出来的字体大小，不能小于12px
• 在不同的移动端显示不同的元素比例效果
• 如果html的font-size:20px的时候，那么此时的1rem = 20px
• 把设计图的宽度分成多少分之一，根据实际情况
• rem做盒子的宽度，viewport 缩放

像素比适配

• window.devicePixelRatio
• 物理像素是手机屏幕分辨率
• 独立像素 指css像素 屏幕宽度
• 像素比 = 物理像素 / css宽度
• 获取设备的像素比 window.devicePixelRatio

2. 移动端300ms延迟

3. 如何解决移动端 Retina 屏 1px 像素问题

4. 如何解决移动端击穿（穿透）问题

5. 移动端的兼容问题

6. JSBridge原理是什么？如何设计一个JSBridge？

• 6.1 JSBridge原理
• 6.2 JsBridge的核心
• 6.3 为什么是‘JS’Bridge
• 6.4 应用场景
• 6.5 JSBridge实现 —— Native端调用Web端代码
• 6.6 JSBridge实现 —— Web端调用Native端代码（拦截URL Schema）
• 6.7 JSBridge实现 —— Web端调用Native端代码（注入api)