移动端web开发框架

Posted 2020-08-10 前前-李

一、目前移动端布局方法

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

三个常用方法：

   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数字密码

 

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。

四、兼容性规范

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

五、总结说明

1.技术选型：bootstrap

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

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

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