手机网站开发基础知识.doc
8页
本文由 w22ee 贡献pdf 文档可能在 WAP 端浏览体验不佳建议您优先选择 TXT，或下载源文件到本机查看网站开发必修课[1]：浏览器fool2 fish 发表于 2009.05.18前言： 有哪些浏览器？这些浏览器对 xhtml、css 和 js 的支持度怎么样？目标 用户的使用 情况？条件限制下的界面设计要如何进行？如何快速搭建一个网 页？如何做好网 站的兼容性工作？想必这些问题每个参与过网页开发的人都遇到过 头大的是， 除了自己公司已有的一些经验， 网上恐怕没有过多的(公开的)文档可以参考 09 年上半年的工作重心全在网页开发上面， 这使得自己某种程度上也成了拓荒者 现将这 段时间的开发心得同大家分享以下，欢迎大家跟我交换自己的想法 网站开发 必修课系列文章计划： 1. 浏览器 1. 2. 2. 1. 2. 3. 3. 1. 2. 3. 4. 来自 wiki 的 解释 对 wiki 的总结 为什么要有兼容性测试：比 web 浏览器还恐怖的浏览器 目标用 户数据挖掘 安排测试，整理测试结果 对设计的指引作用 确保裸 html 代码具有较高可用 性，谨慎使用 html 标签 css 使用注意事项 非常重要：代码的优雅降级浏览器兼容性测试测试结果对网站开发的指导意义注：由于有些数据牵涉到公司的商业机密，所以在这个系列的文章当中，有些可能不会 公布 出详细的数据，但会给出方向性的结论或者意见，请大家见谅。
要了解网站开发 的诀窍，我们必须先了解浏览器虽然百度―浏览器‖没啥有价 值的文章，所幸 google―mobile broswer‖出来了比较多有价值的文章那么，站在前人的肩 膀上，我们 可以看的更远 以下文字翻译自维基百科》浏览器: http://en.wikipedia.org/wiki/Mobile_browser 浏览器，又称微浏览器、迷你浏览器 或者无线因特网浏览器，是被设计用于像或 者 PDA 之类的无线设施的网页浏览器手 机浏览器针对在便携设备上的小屏幕网页显示进 行了专门的优化， 以使网页内容显示最高 效 浏览器的软件必须小巧并且能适应无线掌 上设备的低存储量和低带宽它们一度 是最简朴的网页浏览器，但是 2006 年以后有些 浏览器能够支持像 css2.1、JavaScript 和 Ajax 这样的最新技术那些被设计从浏览器 访问的网站叫无 线门户内容概览 1. 2. 3. 相关的技术 先驱们 流行的移动浏览器 1. 2. 3. 4. 5. 6. 更多 参考 更多外部链接 被主流和 PDA 厂商使用的默认浏览器 用户可安装的浏览器 HTML 代码转换机1 相关的技术浏览器通常通过蜂巢网络连接， 通过无线局域网连接的浏览器数量也日渐增 多， 后 者使用基于 TCP/IP 的 HTTP 并能显示那些使用 HTML, XHTML Mobile Profile (WAP 2.0), 或者 WML (从 HDML 发展而来)编写的网页。
WML 和 HDML 是适于通过低带宽 传送数据 的最简朴的形式，而无线数据的连接被称为 WAP 在日本，DoCoMo 定义了基于 i-mode HTML 的 i-mode 服务，是压缩 HTML(C-HTML) 的一种扩展，HTML 的一个子集 WAP 2.0 指定了 XHTML 协议和 WAP CSS，WAP CSS 是是 W3C 标准的 XHTML 和 CSS 在 移动设备上扩展的一个子集2 先驱们那些被称为微浏览器的技术，诸如 WAP， NTTDocomo 的 i-mode 平台和 Openwave 的 HDML 平台点燃了人们对无线数据服务的第一次热情 第一个微型浏览器的诞生大约是在 1997 年， 当 Unwired Planet 公司(后来发展为 Openwave)将他们的‖UP.Browser‖放在 AT‖：对中文字符无效，但一般对英文字符是有效的；o o―font-style: italic;‖：同上； ―font-size‖属性： 比如 12px 的中文和 14px 的中文看起来一样大， 当字符大小为 18px 的时候你也许能看出来一些区别； ―white- space/word-wrap‖属性：无法设置强制换行，所以当你网页有很多中文的时 候，需要特别 关注不要让过多连写的英文字符撑开页面； ―background-position‖属性：但背景图片的 其他属性设定是支持的； ―position‖属性； ―overflow‖属性； ―display‖属性； ―min-height‖和‖min-weidth‖属性； ―height‖属性：对‖height‖的支持不太好， 奇怪的是在我们的测试当中，仅仅只有很 少部分不支持‖width‖属性； ―pading‖ 属性 ―margin‖属性：更高比例的不支持‖margin‖的负值。
少数对 CSS 完全 不支持；oo o o o o部分不支持的：oo o少数不支持的：oJavaScript 部分这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的 dom 操 作、 事件等支持度都还不错但我们没有测试过很复杂的脚本 在我们测试过的当中，（包括不完全支持） 支持 JavaScript 的比例大约在一半左右， 当然，对于我们来 说，最重要的不是这个比例，而是要如何做好 JavaScript 的优雅降级其他o o部分不支持 png8 和 png24，所以尽量使用 jpg 和 gif 的图片 另外对于平滑的 渐变等精细的图片细节，部分的色彩支持度并不能达到要求， 所以慎用有平滑渐变的 bar 设计 部分对于超大图片，既不进行缩放，也不显示横下滚动条 少数在打开超 过 20k 的测试页面时，会显示内存不足o o开发中你需要注意的问题1. 网页编码需要遵循什么规范？ 遵循 XHTML Mobile Profile 规范（WAP-277- XHTMLMP-20011029-a.pdf） ，简称为 XHTML MP，也就是通常说的 WAP2.0 规范 XHTMLMP 是为不支持 XHTML 的全部特性且资源有限的客户端所设计的。
它以 XHTML Basic 为基础，加入了一些来自 XHTML 1.0 的元素和属性这些内容包括一些其他元素和对内部样式表的支持和 XHTML Basic 相同，XHTML MP 是严格的 XHTML 1.0 子集 2. 网页文档推荐使用扩展名？ 推荐 命名为 xhtml，按 WAP2.0 的规范标准写成 html/htm 等也是可以的但少数手 机对 html 支持的不好 3. 为什么现今大多数的网站一行字数上限为 14 个中文字符？ 由于手持设 备的特殊性， 其页面中实际文字大小未必是我们在 CSS 中设定的文字大小， 尤其是在第 三方浏览器中例如 Nokia5310，其内置浏览器 页面内文字大小与 CSS 设定相符， 但是 第三方浏览器 OperaMini 与 UCWEB 页面内文字大小却大于 CSS 设定 经测试，其文本大 概在 16px 左右 假如屏幕分辨率宽度为 240px，去除外边距，那 么其一行显示 14 个字以内，是比较保险（避免文本换行）的做法 4. 使用 WCSS 还是 CSS？ WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的 CSS 样式表。
它是 CSS2 的一个子集， 去掉了一些不适于移动互联网特性的属性，并加入一些具有 WAP 特性的扩展 （如-wap- input-format/-wap-input-required/display:-wap-marquee 等） 需要留意的是，这些 特殊的属性扩展并不是很实用，所以在实际的项目开发当中，不 推荐使用 WCSS 特有的属 性 5. 6. 7. 避免空值属性 如果属性值为空， web 页面中是完全没有问题的， 在 但是 在大部分网页上会报错 网页大小限制 建议低版本页面不超过 15k，高版本页面不超 过 60k 用模拟器和第三方浏览器的模拟器来测试页面是不是靠谱？ 有条件 的话，我们当然建议在实体上进行测试，因为目标客户群的设备总是 在不断变化 的，这些模拟器通常不能完全正确的模拟页面在上的显示情况， 比如图片色彩， 页面大小限制等就很难再模拟器上测试出来当然，一些第三方 浏览器的模拟器 还是可以进行测试的，第三方浏览器相对来说受设备的影响 较小推荐参考资料开发权威网站o o o o oWAPForum：XHTML Mobile Profile 规范.pdf WAPForum：WCSS 规范.pdf W3C：XHTML Basic 1.1 规范.html W3C：Mobile Web Test Suites Working Group.html PPK：关于 浏览器兼容性的测试和研究.htmloDevelopershome：XHTML MP 教程.html （汉化版）经典开发文章o o o o oUnknown：移动 WAP 相关标记语言的演进.jpg Flora Graham：Alternative mobile browsers tested.html Lucas Pettinati(Yahoo)：Challenges of Interface Design for Mobile Devices.html Holly Kolman：How to Make a Click to Call Link.html Brian Suda：Introduction to the Mobile Web.html型号查询o o ohandsetdetection：查询.html 机型很全，偏国外机型，参数较多 mobile9： 查询.html 机型较全，偏门机型可能无内容 试网：查询+模拟.html 机型稍少，可 以模拟操作总结目前来说，网站开发是个典型的设备驱动开发的过程，页面被设计成什么样，能做 到怎 么样，几乎全取决于目标客户的设备情况。
所以，对设备的了解，对于设计 开发过程有着直观重要的作用，对于前端来说，就需要 有计划的进行长期的浏览器兼 容性测试， 什么样的设计能被实现， 什么样的标签可以使 用，这些都需要有数据的支持我们必须有这样的认知， 开发的网页总是会在或多或少的设备上出现问题， 因 为我 们永远无法知道所有用户的设备情况， 所以我们更要尽量的遵循标准进行开发， 这样才 能将满足用户的比例做到最好 任何一个领域都有值得你进行深入了解的地方， 即使现在看起来， 网站的开发还有点不 入主流，但我相信，随着设备的更新换代， 总有一天它也会成为我们占领客户的一个重 要战场，iphone 这类有符合 web 标准的浏览 器的发布，也给了我们更多的信心 总之，革命尚未成功，同志仍需努力顺祝大家 新年快乐！Trackback: 。
