最近整理的移动端web页面的一些开发指导
微信web页面开发指导规范
一、目前移动端布局方法
两个基本规则：移动优先，设计初期就要考虑设计的页面如何多终端显示。渐进增强，充分发挥硬件设备的最大功能。
三个常用方法：
1）css3-media Query（最简单，最基本）
优点：解决了跨设备问题
缺点：兼容性代码多工作量大，加载速度慢
2）借助原生的js
优点：通过js控制页面的样式加载，通过js检测设备的属性， 很好的解决了兼容性问题。
缺点：书写原生的js，成本比较高，不推荐使用。
3）第三方开源框架
能够很好的兼容浏览器，提供各种插件和解决方案，方便敏捷开发。目前最好用的移动端html5框架，jquery mobile基于jquery框架；bootstrap属于css框架，有很好的布局系统和丰富的插件；sencha touch是一个比较重的移动开发框架，不适合便捷开发。
二、技术选型
Bootstrap如今是Github上最火的开源项目之一，这是一个用于前端开发的工具包，由Twitter前设计师Mark Otto和Jacob Thornton合作开发。
12列栅格化布局系统，丰富的组件，是目前移动web开发比较火的框架之一。
三、设计规范
1. 简化内容
一般的手机、平板电脑等移动装置，不易容纳下适合于个人电脑的庞大网页资讯，因此手机移动网页的首要重点，就是减少内容，不论是图片、文字或是影音。
请记住一个重点：只要将最重要的资讯放入移动版网页，就是最主要的准则，重要性较低的、读取需要时间的内容，则可以透过超链接，连回到正常的官方网站。
移动网站必须十分的重视内容简化这一点，一个塞满内容的移动网站无法获得网路客户的青睐。
2. 一栏滑动的最佳策略
大部分的移动装置，画面都不如桌上电脑那么大，尤其是阅读文字时更需要加以放大。即使智能手机都具有网页放大缩小功能，但是观看起来较为麻烦。
因此设计移动网页时，建议是能够以滑动屏幕方式阅读网站，因为滑动网页比起放大网页观看来得简单多了。
3. 导览功能大不同
手机网页与跟一般的网页不同的，在於当阅读文章到最后时，要回到最前头是麻烦的，因此设计网页的企业，除了减少卷动画面的机会外，也会加强导览的功能，让网页变得更容易于移动装置上阅读。导览设计的重点有：
1）只在首页的部份加入搜寻的功能 2）建立导览功能键，其中以「回到首页」、「回到上一页」这两个最为重要 3）最后，「回到上一页」的按键除了首页以外，其余的页面都需要放置
4. 减少文字输入部分
目前手机大多没有实体的键盘，因此输入文字上会比起使用键盘麻烦得多。因此，减少使用者输入文字的机会，例如：个人的帐号、密码、搜寻内文、使用编辑器...等，都是移动网页要尽力避免的。设计的重点如下：
1）允许移动上网使用者储存输入的帐号密码资讯 2）输入的区块尽量加以放大 3）允许移动上网使用者，输入简易的密码，例如PIN数字密码
- 多种分辨率的手机网页版本
上图是天猫移动端测试的分辨率分级：
A级代表必须兼容
B级次之
C级可以不兼容
6. 触控屏幕与非触控屏幕设计
虽然今日触碰型的智能手机当道，但是仍有为数不少的传统手机，没有触碰的界面，使用的是传统的控制方向键做为导览的工具。例如：减少画面中超连结的数量，可以让选择连结的时候减少一些按钮的动作，或是加大文字以减少误击的问题。
此外更重要的是鼠标的原理跟触摸屏的原理有很大的差异，因此移动版的网页应该避免只有电脑鼠标才能做到的功能，举例来说：「下拉选单」的这一项功能，因为移动装置没有「鼠标座标」的设计，所以无法触发鼠标移动过去才会显示出来的选单。
7.性能要求 WAP业务的技术性能指标如下：
- 1）页面平均响应时间：在网络正常传输情况下小于 3秒。
- 2）忙时连接成功率应不小于 98%。
- 3）网络时延（指从 WAP GW PING服务器的环回时延）应不大于 100毫秒。
- 4）响应时延（指从 WAP GW发出业务请求到WAP GW接收业务响应的时延 应不大于500毫秒。
- 5）页面平均故障间隔时间（MTBF）：大于 10000小时。
- 6）页面平均故障恢复时间：小于 5分钟。
- 7）每秒处理的 WAP页面请求数：大于 200次。
- 8）平台应用服务器响应时间：在 2000 并发用户（假设每个用户每 10秒钟发送一个请求）的前提下响应时间为 1s。
- 9）数据库服务器响应时间：在所建库的 100万条记录中查询某条记录的搜索平均时长小于0.5s。
四、兼容性规范
- 手机浏览器兼容性测试结果概要
1.1 XHTML部分
大多数手机不支持的：
* 表单元素的“disable”属性部分手机不支持的：
* “button”标签
* “input[type=file]“标签
* “iframe”标签。
虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。
少数手机不支持的：
* “select”标签：该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，比如”vertical-align:middle”。
1.2 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完全不支持；
1.3 JAVASCRIPT部分
这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的dom操作、事件等支持度都还不错。但没有测试过很复杂的脚本。
在我们测试过的手机当中，支持（包括不完全支持）JavaScript的手机比例大约在一半左右，当然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级（jquery可以更好的解决这一点）。
1.4 其他
部分手机不支持png8和png24（如：htc，一般是系统未集成该功能，因为png图片较大），所以尽量使用jpg和gif的图片（目前很少有手机不支持png）。
另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的bar设计。
部分手机对于超大图片，既不进行缩放，也不显示横下滚动条。
少数手机在打开超过20k的测试页面时，会显示内存不足。
五、总结说明
1.技术选型：bootstrap
2.设计规范：水平垂直布局，尽量减少图片的使用，涉及到输入的地，局域尽量要大。注意各区域边距的统一，字体大小，颜色的统一。
3.兼容性测试：响应式布局与响应式字体
4.性能优化：图片sprite的使用，css，js文件的压缩，优化加载速度。
