建站百科

网站建设、网站设计、网站开发、域名、主机、服务器等知识普及

制定H5网站适配策略和方案

文章导读:本文主要阐述了“制定H5网站适配策略和方案”小编在2015年前后就在讲移动网站的重要性,现在移动端很重要早已经是必然的了,移动端的用户超过PC,并且移动用户一般是随时随地...,本文由跨屏网最后更新于2020-07-26,全文共1412个字,预计阅读时长4分42秒

 小编在2015年前后就在讲移动网站的重要性,现在移动端很重要早已经是必然的了,移动端的用户超过PC,并且移动用户一般是随时随地的使用互联网,让移动互联网拓客已经成为了主要的手段和捷径,不少传统网站都需要适配手机。而适配手机就避不开一些行之有效的策略和方案。
 
问题背景:
  最近项目中新开发了一个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、魅族、中兴等;
 
 
 
  三、浏览器选取
  关于浏览器选取方面,主要是由产品为主导,在产品调研后,本次适配选取目前浏览器top5+自带浏览器进行适配,具体如下:
  浏览器:  QQ浏览器、百度浏览器、搜狗浏览器、360浏览器、UC浏览器、手机自带浏览器
  四、具体适配方案
  1、分辨率适配方案:
  每部手机选取一个浏览器进行分辨率适配测试,选取用例中所有UI、动画、转屏相关用例;
  2、系统适配、浏览器适配方案:
  关于浏览器适配方案小编开始纠结了,是将所有浏览器在一部手机上适配完即可还是每个手机上都需要去适配浏览器呢?
  为什么会纠结这个呢?小编主要是担心这几款浏览器本身会存在适配问题,为了保证质量所以小编觉得在每部手机上都适配浏览器,如果经过几版迭代后,浏览器在系统适配方面没有什么问题,浏览器适配方案再进行更改,具体适配方案如下:
  1)每部手机选取一个浏览器选取冒烟测试用例执行系统适配测试;
  2)每部手机在剩余浏览器上选取主功能用例进行浏览器适配测试;
  总结:
  上述就是我在制定H5网站适配策略的过程及最终方案,欢迎大家一起来讨论该方案有什么不足!

写在最后,以上就是对于“制定H5网站适配策略和方案”的一些看法,欢迎指正、交流。

当前标题:制定H5网站适配策略和方案
分享URL:http://test.kuaping.com/article/show226.html

推荐模板
紫色大气教育培训模板
编号:partf#zisejiaoyu
游戏电影适用深蓝色网站模板
编号:partf#gamedianying
医生科研生物网站带时间轴模板
编号:partf#daishijianzhou
学习教育培训类模板
编号:partf#jiaoyuedu
网站即将上线引导页
编号:partf#shangxianyindao
免责声明:本站是自助建站平台,仅提供信息存储空间服务,该信息内容的真实性及合法性由该发布者完全负责。
咨询客服

8年品牌 专注移动电商

扫码立即咨询

027-817-77732

133-434-77732

关注我们

关注跨屏互联公众号

回到顶部