一、移动端兼容性要考虑的问题有哪些?
1、不同浏览器兼容性
2、安卓、ios兼容
3、系统版本和浏览器版本兼容
4、不同屏幕兼容(大小,宽高比,像素比,刘海)
二、前端需要重点解决的问题有哪些,解决方案是什么?
1、屏幕适配问题,
布局技术:
媒体查询
百分比布局
rem 布局
viewport设置网页的宽度和缩放比例
Flexbox 布局
JavaScript 来动态设置元素的大小和位置
使用相对单位(em、rem、vw)
使用 web 字体保证在不同分辨率的手机上字体显示效果一致
使用字体图标和矢量图来代替图片,保证不同分辨率的手机图片显示效果一致
布局方案:
布局方案要解决的问题是:选哪些技术,怎么配合,实现什么效果,
实现效果:
整体目标是要让不同的终端设备都拥有基本一致的视觉效果和交互体验,通常是页面宽度要适应屏幕宽度,高度可以不管。
对于单个元素可能的效果:
-
固定尺寸(按钮、文字大小、间距)
-
保持宽高比(比如banner图片)
-
间距固定,内容自适应(比如产品卡片宽度)
-
内容固定,间距自适应
-
按屏幕等比缩放
2、 浏览器、系统兼容问题
js解决方案:
babel语法降级
js API的pollyfill
特殊的API表现不一致,手动去处理
css解决方案:
加浏览器特殊前缀
使用浏览器的特有的属性
三、你在项目中遇到过哪些具体的兼容问题,怎么解决的?
1、安卓和ios低版本系统的webview里面,js调用window.navigator.userAgent拿不到ua,就会出现undefined调字符串方法导致webview一进页面白屏,
解决方案:
defineplugin打包时候替换window.navigator.userAgent为window.navigator.userAgent||""就不会因为undefined调字符串方法出问题,但是cdn引入的库还会报错,最后在所有的html文件里面所有的script标签之前加入了一个script,对 window.navigator.userAgent做判断,拿不到的话给个默认值
2、RN的modal弹窗在某些android里面(如小米10),遮罩层遮不住刘海屏,有的手机上下都有刘海,如果给弹窗设置了遮罩层,刘海部分不会被遮罩
解决方案: 使用第三方组件库`react-native-root-modal
3、在小米手机上,数字可能会莫名缺失,这是由于小米系统自带的兰亭Pro字体在RN中显示有问题。数字会有随机的缺失现象
解决方案: 给所有数字的字体设置为'' { fontFamily: '' }