面向异构终端的Web应用界面动态适配方法技术领域
本发明属于云计算与移动互联网技术领域，具体涉及一种面向异构终端的Web应用界面动态适配方法，使为PC等大尺寸屏幕设备设计的Web界面得以在小尺寸屏幕设备以适合的方式显示。
背景技术
近年来，随着云计算成为互联网应用的重要模式，越来越多的软件系统运行在云平台（如数据中心）之上，并通过在线服务的方式供用户使用。而移动互联网的迅速发展则使得平板电脑（Pad）、智能手机等终端设备成为用户接入互联网的重要途径，使得用户可以在任何时间、任何地点、通过各种设备访问和使用软件所提供的功能。在这种技术大趋势下，大量的软件应用客户端被部署在各种移动终端设备上，并越来越多地以Web的形态供用户所用，如拥有4000万日常用户的高德地图以及1000万日常用户的腾讯Q+。
手机、Pad等异构终端的发展，造成了显示环境的异构性问题。如表1所示，目前PC的主流显示分辨率为1280x800或1440x900，然而手机与Pad的主流分辨率为480x800以及1024x600。
表1.不同设备屏幕尺寸与分辨率
针对这一问题，当前Web应用开发人员会针对不同尺寸的屏幕设计实现不同的界面。这一方案可良好地适配已知设备的屏幕尺寸，但其仍然存在两个问题：
首先，开发不同版本的界面会带来额外的成本，特别当Web界面比较复杂时，新开发一套特定某种尺寸屏幕的界面需要一定量的时间与人力的开销。
另一个更严重的问题是，每种界面只能针对一种屏幕尺寸。这意味着每当一种具备新屏幕尺寸的设备流行后，就需要针对该设备开发一套额外的界面。而在手机设备迅猛发展的今天，确实会出现搭载新尺寸屏幕的设备，例如最早的智能手机一般使用分辨率为320x480的3.5寸屏幕，但近一年来新出现了分辨率为480x800的4寸大屏幕手机。因而，Web应用必须考虑如何使同一界面适应不同尺寸的屏幕，使得在手机、Pad、PC上都能提供良好的用户体验。
发明内容
本发明的目的在于针对上述问题，提供一种面向异构终端的Web应用界面动态适配方法，可以忠实反映运行时刻的界面结构与表现，保证界面适配的正确。
为实现上述目的，本发明采用如下技术方案：
一种面向异构终端的Web应用界面动态适配方法，其步骤包括：
1）通过浏览器加载Web应用界面并进行渲染；
2）获取渲染后的所述Web应用界面在运行时刻的DOM树；
3）根据所述DOM树中所有子树的类型和尺寸信息，将所述Web应用界面分割生成若干适应当前屏幕的子界面；
4）监测所述DOM树的变化，将变化的界面重分割成适应所述当前屏幕的子界面；
5）在所述当前屏幕中显示分割后的子界面。
进一步地，所述当前屏幕在任一时刻只显示一个子界面，隐藏其它子界面。
进一步地，通过在一子界面中进行操作，切换至其它子界面。
进一步地，检测当用户在一子界面中操作时导致的其它子界面的变化，并提醒用户切换到有变化的子界面，或自动切换到有变化的子界面。
进一步地，所述DOM树的变化包括DOM树中元素内容的变化以及DOM子树中元素的增删；在监视DOM树变化时，定时将当前时刻子界面的特征值与上一时刻子界面的特征值进行比较，以判断界面是否发生变化。
进一步地，所述子树的类型包括：不可分割子树、可忽略子树和可分割子树。
进一步地，根据DOM子树及其根元素的如下属性中的一种或多种对所述Web应用界面进行分割：长度与宽度、覆盖区域、子树最大尺寸、子树重叠。
进一步地，在收集子树尺寸时，从根元素开始递归地计算其所有子元素的尺寸及其相对根节点的偏移量，进而计算出一棵子树实际显示的尺寸。
进一步地，根据DOM元素的控制盒类型对子界面进行样式调整。
本发明支持在运行时刻分割动态生成的界面，并且在界面更新后也进行动态重分割。由 于其分割行为基于Web界面的运行时刻文档对象模型树，而非基于传统的静态HTML页面，所以可以忠实反映运行时刻的界面结构与表现，从而保证了界面适配方法的正确。本发明可以使为PC等大尺寸屏幕设备设计的Web界面得以在小尺寸屏幕设备以适合的方式显示。
附图说明
图1为DOM树元素盒模型示意图。
图2为DOM树元素定位方式示意图。
图3为一个复杂Web界面的示意图。
图4为与各子界面对应的DOM树示意图。
图5为本发明实施例的面向异构终端的Web应用界面动态适配方法的步骤流程图。
图6为本发明实施例的DOM树中子元素尺寸溢出的示意图。
图7为本发明实施例的DOM树分割展示示例图。
图8为本发明实施例的Ctrip.com界面分割示例图。
具体实施方式
为便于理解和实施本发明，下面首先介绍与本发明密切相关的文档对象模型，然后详细说明本发明的技术方案，并提供具体应用实例。
文档对象模型（DOM，Document Object Model）是W3C定义的一个结构化文档访问规范，提供一种访问结构化文档的标准API（Application Programming Interface）。这一规范处理树状的结构化文档，即：1)每个文档有唯一的根元素；2)文档中每个元素包含若干子元素；3)除根元素外，每个元素有且仅有唯一的父元素；4)每个元素包含内容以及若干属性。DOM规范规定了一组遍历及操作树状结构中各个元素的API，同时还规定了访问每个元素的内容以及属性的API。
HTML文档是一种符合DOM规范的结构化文档，可以使用DOMAPI访问。HTML文档中的每个标签（Tag）是DOM规范中的一个元素，其根元素是html标签，每个元素中存在大量属性，其中一部分属性为CSS规范中规定的确定元素表现方式的属性。习惯上将遵循DOM规范的结构化文档所对应的树状结构称为DOM树，本发明沿用这一惯用说法。
Web应用可以包含多个界面，每个界面为一个HTML元素集合，这些元素构成一棵HTMLDOM子树。当Web界面需要呈现时，浏览器会对其进行渲染。渲染完成后界面中的每个元素都具备一定宽度和高度。W3C的CSS规范中定义了DOM元素的盒模型（Box Model）。盒模型规定了渲染完成后元素的宽度和高度。
根据盒模型的定义，每一个DOM元素表现为一个矩形，该矩形由四个部分组成，如图1 所示，具体说明如下：
1）内容（Content）：元素的实际内容构成一个矩形，渲染完成后可以使用DOM API获取该矩形的宽度（width）和高度（height）；
2）内边距（Padding）：元素的内容矩形与边框的间距，其中上下左右四个方向的内边距可能不同。元素上定义的背景色或背景图片也会出现在内边距部分；
3）边框（Border）：元素的边框，边框可以设置一个宽度，四个方向的边框的宽度可能不同；
4）外边距（Margin）：元素边框外，元素与其他元素的间距。四个方向的外边距也可能是不同的。外边距是透明的，元素上定义的背景色或背景图片不会出现在外边距部分。
因此一个渲染完毕后DOM树中元素的实际尺寸为：
元素宽度：
Widthelem=Widthcontent+Paddingleft+Paddingright+Borderleft+Borderright+Marginleft+Marginright (1)
元素高度：
Heightelem=Heightcontent+Paddingtop+Paddingbottom+Bordertop+Borderbottom+Margintop+Marginbottom (2)
其中，Widthelem表示元素宽度，Heightelem表示元素宽度，Widthcontent表示内容的宽度，Heightcontent表示内容的高度，Paddingleft、Paddingright、Paddingtop、Paddingbottom分别表示左边、右边、上边和下边的内边距，Borderleft、Borderright、Bordertop、Borderbottom分别表示左边、右边、上边和下边的边框宽度；Marginleft、Marginright、Margintop、Marginbottom分别左边、右边、上边和下边的外边距。
当子界面由一个元素构成时，该子界面的尺寸一定与该元素的尺寸相同。然而当子界面对应一棵DOM子树时，情况更为复杂。因为CSS规范规定一个子元素相对父元素存在多种不同的定位方式，如图2所示。
可以看出当一个元素采用相对、绝对或浮动方式定位时，其盒模型可能超出其父元素盒模型的边界。因此，一个界面的尺寸需要计算其对应DOM树中所有元素的外边距坐标，计算最大值与最小值之间的差值，具体计算公式如下：
界面宽度=所有子元素中的右边距坐标的最大值-所有子元素中的左边距坐标的最小值，表示为：
Widthview＝Max(Rightsubelem)-Min(Leftsubelem) (3)
界面高度=所有子元素中的上边距坐标的最大值-所有子元素中的下边距坐标的最小值，表示为：
Heightview＝Max(Bottomsubelem)-Min(Topsubelem) (4)
根据计算得出的界面尺寸，可以给出界面适配屏幕的定义。
当前的Web界面通常比较复杂，一个界面可能由多个区域组成，每个区域分别显示完整界面中的一部分内容，如图3所示。因此为了使一个较大的界面适配尺寸较小的屏幕，可以将界面依照不同区域分割成多个适应屏幕的子界面，在同一时刻只显示一个子界面，同时根据分割的结果提供导航使用户得以不同子界面间切换，此过程称为“基于分割的界面动态适配”。当构成一个界面的元素集合为另一个界面元素集合的子集时，称前者为后者的子界面。本发明所称的基于分割的界面适配，是将一个不适应屏幕大小的界面分解为一系列子界面，其中每个子界面适配屏幕。
然而不适当的界面分割可能使得用户无法从多个子界面中获得与原始界面相同的信息。一个有效的界面分割必须满足以下性质：
(a)完备性：
原始界面中的每个元素至少出现在一个子界面中。这保证在界面分割过程中没有信息被遗漏。
(b)排他性：
每个子界面中的元素不会出现在其他子界面中。这保证在界面分割过程中信息不会出现重复。
(c)内聚性：
表达相关信息的元素位于同一个子界面内。一个内聚性好的界面分割应该使得用户在完成一个任务时，切换子界面的次数尽可能少。这保证界面分割后的易用性和可用性。
如前所述，HTML规范定义了HTML DOM树中每个元素的语义，例如div元素表示一个容器，h1元素表示一级标题，p元素表示一段文字。W3C建议使用HTML提供的语义标签描述Web界面的结构化内容，这种结构化内容只包含内容以及内容间的嵌套层次关系，并不涉及元素如何表现。元素的表现信息使用负责表现的CSS规范描述。遵循该建议的界面，其内容结构与其表现形式相互分离，可以相对独立地修改界面的内容或表现，保证界面的可维护性。因此这一建议已经为产业界采纳，成为界面开发时的标准模式。目前Alexa.com排名前50位的网站首页，均以遵循W3C建议的结构表现分离的界面模式。
另一方面，通过对Alexa.com前50位网站首页的分析，发现这种遵循结构表现分离的界面，其内聚的子界面与DOM子树具有较好的对应关系，即一个内聚性较好的子界面，其全 部元素都包含在一棵DOM子树内，不会出现子界面中元素分属多个DOM子树的情况。如图4所示，构成几个完整界面的若干内聚子界面，恰好对应构成DOM树的若干子树，图4中右上角为对应的html代码，DOM树是根据该代码来生成的。
综合前面的分析，本发明提出一种基于运行时刻DOM树的Web应用界面动态适配方法。图5是本发明方法的步骤流程图。首先通过浏览器加载Web应用界面并进行渲染。当一个Web应用加载并完成界面渲染后，获取界面该时刻对应的DOM树并加以分析。如果界面不适应当前屏幕，本发明方法会自动将DOM树分割生成若干屏幕适应的子界面，并保证在任一时刻只显示一个子界面，隐藏其他界面。之后，本发明方法会监测DOM树变化，包括DOM树中原子元素内容的变化以及DOM子树中元素的增删。当变化发生时，本发明方法会对变化部分进行重分割，保证动态变化的界面始终能适应当前屏幕。
此外，因为界面被分割为多个子界面，任一时刻都有大量子界面处于隐藏状态。因此本发明可以进一步为用户提供在多个界面之间进行切换的方法。另一方面，因为用户在某一个子界面中的操作可能导致其他子界面发生变化，因此本发明还可以进一步检测这种变化，提醒用户切换到有变化的子界面，或自动切换到有变化的子界面。以上两个过程共同构成导航功能。
下面具体说明本发明技术方案的实施过程。
1.对DOM树进行分析
为进行分割，首先需要对DOM树进行分析。在Web界面的HTML DOM树中存在多种不同类型的子树，其中某些子树虽然包含多个元素乃至多棵子树，但是其在逻辑上却是原子元素，这类子树在适应过程中不可分割。
例如：一个界面中的下拉菜单对应DOM树中的select元素,该元素包含多个option元素代表菜单中的不同选项，然而在逻辑上select应被作为一个原子元素看待不可被分割。此外在DOM树中还存在一些元素并不会在界面中显示，这些元素为根节点构成的子树不需要参与到界面适配的过程中。
本发明将界面DOM树的子树分为三类，如表2所示：
表2.DOM子树类型
当Web界面被读取并动态渲染完毕后，收集所有DOM树中所有子树的尺寸信息。这些信息将被用来计算应该如何对DOM树进行分割。但实际渲染中，由于元素CSS布局方式的不同，DOM树根节点的宽高范围可能不能覆盖全部子元素。如图6所示的简单DOM树，元素3为根元素1的子元素，但因为元素3使用了向右浮动的布局方法，因此其高度不会“撑开”元素1的高度。这使得元素3的高度超过了根元素1的高度。
为了处理这种子元素尺寸“溢出”的情况，在收集子树尺寸时，不能简单记录子树根元素的宽高。而需要从根元素开始递归地计算其所有子元素的尺寸及其相对根节点的偏移量，再利用这些信息计算出一棵子树实际显示的尺寸。这一计算结果将被缓存到每一棵子树的根元素中，通过减少重复计算提高适配方法的性能。
DOM树分析过程参见表3给出的算法。为简便起见，算法伪代码中将″height″和″width″统一由″size″表示，实际中需要分别记录子树的宽、高。此外，算法除记录子树的尺寸外还需要记录根元素的类型信息，以辨识子树的类型。这些信息也可在算法的递归过程的同时完成。
表3.DOM树分析算法
2.界面分割
当计算出每个DOM子树的类型和尺寸后，进一步需要决定哪些DOM子树应该被分割以及如何分割。在进行这一过程中，本发明方法会主要考虑DOM子树及其根元素的以下属性：
1）长度与宽度：在进行界面适配时，宽度与高度是最主要被考虑的因素。在同等情况下，会优先考虑宽度的适应，这是因为用户更加适应垂直滚动的浏览方式，而当前主流的手机浏览器也都可以很好地支持垂直滚动的浏览方式。在考虑宽度高度适应时，另一个需要注意的问题是当前很多手机配置了重力感应设备，当用户持握手机的方向发生改变（有水平改为垂直或相反变化）时，即手机的宽度与高度会可能互换。这意味在运行时刻同一款手机的屏幕尺寸会发生改变，因此界面适配时必须将屏幕的方向以及可能的变化纳入考虑。
2）覆盖区域：覆盖区域是另一个描述DOM子树尺寸的方式。使用覆盖区域作为分割的依据，可以避免使用宽高时存在的手机放置方向的问题。但这种忽略宽高可能不能得到最佳的分割。
3）子树最大尺寸：在Web界面中存在各式各样的列表。列表包含多个列表项，因此具有较大的尺寸。然而逻辑上这些列表是不可分割的子树。一个避免不必要的DOM树分割的方法是将一棵DOM树所有子树的最大尺寸纳入考虑。当一棵尺寸很大的DOM树包含大量尺寸很小的子树时，可以推测该DOM树是某种列表，而不需要对其进行分割。这一方案也可避免分割出大量过于细碎的子界面，造成“适应”但不可用的界面分割方案。
4）子树重叠：隶属同一个DOM树的子树对应的子界面可能存在相互重叠的区域。对于一些界面非常复杂的Web构件，例如Google Map，DOM树中的子树存在大量重叠。分割相互重叠的DOM子树无法使界面适配屏幕，反而可能造成界面的错乱。为了避免这一问题，必须计算子树之间相互重叠的区域。
通过分析以上属性，本发明的界面适配方法可以将界面分割为若干子界面。
表4给出了界面分割适应算法的伪代码。其中setAsPartitionUnit(S)函数代表将以集合S中节点为根的DOM树设置为一个分割后的字界面。而shouldBePartitioned(S)函数则返回集合S中的DOM树集合是否应该被进一步划分，该函数考虑了以上四种属性。
表4.界面分割适应算法
分割完成后，设置子界面对应DOM子树根元素中CSS规范定义的显示属性″display″，将一个子界面显示或彻底隐藏。本发明方法保证在一个子界面显示的同时，隐藏其他子界面。此外，当DOM树被分割为若干子树后，多个子树的公共父元素并不包含在任何子树中。然而这些元素可能包含一些样式效果，例如背景颜色，这些样式效果同样可能对当前需要显示的子界面造成干扰，因此也需要将这些元素进行隐藏。图7是一个分割后的子界面展示及其对应DOM树的示例。
3.重分割
针对Web界面在运行时刻动态变化的特点，本发明方法会监视界面中DOM元素内容的变化、元素的添加或删除的操作（DOMAPI并不包含移动DOM元素的操作，因此移动操作实际是通过先删除再添加完成的）。如果一次添加删除操作发生在一个分割后的子界面内部，则不需要对整个界面进行重分割，因为当前分割方案的完备性和排他性没有遭到破坏。相反如果添加删除DOM元素的操作不在任何子界面内部，则这些操作为“子界面级别”的界面修改。发生这种修改时，就必须对整个界面重新进行计算并分割，以保证修改后的界面得以适配屏幕。
位于子界面外部的DOM元素增删操作必然导致不属于任何子界面的DOM元素数量发生变化。通过监视这类DOM元素的数量，可以有效地监控子界面级别修改操作发生的时间，并适时进行重分割。
4.对子界面进行样式调整
分割后的子界面尺寸通常并不能恰好完全适配屏幕。某些不可分割子树（例如图片）的尺寸可能超过屏幕范围。此外如上文所述，为保证界面可用性避免某些过于细碎的分割，一些可分割子树的尺寸也可能大于屏幕的尺寸。
因此在界面分割完成后需要对子界面进行样式调整。依据之前分析，子界面高度超出屏幕范围不会造成太大问题，因此样式调整主要考虑宽度调整。
CSS规范定义了DOM元素的视觉格式化模型（Visual Formatting Model）。其中规定一个DOM元素可能生成两种控制盒（Controlling Box）：块状盒（Block Box）及行内盒（Inline Box）。两种不同控制盒导致不同的设置DOM元素宽度的方法。控制盒的区别如表5所示。
表5.DOM元素控制盒描述
因此在进行子界面样式调整时，必须考虑子界面对应的DOM子树根元素的控制盒类型。对于块状元素可以直接设置根元素的宽度。对于行内元素，必须找到其第一个不为行内元素的父元素，设置该元素的宽度；或者首先设置行内元素的display属性，将该元素转变为块状元素，再设置其宽度。此外，还可以设置根元素的外边距，使得子界面与屏幕边框之间存在一定留白；调整字号增加小尺寸屏幕中文字的大小，以提高子界面的整体可用性。
分割完成后，本发明方法会根据分割后的子界面列表，自动生成供用户切换子界面的界面。当用户在界面中选择某个子界面时，显示该子界面，同时隐藏其他子界面。
然后，本发明方法会监视各个子界面内部的变化。当隐藏的子界面内容发生变化时，需要即时提示用户乃至自动切换显示的子界面，实现动态导航。为了监视子界面内部的变化，本发明方法会监视每一个子界面根元素的innerHTML属性值。此外，子界面级别的DOM元 素增删也需要在动态导航中加以考虑。
在监视DOM树变化时，记录上一时刻子界面的特征值，并定时将当前时刻的特征值与上一时刻加以比较，以判断界面是否发生变化。需要监视的子界面特征值如表6所示。需要注意的是，当界面DOM树包含较多元素比较复杂时，监视操作可能造成较大开销。
表6.界面监控特征值
特征值 描述
根元素innerHTML属性值 判断是否子界面内部发生变化
DOM子树元素数量 判断是否发生子界面级别变化
下面给出对Ctrip.com（携程）主页的界面进行分割的示例。
图8(a)为携程PC版主页的效果，需要将其分割以适应320x480的手机屏幕。采用本发明方法将满足以下条件的DOM树分割：
1）宽度以及面积均超过屏幕的宽度以及面积的1.5倍，或宽度小于屏幕宽度的1.5倍但面积超过屏幕的4倍；
2）最大子界面的尺寸大于屏幕尺寸的20%；
3）宽度以及高度均超过屏幕的宽度以及高度。
经过分割，构件的界面被分为了6个子界面，图8(a)中编号标出了分割后的每个子界面。另外，还重设了子界面的宽度以避免水平溢出。实际在手机端的显示效果如图8(b)所示。可以看出，本发明方法较好地实现了界面分割。
以上实施例仅用以说明本发明的技术方案而非对其进行限制，本领域的普通技术人员可以对本发明的技术方案进行修改或者等同替换，而不脱离本发明的精神和范围，本发明的保护范围应以权利要求书所述为准。