手机网站开发技术-USB迷|专注于互联网分享

2024年2月8日发(作者：圣沛若)

文档名称：手机网站开发技术

手机网站开发技术

百度在线网络技术（百度在线网络技术（北京）北京）有限公司

有限公司

百度在线网络技术（北京）有限公司 - 1 -

文档名称：手机网站开发技术

修改记录

修改后

版本号

V1.0

修改内容简介

全文

修改日期

2010-7-14

修改人

孙鹤飞

百度在线网络技术（北京）有限公司 - 1 -

文档名称：手机网站开发技术

手机网站开发技术...........................................................................................................................1

1 手机网站特征...............................................................................................................................1

2 名词解释.......................................................................................................................................1

3 系统架构相关...............................................................................................................................1

4 手机浏览器...................................................................................................................................2

5 前端3

5.3

6 用户登录流程...............................................................................................................................4

6.1 手机登陆基本原理............................................................................................................4

6.2 自动登录实现....................................................................................................................4

7 开发问题汇总...............................................................................................................................4

7.1 模板使用xhtml还是4

7.2 字符编码问题....................................................................................................................5

7.3 大文档转码效率................................................................................................................5

7.4 特殊字符引起的xml解析失败........................................................................................5

7.5 内容下载大小限制............................................................................................................5

7.6 内容下载后乱码................................................................................................................6

7.7 手机图片浏览....................................................................................................................6

7.8 手机产品如何测试............................................................................................................6

7.9 手机产品的推广................................................................................................................6

7.10 无线产品的统计..............................................................................................................6

8 手机类型与测试问题汇总...........................................................................................................7

9 其他参考数据...............................................................................................................................8

9.1 移动用户群........................................................................................................................8

9.2 参考资料..........................................................................................................................10

百度在线网络技术（北京）有限公司 - 2 -

文档名称：手机网站开发技术

1 手机网站特征

随着移动互联网的发展，手机（GPRS/3G）上网用户逐渐增多，为了满足手机用户便捷获取信息的需求，百度越来越多的产品需要提供手机版，满足用户随时随地接入访问需求，并提供更好的手机浏览体验，。

由于手机终端与PC终端的不同，导致手机网站同普通PC网站相比具有一些独特特征：

1. 手机终端、浏览器复杂多样，用户体验需要兼容不同手机终端；

2. 手机网站的页面功能、样式往往不同于PC端；

3. 手机网站的汉字编码不同于PC端；

4. 手机网站的页面渲染语言不同于PC端；

5. 手机无线访问的速度低于PC互联网；

6. 手机网站的用户群、用户习惯、访问时间分布不同于PC网站；

2 名词解释

域名适配：域名适配：根据用户http请求header中字段，判断是否为移动终端用户，用于手机用户在www域名访问时自动跳转到页面；

详情可参考：/twiki/bin/view/Main/DomainNameAdaption

手机适配：手机适配：根据用户http请求header中字段，判断用户的手机型号，根据手机型号提供特定套餐（屏幕大小、是否触屏、支持的编码类型等）；

Thumbnail：图片转换的利器，提供互联网图片在手机端浏览的实时转换功能；

详情可参考：/twiki/bin/view/Ns/Thumnail

3 系统架构系统架构相关架构相关

多数手机网站在开发前已经存在了PC端访问版本，因此需要考虑对原有系统架构的兼容，需遵循易扩展、易部署、易运维，同时又最大程度节省开发/维护工作量的原则。

总结的一些手机网站的设计建议：

1. 最好能统一后端的处理与存储，避免重复开发；

2. 最好抽取出中间的DAL层（数据访问层），以同时支持PC-ui和WAP-ui，降低二者耦合；

3. WAP前端的展现UI尽量复用PC端代码；

4. Pc-ui和Wap-ui最好单独CVS模块维护，利于并行开发；

5. Pc-ui和Wap-ui初期最好支持同机部署，有利于节省机器资源；

最终的理想架构为：

百度在线网络技术（北京）有限公司第 1 页共 10 页

文档名称：手机网站开发技术

百度在线网络技术（北京）有限公司第 2 页共 10 页

文档名称：手机网站开发技术

可见针对UCWEB做一些针对性优化后效果提升会明显些。

5 前端webserver

百度新产品的webserver不外乎使用apache和lighttpd两种，机端的web服务一般也会从二者中选其一，从目前百度产品趋势来看，新产品建议使用lighttpd。

5.1 Apache

之前由wise负责维护的无线产品基本都使用apache做为webserver，如空间、知道（改版前）、贴吧等；

其优点包括：

1. PC端的老产品统一维护；

2. Wise已经开发了针对于apache的域名适配module，可以直接挂载使用；

3. Apache对于部分手机浏览器发送的带content-length字段的请求不会拒绝；

关于apache的详细介绍请参考：/twiki/bin/view/Gm/Apache2HomeNew

缺点就是需要部署transmit模块，且gm对apache的技术支持力度也在减弱。

5.2 Lighttpd

由于lighttpd在防攻击和性能方面的诸多优越性，以及公司内部对webserver的维护逐渐倾向于lighttpd，故新产品的web服务一般都会选择使用lighttpd；

目前百度手机产品使用lighttpd做为webserver的尚不多，主要有文库、知道（新版）等，使用lighttpd过程中遇到的问题：

1. 900版本的lighttpd对请求头的检查过于严格，使得一部分手机浏览器因为请求头部不规范（包含有content-length字段），而出现302错误跳转。将lighttpd升级为1500新版本后，问题解决；

2. 目前尚没有针对于lighttpd的域名适配module可供使用；

百度在线网络技术（北京）有限公司第 3 页共 10 页

文档名称：手机网站开发技术

关于lighttpd的详细介绍请参考：/twiki/bin/view/Gm/Lighttpd15Home

通过修改lighttpd配置文件，可以让wap服务和pc服务使用同一webserver，修改方法就是根据$HTTP["host"]字段的匹配，设置不同的document-root、errorlog、日志文件路径等参数。以手机文库的lighttpd配置举例如下：

$HTTP["host"] =~ "(.*)(||)"{

nt-root = "/home/iknow/wapui/webroot/"

og = "| " + og_path + " -S " + + "/log_wap/ " +

+ "/log_wap/error_log.%Y%m%d%H"

me = "| " + og_path + " -S " + + "/log_wap/ " +

+ "/log_wap/.%Y%m%d%H"

e-once = (

"^/static/(.*)$" => "/static/$1",

"^/$" => "/static/img/",

"^(/[^?]+)?((?.*)?)$" => "/$2"

)

}

6 用户登录流程

6.1 手机登陆基本原理

由于PC端的浏览器都支持cookie，故PC端用户的登录流程是：先从cookie中获取BDUSS，然后根据BDUSS同passport session服务交互获取uid、uname以及各产品线设置的private字段（如是否封禁、是否管理员等）；

但因为多数手机浏览器不支持cookie，故无法使用PC端的登录校验流程，目前百度内部采用的方法是：使用wise部门提供的一套wise登录代理服务（HTTP接口）。该代理服务的实现原理是：wise登录代理负责分配并记录用户的BDUSS，同时返回md5加密的ssid，并携带到url参数中向后传递。当用户刷新页面时，由产品线ui根据url中的ssid字段向wise请求BDUSS，利用返回BDUSS同passport session服务交互获取用户信息；

6.2 自动登录实现

对于部分支持cookie的手机，可以实现自动登录功能，即用户在登录时手动选择保存登录信息，然后关闭浏览器后再打开页面时会进行自动登录。其原理是用户在选择保存登录信息时，将用户名和密码信息加密后写入cookie的WAPLS字段中，下次重新打开浏览器时，后台UI根据从cookie获得的WAPLS字段跳转到wise的登录页面，交互成功后返回产品页面，此时便会显示用户已处于登录状态。

7 开发问题汇总

由于手机终端的多样性，以及手机浏览器本身的功能限制，开发过程中遇到的问题较多。

7.1 模板使用xhtml还是wml

百度在线网络技术（北京）有限公司第 4 页共 10 页

文档名称：手机网站开发技术

WML代表“Wireless Markup Language”。WML就是无线标记语言（Wireless Markup Language），内置于移动设备中的微型浏览器能够解释这种标记语言。虽然它和HTML语言很相像，但WML其实是XML的一个应用子集。

XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写（参考/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。从某种意义上讲，建立XHTML的目的就是实现HTML向XML的过渡。

随着无线技术的发展和手机终端的更新换代，越来越多的手机终端已支持xhtml，逐步成为手机网站开发的首选描述语言。但仍有约低于低于5%的低端手机尚不支持xhtml。由于影响范围很小，对于手机网站的开发，建议采用xhtml做为主流模板语言，如果仍需要照顾部分低端手机市场，可以再开发一套wml模板，通过手机终端适配识别出手机终端类型后进行逐个调用。

7.2 字符编码问题

目前绝大多数手机支持UTF-8的字符编码，仅有少部分手机支持GBK汉字编码，故出于对手机终端覆盖的全面性考虑，手机网站的页面字符编码应使用UTF-8。但百度各产品线历史数据存储多使用GBK编码，故需要进行编码转换。

对于百度文库，因为用户上传文件原始编码的多样性，需要对编码类型进行识别并统一转化为UTF8编码。

抽样调研文库中2479份txt文档的不同编码类型所占比率：

GBK（包含英文）

UTF16

UTF8

2338

94.31%

3.55%

2.14%

其中，GBK编码可以直接转化为UTF-8编码，UTF-16编码可以当做UNICODE编码对待，将其转化为UTF-8（但目前百度内部的Public/uconv 库尚不支持直接转码，需要先将unicode转化为GBK，然后才能转化为UTF-8）。当前接近100%比例的txt文档均可以成功在手机端展现。

关于字符编码知识的一个通俗详细的解释：/question/

7.3 大文档转码效率

对于一个10MB的txt文档，全篇内容转码在效率上难以接受。故百度文库根据用户请求的页数先计算偏移量，然后根据请求长度截取出请求页的文本内容，再对截取出内容进行首尾的半个汉字处理和编码转换。对于半个汉字的处理，需要保证翻页内容的连续性，文库采用了向前（后）扫描，先找到汉字低字节（或英文），确认起点后再逐步扫描到截断偏移地址的方法，这样可以避免扫面整篇文档，减少CPU消耗。

7.4 特殊字符引起的xml解析失败

如果文档内容中含有0x00 - 0x1F范围的特殊字符（0x0A换行符、0x0D回车符除外），会导致xml解析的失败，进而导致手机页面出现解析错误页，故需要将文本内容中0x00~0x1F范围内（0x0A、0x0D除外）的特殊字符进行过滤，使得xml可以成功解析。在0x00 ~ 0x1F范围外的特殊字符也可能会导致xml解析失败，但比率很小。

7.5 内容下载大小限制

因为移动网络问题，一般大于300KB的内容下载会由于连接时间过长而导致下载失败，故对于百度在线网络技术（北京）有限公司第 5 页共 10 页

文档名称：手机网站开发技术

大于300KB的内容需要使用分段下载技术以提升下载成功率。

7.6 内容下载后乱码

由于手机终端默认的字符编码不一致，txt文档下载到手机终端后会因为无法识别编码而出现乱码现象。由于无法照顾到所有手机，目前文库的文档下载编码默认使用UTF-8，后续可通过手机终端适配功能提升下载后的成功阅读率；

7.7 手机图片浏览

PC端页面中含有的图片直接在手机端展现会存在加载慢、浪费流量、分辨率过大而无法浏览的问题（如百度知道的回答嵌入图片），需要借用wise的thumbnail（参考/twiki/bin/view/Ns/Thumnail ）服务进行图片的实时压缩转换和缓存，故手机页面中的图片异步请求url域名和参数不同于PC端，需要指向wise服务，同时参数中携带图片原url来源便于thumbnail服务抓取和压缩。整个流程原理如下：

7.8 手机产品如何测试

手机产品测试需要考虑的不同维度划分：

1、终端厂家与品牌，尽量覆盖主流品牌手机；

2、终端操作系统，尽量覆盖全操作系统类型；

3、浏览器类型；

4、交互方式（键盘、触屏等）；

5、屏幕大小（大、中、小屏）；

6、服务运营商与网络（移动、联通、电信，GSM/GPRS/3G等）；

另外，产品测试过程中如何通过sim卡访问测试机，是所有手机产品测试过程中遇到的问题，同OP、QA沟通后采用的解决方法是开通测试机的外网访问权限。

7.9 手机产品的推广

目前wap百度的默认检索结果是网页链接，故对于已有PC端产品的检索结果url链接使用的是普通PC产品域名，而非wap域名，需要通知wise部门做相应的域名映射工作才能使得手机检索用户访问期望的wap页面；

同时，也可考虑同掌上百度（客户端软件）合作推广自有产品，合作大体思路为：产品线提供数据，掌百负责渲染和推广。

7.10 无线产品的统计

如果wap产品独立部署，则相关统计直接使用webserver日志即可。

百度在线网络技术（北京）有限公司第 6 页共 10 页

文档名称：手机网站开发技术

如果wap产品和pc产品使用同一webserver，可以通过修改webserver的配置将二者的日志路径独立，分别统计，避免彼此干扰。

8 手机类型与测试手机类型与测试问题汇总测试问题汇总

由于手机终端的型号多样，由不同的厂家生产，使用不同的操作系统和浏览器，支持的默认字符编码也不统一，故无线产品的测试工作非常复杂，很难覆盖到所有终端。

百度文库在测试过程中及上线后，各种手机终端的问题反馈汇总如下：

机型

nokia 3110c 键盘

操作系统

SYBIAN

浏览器

任何浏览器

UC WEB

测试问题

get请求头不规范，引起了以下错误

(548): (error) GET/HEAD

with content-length: 400

同上

输入框会被强制拉成整行显示

doc/pdf/exl等图标无法正常显示

备注

更新lighttpd版本后，

问题已解决

同上，已解决

待解决

由于IE浏览器的链接

折行之后，高度和宽度

发生改变，而且会成为

sumsung s5630 触屏

sumsung J708 键盘

OPPO T5 键盘

索爱 W595 滑盖键盘

Sharp SH9110C 翻盖

所有机型

htc MINI

htc S1 ANDROID IE

布局错乱、字符超出屏幕范围，图片错误等情况

块状元素，导致背景图

片的位置错位。在手机

上难以修改，考虑改变

策略，如将图片修改为

文字显示。

E71

NOKIA E63/E66

IPOD TOUCH

moto milestone

SUMSUNG5630C

NOKIA E63/E66

索爱W595

I617

6120C

HTC HD2

振华OBBE A16

HTC DIMAND2

SUMSUNG F258

SYBIAN

IPOD

ANDROID

三星自有系统

SYBIAN

WM6.1

S60 V3

WM6.5

山寨机

SYBIAN自带

UC WEB

SAFARI

opera

三星自带

SYBIAN自带

doc/pdf/exl等图标只能显示75%

下载文档后，标题显示为乱码,但正文可看

下载文档显示为乱码

下载文档后，不可本地存储，只能在新页面全部打开

下载文档的标题显示为乱码，正文可看

下载后为乱码

标题乱码

分块超过限制，无法下载

同上

字符编码问题

手机功能限制

字符编码问题

手机功能限制

百度在线网络技术（北京）有限公司第 7 页共 10 页

文档名称：手机网站开发技术

HTC TOUCH HD

DOPOD 900

N5310

乐PHONE

NOKIA 5230

NOKIA 5610

SUMSUNG I8000

DOPOD 699

LG KP500

NOKIA 5610

dopod C858

NOKIA 6610

moto mileston

NOKIA N85

NOKIA 3110

NOKIA E398

中兴U210

LG棒棒糖

联想P82

WM6

ANDROID

WM6.5

标题乱码

下载后为乱码

下载为小说地址，无内容

下载为乱码

无法用UC下载

下载乱码

下载后为乱码

下载乱码

下载时无乱码，下载后查看为乱码

下载后为乱码

直接显示全文

点击下载后，打开一个乱码网页

下载后为乱码

字符编码问题

手机功能限制

字符编码问题

手机功能限制

字符编码问题

手机功能限制

字符编码问题

Symbian

S60

Symbian

S40

9 其他参考数据

9.1 移动用户群

按年龄划分：

百度在线网络技术（北京）有限公司第 8 页共 10 页

文档名称：手机网站开发技术

3G上网用户50岁以上40-49岁30-39岁3.6%0.2%8.7%4.0%23.0%17.1%2.5G上网用户20-29岁10-19岁0%14.4%23.0%20%40%50.2%55.6%60%Data Source: 2009年8月CNNIC和CR-Nielsen联合调查[Base =324]

按职业划分：按职业划分：

以上班族、学生、自由职业者、民工、军人为主

3G手机用户2.5G手机用户其他农林牧渔劳动者农村外出务工人员无业/下岗/失业产业/服务业工人党政机关事业单位工作者专业技术人员自由职业者企业/公司管理者个体户/私企老板企业/公司一般职员学生1.5%0.7%3.7%0.7%3.8%2.6%6.7%3.7%4.3%4.2%5.9%6.7%7.8%7.6%8.9%8.7%6.6%10.8%12.4%13.3%22.3%19.8%16.1%21.0%10%20%30%0%Data Source: 2009年8月CNNIC和CR-Nielsen联合调查[Base =324]

百度在线网络技术（北京）有限公司第 9 页共 10 页

文档名称：手机网站开发技术

9.2 参考资料

更多wise开发相关资料请参考wise地盘wiki：

/twiki/bin/view/Ns/Wise%E5%9C%B0%E7%9B%98

《无线产品设计规范.docx》

《无线产品UI规范(2010-4-9).pdf》

《百度手机版用户反馈QA_》

百度在线网络技术（北京）有限公司

页

第 10 页共 10