基于HTML5 的响应式Web 页面重组适配技术研究

蒋凌燕，查英华

(南京工业职业技术学院计算机与软件学院，江苏 南京 210046)

0 引言

目前，移动互联网已经成为最大的信息消费市场、最活跃的创新领域、最强的ICT 产业驱动力量——2013 年全球移动业务收入达到1.6 万亿美元，相当于全球GDP 的2.28%，全球智能手机出货量近10 亿部，达到PC 的3 倍;移动互联网重构了互联网服务的模式与生态，全球应用程序下载次数累计超过5000 亿［1］。

移动终端与个人电脑终端相比，可视界面偏小，通常为几分之一，互联网上海量为个人电脑终端所设计的各种Web 系统在移动终端上显示时内容过多，网页布局和用户对网站功能的使用方面的设计也是针对大屏幕的，从适合个人电脑终端的Web 系统向适合移动终端的系统上迁移时需要进行页面提取和重组。

1 页面重组技术

1.1 现状

Web 页面重组技术通过对现有网页信息的提取、分离、转换、组合，能够提高网页网站的适应性，在多终端访问的环境下给用户以更好的体验，满足用户信息交流，更好体现网络服务的便捷性。

页面重组技术将原始页面经过重组处理，生成适合在移动终端显示的新页面。根据页面重组处理流程，页面重组技术主要包括页面信息提取技术和页面信息组合技术。页面信息提取技术主要通过对原始页面结构和内容2 个方面进行提取。页面信息组合技术将传递来的内容块按照一定的规则进行组织显示。内容结构组合的技术主要有树匹配映射技术和自动分配内容块重要度等技术。页面布局不合理、屏幕适应能力差等问题由页面信息组合技术来解决［2］。

1.2 HTML5 新特性

随着HTML5 技术的提出，对于网站网页也会有较大的改变，HTML5 的新特性主要有:

1)更多的描述性标签，通过头部(header)、尾部(footer)、导航区域(nav)、侧边栏(aside)等标签，对页面进行结构化描述。

2)良好的多媒体支持。

3)Web 应用方面提供了新功能，替代第三方技术。

4)跨文档消息通信。

5)Web Sockets 支持。

6)客户端存储。

随着HTML5 的发布，Web 的前台框架也有了新的发展。如JQuery Mobile 提供了一个跨浏览器的jQuery-Mobile 移动终端前台框架，支持主流的移动平台。

1.3 页面重组技术比较

对于页面重组技术，从承担转换任务的服务器位置分为外部服务器转换和自服务器转换，如部分IT厂商提供的将网站批量转换的转码技术属于外部服务器转换，WAP 网关服务也属此类。一些批量建站技术提供架包将已建好网站系统整体转换为WAP 网站，在服务器上同时提供Web 和WAP 访问的服务，这种属于自服务器转换。

外部服务器转换的方式是一种通用方式，理论上全部网站都可以用它转换，实际使用时网页基本功能都可以使用，页面信息浏览支持较好，但对于部分交互功能和特殊效果以及图片的转换支持方面有问题。自服务器转换专门针对采用某一种建站技术建设的网站可以完全的从Web 到WAP 转换，对于其他的网站不能转换，就普遍适应性来说远远不如外部服务器转换的方式。

从因特网环境中的服务器负荷和网络负载来讲，这2 种方式都会显著增加总体服务器负载和网络负载，从能耗的角度考虑外部服务器转换的方式增加了外部服务器处理转换页面过程，同时也会降低响应速度。自服务转换不论用户是否访问，服务器都需要支持一个和原站类似的WAP 网站，服务器负载和能耗显著增加，用户响应速度受影响较小。从能耗和负载角度讲，如果用户访问量较大自服务器转换占优，如果用户访问量较小外部转换方式占优。从用户响应速度角度考虑自服务器转换占优势。

2 响应式页面设计

在重组生成新页面时，按照响应式网页设计要求，网页对于不同大小的终端和浏览器自适应，可以提供更好的用户服务，自适应在网页大小的调整方面可以采用HTML 标记中的meta 属性配合CSS.0 媒体查询功能来进行网页布局方面的适应性调整。也可以采用前台脚本及其框架技术进行自适应调整。在Web 网页的页面重组方面如果采用响应式网页设计，无疑可以带给用户在多终端上更好的使用体验。

响应式网页最初是由Ethan Marcotte 提出的一个概念:Web 页面的设计根据不同设备环境自动响应及调整。响应式Web 设计除了关于屏幕适应以及图片缩放以外，强调兼容和移动终端体验的改善。响应式的布局提供兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，采用弹性栅格布局方式，页面在不同的分辨率环境下呈现不同的适应时布局。通过设备特性和设备类型结合CSS和HTML5 新特性来实现响应式网页设计。

进行响应式网页设计时，将网页内容和划分为几个单元。一个单元中的内容是连续并相关的，由文字内容、图片、表单及其他内容组成，在设计页面框架结构时考虑不同的屏幕尺寸，将网页单元的大小和排列进行重组，一个响应式网页可以包含几种布局，在大小不同的终端上都可以很好地显示，这是响应式页面的静态响应。

同时，不同大小的终端需要提供的用户体验也不同:PC 机上大多通过键盘和鼠标，平板和手机采用触摸屏需要用手指控制。响应式页面除了页面适应以外还需根据用户的输入方式提供多种操控方式和页面响应，需要对触摸屏的事件进行绑定和响应，这是响应式页面的动态响应。

3 响应式页面重组技术设计与实现

3.1 功能设计

笔者使用JQuery 和JQuery Mobile 框架，将已有网站Web 页面进行重组和转换，使用较少的服务器资源和能耗，不添加新的页面，增加较少服务器负荷，不降低服务器响应速度，对Web 页面进行从标签到页面组织结构的转换，使其适应多终端环境下的各种浏览器。这种页面重组适配技术可以用较少的负荷和能耗，在客户端浏览器或者服务器中进行简便快捷的页面重组转换。

在进行页面重组的过程中，首先提取网页内容，使页面标记转换成为HTML5 标签，然后使用脚本语句配合前台框架技术将新的页面标记进行重组，在不同的终端浏览器环境中适应性显示，最后添加移动终端下新的事件绑定和响应处理。

按功能分成浏览型和表单输入型，针对不同类型的网页，处理重组的过程也有不同:信息浏览型的网页，将内容进行分割，提取其核心内容生成符合HTML5 规范的标签后填充到页面中新添加的section中，对导航类网页的内容提取后按用户操作习惯绑定事件后填充到次级页面进行展示。对于需要用户填写表单和使用控件功能的页面，提取出核心表单和控件后生成对应的HTML5 标签并重组页面。

3.2 页面重组过程设计

基本处理过程如下:

1)获取终端和浏览器大小类型信息;

2)分析页面内容并过滤;

3)生成新HTML5 标记对象;

4)页面结构重组和内容填充;

5)主次页面进行分割并分别绑定响应时间。

3.3 技术实现

图1 原始网页

图2 原始页面结构分析

图3 重组适配后的页面结构

采用前台脚本技术，按响应式网页设计的的原则来实现对Web 网页进行页面重组，具体案例实现如下:如图1 所示，对一个Web 网页进行页面组成分析，对图1 原始页面分析其结构后得到如图2 所示结构，对head 导航部分提取其主要内容并缩小宽度和高度，将head 导航和侧边栏、head 导航和正文部分分别组合成新的section，如图3 所示。用HTML5 标准中提供新的section 标记对页面进行划分，一个页面中可以包含多个secion，按用户需求和操作来显示不同的section.。一个section 所示可以分成3 个部分，分别用header、content、footer 三个新标记表示。

2 个section 之间通过绑定特殊的事件来相互响应，JQuery Mobile 框架提供多种事件来进行移动终端的屏幕事件绑定和处理。具体有tap(轻击)、taphold(轻击不放)、swipe(划动)、swipeleft(左划)、swiperight(右划)等等。2 个section 之间的切换显示可以采用2 种方式，一种是链接标记另一种是划动事件绑定，本实例采用划动事件绑定的方式来实现。重组完成后的页面如图4 和图5 所示。

图4 重组后的section1

图5 重组后的section2

浏览器是部分支持HTML5 的，特别是老版本的IE 不支持HTML5，在对访问的终端进行判断的时候需要添加浏览器版本的判断，如果是不支持的浏览器，将显示原始页面或者是功能较少的重组页面。

对于日志填写这样的功能页面，重点是获取日志输入的组件并使之适应移动终端的大小，重组后的页面如图6 所示。

图6 日志输入页面重组后

3.4 页面重组在Web 系统中的实现

本文所用页面重组方法采用的是编写脚本语句，所编写的脚本语句可以在浏览器中执行，重组过程在浏览器加载完页面元素后对页面元素进行重组，生成HTML5 新元素并进行定位排版及事件绑定，这种方式的处理过程集中在浏览器中。

另一种方式是将所编写的脚本语句在服务器端调用，服务器端采用Java 编写的，使用Web Scripting Framework 调用脚本代码在Servlet 容器(例如Tomcat)中生成Web 内容，再发送给客户，具体实现使用AOP 的方式在原有系统上添加功能。或者采用node.js 在服务器端调用重组处理代码进行处理。如图7 所示。

图7 服务器端页面重组实现

4 结束语

本文对基于前台框架的响应式多终端适配重组技术进行了分析并给出了一个案例的具体实现。在实际使用时，不论后台采用的是何种服务器端技术，在不添加服务器负荷的条件下，这种重组方式都可以对客户端进行页面重组适配转换，是一种切实可行的页面重组技术。但是这种重组技术，需要根据页面的具体情况来编写转换代码，对于服务器端批量生成的页面适应性较好，代码量很少，但转换代码对于不同的Web 系统需要专门编写，通用性较差。以后希望能开发出自动转换重组的前台框架，通过大部分进行自动转换，少部分手工修改的方式来完成响应式的移动终端页面重组。

［1］工业和信息化部电信研究院.移动互联网白皮书［EB/OL］.http://www.catr.cn/kxyj/qwfb/bps/201405/P02014-0512339464414386.pdf，2014-05-01.

［2］史晶，吴庆波，杨沙洲.移动终端个性化页面显示优化技术研究［J］.计算机工程，2012，38(18):277-279，281.

［3］工业和信息化部电信研究院.移动终端白皮书［EB/OL］.http://www.catr.cn/kxyj/qwfb/bps/201405/P020140512339-464414386.pdf，2014-05-01.

［4］江晓鹏.基于移动终端的Web 资源重构系统的设计与实现［D］.武汉:华中师范大学，2011.

［5］黄文蓓.基于网页分割和摘要的小屏幕设备网页自适应技术研究与实现［D］.上海:华东师范大学，2007.

［6］Su Junming，Tseng Shian-Shyong，Lin Huanyu，et al.A personalized learning content adaptation mechanism to meet diverse user needs in mobile learning environments［J］.User Modeling and User-adapted Interaction，2011，21(1/2):5-49.

［7］Canali C，Colajanni M，Lancellotti R.A two-level distributed architecture for the support of content adaptation and deliveryservices［J］.Cluster Computing，2010，13(1):1-17.

［8］杨威，高文华.基于Android 的智能家居终端设计与研究［J］.计算机技术与发展，2013，23(7):245-248.

［9］高乐，张健，田贤忠.基于视觉的Web 页面分块算法的改进与实现［J］.计算机系统应用，2009(4):65-69.

［10］陆钢，朱培军，李慧云，等.智能终端跨平台应用开发技术研究［J］.电信科学，2012，28(5):14-17.

［11］杜鹏.基于视觉特征的WEB 页面信息抽取技术的研究［D］.兰州:西北师范大学，2009

［12］马璇，邝野.移动终端自适应界面的一致性评价体系［J］.软件，2012，33(12):163-168.

［13］高辉，程罡，余胜泉，等.泛在学习资源在移动终端上的自适应呈现模型设计［J］.中国电化教育，2012(4):122-128.

［14］王秀峰.Web 导航中用户认知特征及行为研究［D］.南京:南京大学，2013.

［15］刘凤成.面向移动终端的Web 页面分块与转换方法的研究与应用［D］.长沙:中南大学，2012.

［16］W3C 组织.DOM［EB/OL］.http://www.w3.org/DOM，2014-11-14.

［17］顾韵华，田伟.基于DOM 模型扩展的Web 信息提取［J］.计算机科学，2009，36(11):235-237.