如何去适配一个H5网站呢？最近项目中新开发了一个H5的网站

点击上方“搜狗测试”可关注我们！

问题背景：

最近项目中新开发了一个H5的网站，一轮测试已测试完毕，进入适配测试阶段，由于小编一直测试Android客户端，缺乏H5网站方面适配的经验，那怎么去制定一个H5网站的的适配方案呢？

一、分析H5网站适配与客户端适配的相同点和不同点

1、相同点：

1）都涉及到UI方面，所以都需要进行分辨率适配；

2）由于该网站有调起系统相机功能，所以也需要进行系统、厂商方面的适配；

2、不同点：

1）适配平台不同，作为客户端测试只需要考虑单一平台即可，但是H5测试适配时还要考虑不同平台，例如：iOS、Android等；

2）客户端兼容性不同，作为客户端测试由于测试的就是客户端，所以根本需要考虑这方面，但是H5网站任何浏览器都可以访问，所以需要考虑浏览器的适配；

通过上面4点，接下来制定适配策略：

二、适配平台及机型选取

1、适配平台

由于本次的H5网站只是手机网站，所以本次适配平台不考虑PC端，最终适配平台为iOS和Android；

2、适配系统

在系统适配方面，经过产品调研后，由于Android2.3和iOS7以下系统占比非常少，所以本次适配不考虑，本次适配系统如下：

Android：

4.0.4，4.1，4.2.2，4.3 , 4.4，5.0，5.1, 6.0，7.0，8.0；

iOS：

iOS7、iOS8、iOS9、iOS1、iOS11；

3、适配分辨率

在分辨率方面，经与产品沟通后，需要适配目前市面上的常见所有分辨率，本次分辨率适配如下：

Android：

320X480、480X800、480X854、540X960、720X1280、800X1280、1080X1920、1440X2560；

iOS：

960X640、1136X640、1134X750、1920X1080；

4、适配厂商

由于Android厂商众多，本次主要选取目前占比比较高的厂商，主要有华为、小米、三星、vivo、魅族、中兴等；

5、机型适配最终列表：

综合上面几点，得出最终本次H5网站机型适配列表如下：

三、浏览器选取

关于浏览器选取方面，主要是由产品为主导，在产品调研后，本次适配选取目前浏览器top5+自带浏览器进行适配，具体如下：

浏览器： QQ浏览器、百度浏览器、搜狗浏览器、360浏览器、UC浏览器、手机自带浏览器

四、具体适配方案

1、分辨率适配方案：

每部手机选取一个浏览器进行分辨率适配测试，选取用例中所有UI、动画、转屏相关用例；

2、系统适配、浏览器适配方案：

关于浏览器适配方案小编开始纠结了，是将所有浏览器在一部手机上适配完即可还是每个手机上都需要去适配浏览器呢？

为什么会纠结这个呢？小编主要是担心这几款浏览器本身会存在适配问题，为了保证质量所以小编觉得在每部手机上都适配浏览器，如果经过几版迭代后，浏览器在系统适配方面没有什么问题，浏览器适配方案再进行更改，具体适配方案如下：

1）每部手机选取一个浏览器选取冒烟测试用例执行系统适配测试；

2）每部手机在剩余浏览器上选取主功能用例进行浏览器适配测试；

总结：

上述就是我在制定H5网站适配策略的过程及最终方案，欢迎大家一起来讨论该方案有什么不足！