移动端web开发框架

1、目前移动端布局方法

两个基本规则：移动优先，设计初期就要考虑设计的页面如何多终端显示。渐进加强，充分发挥硬件设备的最大功能。

三个经常使用方法：

   1）css3-media Query（最简单，最基本）

     优势：解决了跨设备问题

     缺点：兼容性代码多工做量大，加载速度慢

   2）借助原生的js

     优势：经过js控制页面的样式加载，经过js检测设备的属性，  很好的解决了兼容性问题。

     缺点：书写原生的js，成本比较高，不推荐使用。

   3）第三方开源框架

     可以很好的兼容浏览器，提供各类插件和解决方案，方便敏捷开发。目前最好用的移动端html5框架，jquery mobile基于jquery框架；bootstrap属于css框架，有很好的布局系统和丰富的插件；sencha touch是一个比较重的移动开发框架，不适合便捷开发。

 

2、技术选型

   Bootstrap现在是Github上最火的开源项目之一，这是一个用于前端开发的工具包，由Twitter前设计师Mark Otto和Jacob Thornton合做开发。

   12列栅格化布局系统，丰富的组件，是目前移动web开发比较火的框架之一。

3、设计规范

1. 简化内容

通常的手机、平板电脑等移动装置，不易容纳下适合于我的电脑的庞大网页资讯，所以手机移动网页的首要重点，就是减小内容，不管是图片、文字或是影音。

请记住一个重点：只要将最重要的资讯放入移动版网页，就是最主要的准则，重要性较低的、读取须要时间的内容，则能够透过超连接，连回到正常的官方网站。

移动网站必须十分的重视内容简化这一点，一个塞满内容的移动网站没法得到网路客户的青睐。

2. 一栏滑动的最佳策略

大部分的移动装置，画面都不如桌上电脑那么大，尤为是阅读文字时更须要加以放大。即便智能手机都具备网页放大缩小功能，可是观看起来较为麻烦。

所以设计移动网页时，建议是可以以滑动屏幕方式阅读网站，由于滑动网页比起放大网页观看来得简单多了。

3. 导览功能大不一样

手机网页与跟通常的网页不一样的，在於当阅读文章到最后时，要回到最前头是麻烦的，所以设计网页的企业，除了减小卷动画面的机会外，也会增强导览的功能，让网页变得更容易于移动装置上阅读。导览设计的重点有：

1）只在首页的部份加入搜寻的功能 2）创建导览功能键，其中以「回到首页」、「回到上一页」这两个最为重要 3）最后，「回到上一页」的按键除了首页之外，其他的页面都须要放置

4. 减小文字输入部分

目前手机大多没有实体的键盘，所以输入文字上会比起使用键盘麻烦得多。所以，减小使用者输入文字的机会，例如：我的的账号、密码、搜寻内文、使用编辑器...等，都是移动网页要尽力避免的。设计的重点以下：

1）容许移动上网使用者储存输入的账号密码资讯 2）输入的区块尽可能加以放大 3）容许移动上网使用者，输入简易的密码，例如PIN数字密码

 

1. 多种分辨率的手机网页版本

 

上图是天猫移动端测试的分辨率分级：

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。

4、兼容性规范

1. 手机浏览器兼容性测试结果概要

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的测试页面时，会显示内存不足。

5、总结说明

1.技术选型：bootstrap

2.设计规范：水平垂直布局，尽可能减小图片的使用，涉及到输入的地，局域尽可能要大。注意各区域边距的统一，字体大小，颜色的统一。

3.兼容性测试：响应式布局与响应式字体

4.性能优化：图片sprite的使用，css，js文件的压缩，优化加载速度。