基于设备检测的移动设备网页优化

背景

前段时间遇到一个Bug,一群人纠结了很久,最后终于找到了问题的所在,在此记录下来算是总结吧!

Bug描述:在同一个git branch的两个不同手机产品Phone1和Phone2,他们的Browser模块拥有相同的代码。但是这两个产品拥有不同UA Header。

在使用Browser访问网址:http://m.o2.de/goto/tbm-bild 时,Phone1能够正常显示网页,但是Phone2却显示出错信息。

UA Header:全名是Useragent Header。拿手机举例,UA Header用来标识手机的型号(例如:Nokia 204)。在使用手机Browser访问网页或者进行其他Http链接的时候,手机端会把手机的型号按照Http规范拼接成类似‘Nokia 515/2.0(p)’的字串并添加到Http request里面发送到WebServer端。WebServer端则根据不同的手机型号对返回的网页数据进行定制。

问题分析

这个问题的奇怪之处就在于同属于一个git branch的phone1能够正常访问网页,但是Phone2却显示出错信息。那Phone1和Phone2有些什么却别呢?原来Phone1和Phone2虽然拥有一样的上层代码,但由于产品硬件的不同,却拥有不同的Driver层代码和产品配置信息。由于Browser使用Http协议获取和解析网页数据的代码都属于上层代码于Driver层没有太直接的关系。所以,大概可以排除由于产品Driver层代码差异的这种可能。把分析的思路放在产品配置信息上。

为了确定是那些产品配置信息导致了这个问题,我们使用了调试工具获取了Phone1和Phone2在使用Browser访问该网站时的Protocol stack。

 

基于设备检测的移动设备网页优化

上一篇:PHP查找字符串中是否包含多个指定字符串


下一篇:【精品教程】HTML5移动Web开发指南文档分享