移动端兼容总结

基础铺垫

1. 系统类型兼容->iOS/安卓(厂商)/微软->js 可以判断(嗅探功能)
2. 系统版本兼容->iOS10/11/12+(低版本不考虑)
3. 设备兼容(4/5/6/x/pluspad 等)->屏幕分辨率/尺寸兼容 rem/media/bs/flexible.js(手机淘宝团队)
4. 浏览器类型兼容->QQ/百度/UC 等->(市场占有率高的)
5. 浏览器版本兼容->QQ 浏览器哪个版本(低版本不考虑)
   分辨率兼容/适配-> flex 布局->兼容性最好

兼容方案

1. 通过响应式或者页面终端判断去实现一套资源适配所有终端

   • 优点:只需维护一套资源，维护成本较低。
   • 缺点:需加载适配各个终端的各个资源，在不同终端通过响应式布局实现不同展现，部分交互效果需要在页面中做终端判断，代价较大，若图片资源为一套，部分图片在超高分辨率设备（例如 iphone 系列）下会失真，且在非 wifi 情况下即使加了延时加载也易出现加载慢的情况。
   • 选型:jquery（或原生 js 等）+ 响应式 + 前端模块加载器（seajs 或 RequireJS 等）+ css 预处理器（sass 或 less 等）。jquery 较好的兼容性配合响应式可相对代价较小地实现跨终端。前端模块加载器主要负责按需加载，以提高页面加载速度，css 预处理器的变量、运算、嵌套等特性可大大提高手动计算响应式的效率

2. 通过终端判断分别调取两套资源以适配所有终端(推荐的玩法)

   • 优点:可根据不同端做个性设计及个性化信息推送且可按需加载，如移动端可配合重力感应、不同手势做各种炫酷拽效果，pc 页面可不受流量限制做适合 pc 端的效果。

   • 缺点: 需维护两套资源，维护成本增加。

   • 选型 :zepto（或 xui 等移动端轻量级框架）+ 响应式 + 前端模块加载器 + css 预处理器 + 终端适配。zepto 作为 jquery 的移动端版本，依然延续其自身优势，大幅优化了移动端 API 且摒弃了兼容”非现代浏览器”的冗余代码，成为移动端轻便可用的 js 框架代表，终端适配目前一般通过ua判断来实现。ua 判断可放在服务端也可放在页面中，在代理服务器中做跳转更快、更准确且不走应用程序层，即使浏览器禁用了 js 依然可以跳转到相应的地址，同时秉承着公共服务放在服务端这样的云端服务理念，我们选择了通过代理服务器做终端适配。

     User-Agent 嗅探，即 Web 浏览器发送一个 Web 页面或资源请求时，会发送一个 User-Agent 首部作为 HTTP 请求的一部分，那么我们就可以在服务器端获取想要的信息，进而判断并引导用户到达相应的页面地址。

兼容要点

css 像素与设备像素：二者的区别在于前者是抽象的，用于浏览器渲染页面，而后者是设备的最小物理单位。

window.devicePixelRatio=1||2||3 设备像素比

视口：移动端浏览器有两个视口，即可见视口与布局视口，二者的区别在于前者为基于移动设备屏幕的实际宽度，而后者为我们为页面定义的用于浏览器渲染的大小。

媒体查询：@media 找准断点。

响应式布局：当上下文环境发生变化时可考虑变化布局来展现优雅。当元素脱离文档流绝对定位时，才是相对高度定义的。

响应式字体：font-face 绝对会对网站产生巨大的影响。当容器中定义字体单位为 em 时要注意继承性，例如：当我们定义某个块级元素的”font-size：1.5em; line-height: 2em;”时，line-height 的实际行高为 1.5em*2 即 3em。

文档声明：文档声明建议用 html5 的：，它指示浏览器关于页面使用哪个 HTML 版本进行编写的指令。同时需要定义文档的视口信息，如：<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no”>width=device-width 告诉浏览器渲染该页面的宽度等于设备宽度，initial-scale=1 告诉浏览器初始化缩放的比例 1:1，user-scalable=no 禁止用户缩放页面。

兼容性测试:

调试工具推荐 chrome 的模拟器加真机测试，更多关于 debug 的工具可以参考 Debugging Mobile Web Page 这篇文章。

总结：

更倾向于各司其职思路清晰的第二种方案，我们可根据不同终端做不同的交互设计、视觉设计，研究不同的前端技术、用户体验，适合的才是更好的。

兼容性测试定义

指测试软件在特定硬件(Pad/PC/phone)平台上，不同的应用软件(UC浏览器和QQ)之间、不同的操作系统平台上，不同的网络等环境中是否能够友好的运行的测试。通俗点讲，即为测试 APP 在各个影响兼容性的因素下的表现,影响因素主要为以下几类:

• 用户
  • 大量海外用户->多币种、多语言(国际化/本地化)、时区
  • 老年人用户多->大字体的适配
• 硬件
  • 安卓/苹果手机
  • 平板
  • 穿戴设备(手表等)
  • 特殊情况:涉及相机/蓝牙/NFC 等硬件功能
• 软件
  • 操作系统
  • 浏览器内核->原生 webkit||腾讯 X5
• 技术
  • 从开发语言的方向考虑 RN/Flutter…
• 网络
  • 弱网测试

问题-08-移动端兼容-04-兼容性测试定义

兼容性测试场景

问题

1. 兼容人力不足->无法在规定时间内覆盖全部场景->保证重点场景和重点机型->未覆盖的机型要有风险标注
2. 花钱->XX 云测平台->覆盖度够(多个机型)->粒度不够
3. 没钱->自己做: 梳理重点机型->抽样覆盖保证市场上 90%的用户兼容

场景

• UI 显示
• 多次快速点击
• 拉起虚拟键盘挡住输入区
• 虚拟物理按键收起与显示
• 多个输入框来回切换
• 控件焦点热区文体
• 前后台、多个应用切换
• 指纹识别和 faceid 等
• 框架升级
• 网络(快慢)
• 新老版本兼容(1.0 2.0)
• 第三方依赖库或者 SDK 升级
• 前后端版本兼容