| 网站建设教程，手机网站开发教程，怎么开发建设网站 发布时间：2015-10-12 01:03:09 |
手机网站建设是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。
从09年初接手淘宝手机网站前端开发的工作至今，转眼已是一年。一步步看着手机淘宝从最初的beta版本到今天的样子，感慨良多。手机网站开发，有着许多不为人知的困难：一是可参考的资料太少，大部分手机网站都处于起步阶段，很多的时候都是摸着石头过河，而鉴于淘宝自身的特殊性，也使得我们在参考成功案例之余，要做更多的思考；二是兼容性工作异常艰辛，难度一点也不比web网站的兼容性工作来的低（关于这点，请参见我之前的文章）；再者作为一个手机网站的前端开发，也往往容易被人忽视（包括我们自己），大家也许会觉得做好一个手机网站能有多难，了解一点XHTML、一点CSS，甚至不需要对JavaScript有什么研究，事实却不是如此，正因为手机网站的开发受到设备的太多限制，前端们常常为了节约几个字节而纠结万分，写出语义化良好的代码也显得更加重要，而多版本的开发需求也对于JavaScript的优雅降级要求甚高，这样才能使得网站有分版本需求的时候可以公用同一套XHTML代码，最大程度的降低开发成本。对于手机网站来说，相信现在仅仅只是个开始，随着各种新机型的相继面世，这块领域必将成为兵家必争的新高地。注意：由于手机网站发展迅速，请参阅者注意本篇文章的发布时间。目录
手机用户设备统计分析 手机浏览器兼容性测试结果概要 手机网站开发中你需要注意的问题 推荐参考资料 总结  手机用户设备统计分析拥有全面的用户数据，无疑能帮助我们做出更符合用户需求的产品。内部数据能帮我们精确了解我们的目标用户群的特征；而外部数据能告诉我们大环境下的手机用户状况，并且能在内部数据不够充分的时候给予我们一些非常有用的信息。从外部数据来看，09年10月到11月期间国内浏览器品牌市场占有率前三甲为：Nokia(78%) Opera(OEM) (10%) iPhone(Safari) (3%) 国内的手机操作系统前三甲为： Nokia SymbianOS(80%) iPhoneOS(6%) SonyEricsson(5%) 当然，作为中国的手机网站开发者，不能忽视强大的山寨机市场（或者应该叫作做国货精品手机市场？）。顺便提一下，这类手机通常使用的是MTK操作系统。（以上数据均来自statcounter.com）手机浏览器兼容性测试结果概要注意：以下所说的“大多数”是指在我们测试过的机型中，发生此类状况的手机占比达50%及以上，“部分”为20%到50%；“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型，虽然我们采集的样本尽量覆盖各种特征的手机，但并不代表所有手机的情况。XHTML部分大多数手机不支持的： 表单元素的“disable”属性 部分手机不支持的： “button”标签 “input[type=file]“标签 “iframe”标签。 虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。少数手机不支持的： “select”标签：该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，比如”vertical-align:middle”。 CSS部分大部分手机不支持的： “font-family”属性：因为手机基本上只安装了宋体这一种中文字体； “font-family:bold;”：对中文字符无效，但一般对英文字符是有效的； “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完全不支持； JavaScript部分这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。在我们测试过的手机当中，支持（包括不完全支持）JavaScript的手机比例大约在一半左右，当然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级。其他 部分手机不支持png8和png24，所以尽量使用jpg和gif的图片 另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的bar设计 部分手机对于超大图片，既不进行缩放，也不显示横下滚动条 少数手机在打开超过20k的测试页面时，会显示内存不足 开发中你需要注意的问题 手机网页编码需要遵循什么规范？ 遵循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子集。 网页文档推荐使用扩展名？ 推荐命名为xhtml，按WAP2.0的规范标准写成html  m等也是可以的。但少数手机对html支持的不好。为什么现今大多数的网站一行字数上限为14个中文字符？ 由于手持设备的特殊性，其页面中实际文字大小未必是我们在CSS中设定的文字大小，尤其是在第三方浏览器中。例如Nokia5310，其内置浏览器 页面内文字大小与CSS设定相符，但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试，其文本大概在16px左右。 假如屏幕分辨率宽度为240px，去除外边距，那么其一行显示14个字以内，是比较保险（避免文本换行）的做法。 使用WCSS还是CSS？ WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集，去掉了一些不适于移动互联网特性的属性，并加入一些具有WAP特性的扩展（如-wap-input-format/-wap-input-required/display:-wap-marquee等）。 需要留意的是，这些特殊的属性扩展并不是很实用，所以在实际的项目开发当中，不推荐使用WCSS特有的属性。 避免空值属性 如果属性值为空，在web页面中是完全没有问题的，但是在大部分手机网页上会报错。 网页大小限制 建议低版本页面不超过15k，高版本页面不超过60k。 用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱？ 有条件的话，我们当然建议在手机实体上进行测试，因为目标客户群的手机设备总是在不断变化的，这些手机模拟器通常不能完全正确的模拟页面在手机上的显示情况，比如图片色彩，页面大小限制等就很难再模拟器上测试出来。当然，一些第三方手机浏览器的在线模拟器还是可以进行测试的，第三方浏览器相对来说受手机设备的影响较小。 推荐参考资料开发权威网站 WAPForum：XHTML Mobile Profile规范.pdf WAPForum：WCSS规范.pdf W3C：XHTML Basic 1.1规范.html W3C：Mobile Web Test Suites Working Group.html PPK：关于手机浏览器兼容性的测试和研究.html Developershome：XHTML MP 教程.html （汉化版） 经典开发文章 Unknown：移动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 手机型号查询 handsetdetection：手机查询.html 机型很全，偏国外机型，参数较多 mobile9：手机查询.html 机型较全，偏门机型可能无内容 试手机网：手机查询+模拟.html 机型稍少，可以模拟手机操作 总结目前来说，手机网站开发是个典型的设备驱动开发的过程，页面被设计成什么样，能做到怎么样，几乎全取决于目标客户的手机设备情况。所以，对手机设备的了解，对于设计开发过程有着直观重要的作用，对于前端来说，就需要有计划的进行长期的手机浏览器兼容性测试，什么样的设计能被实现，什么样的标签可以使用，这些都需要有数据的支持。我们必须有这样的认知，开发的手机网页总是会在或多或少的手机设备上出现问题，因为我们永远无法知道所有用户的手机设备情况，所以我们更要尽量的遵循标准进行开发，这样才能将满足用户的比例做到最好。任何一个领域都有值得你进行深入了解的地方，即使现在看起来，手机网站的开发还有点不入主流，但我相信，随着手机设备的更新换代，总有一天它也会成为我们占领客户的一个重要战场，iphone这类有符合web标准的浏览器的手机发布，也给了我们更多的信心。 
随着智能手机和智能设备的普及，从而影响了我们日常的办公和生活设备，而不是单纯的是pc端。智能手机和其他智能产品也成为了我们的移动终端。过去，我们让网站适应各种分辨率的唯一方法就是使用fluid page design（流体网页设计），但是CSS媒体查询具有更多的功能。通过使用CSS媒体查询 你可以在小屏幕上隐藏侧边栏以展示更多的内容，也可以在大屏幕上增大字体，这些都无法用fluid page design来实现。 |
 |
- 浏览所有行业
- 标准网站模板
- IT科技、软件、通讯模板
- 办公、文教、乐器模板
- 餐饮、旅游模板
- 宠物模板
- 电子、电工、电器模板
- 房地产、房屋租赁模板
- 服装、鞋帽、皮具模板
- 化工、化学、涂料模板
- 环保、生态模板
- 婚庆、广告、服务模板
- 机械、工业制品模板
- 家电、音响模板
- 家居、日用、家具模板
- 建筑、建材、装饰模板
- 金融、证券模板
- 贸易、物流、出口模板
- 美容、美发、护肤模板
- 名家个人网站模板
- 拍卖、投资、典当模板
- 汽车、运输、汽配模板
- 摄影、冲印、玩具模板
- 食品、饮料加工模板
- 文化、娱乐休闲模板
- 五金、仪器、仪表模板
- 物业、票务模板
- 鲜花、礼品、工艺品模板
- 学校、教育培训模板
- 医疗、药品、保健模板
- 照明、水电、能源模板
- 政府、综合性门户模板
- 钟表、眼镜模板
- 珠宝、首饰、饰品模板
- 咨询、顾问、翻译模板
- 律师模板
- 双语言模板
- 纯英文模板
我们的模板都是通用的，您可以用任何一个模板做任何类型的网站，仅需要修改大图即可
