2024 高级前端面试题之 移动端多端开发 「精选篇」
该内容主要整理关于 移动端多端开发 的相关面试题，其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。
移动端多端开发精选篇
- 1. 移动端适配
- 2. 移动端300ms延迟
- 3. 如何解决移动端 Retina 屏 1px 像素问题
- 4. 如何解决移动端击穿（穿透）问题
- 5. 移动端的兼容问题
- 6. JSBridge原理是什么？如何设计一个JSBridge？
1. 移动端适配
-
为什么要做适配
为了适应各种移动端设备，完美呈现应有的布局
各个移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨下等比缩放 -
适配方案
- 固定高度，宽度百分比适配-布局非常均匀，适合百分比布局
- 固定宽度，改变缩放比例适配——什么情况都可以
- rem适配
- 像素比适配
单位
em根据元素自身的字体大小计算，元素自身16px 1em=16pxremr -> 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)