CN105205077A - 页面排版方法、装置及系统 - Google Patents

Abstract

本发明提供了一种页面排版方法，包括：将所接收到的网页数据解析成DOM树及对应的节点CSS属性；遍历所述DOM树，确定所述DOM树中各个节点的节点显示宽度；基于移动终端的屏幕宽度和各个节点的节点显示宽度，修改各个节点的节点类型和节点CSS属性；以及根据所述DOM树以及修改后的各个节点的节点CSS属性，生成经过适屏排版处理后的网页页面，以供发送给移动终端来进行浏览。利用该方法，通在表格节点的节点显示宽度大于移动终端的屏幕宽度时，将节点CSS属性修改为普通节点属性，可以实现基于通用排版协议的适屏排版处理。

Description

页面排版方法、装置及系统

技术领域

本发明涉及移动终端浏览器领域，更为具体地，涉及用于对在移动终端上显示的网页内容进行适屏排版处理的页面排版方法、装置及系统。

背景技术

目前，移动终端上显示的网页内容大部分都是从PC端获取的。PC端的网页内容都是基于PC机的屏幕尺寸来设计的，由于PC机的屏幕尺寸远远大于移动终端的屏幕尺寸，如果不对从PC端获取的网页内容进行适屏处理，则在移动终端上显示该网页内容时，将会有大部分网页内容显示在移动终端的屏幕之外，从而使得移动终端的用户在阅读该网页内容时需要进行左右移动操作处理，由此给用户的阅读带来不佳的体验。

为了解决上述问题，目前移动终端浏览器都采用了适屏排版技术，该适屏排版技术是目前WEB浏览的一种主要处理方式。在适屏排版技术中，原有网页字体大小保持不变，而是将超出手机屏宽的部分网页内容折行显示。这样，用户仅仅通过上下滑动屏幕，就可以方便地浏览网页。

适屏排版的难点在于需要对原始网页的样式进行特别处理，在保证适屏显示的同时尽量保持较好的网页整体布局。另外，针对表格、图文之类的元素或者元素组合，也需要一些特别处理，由此保证这些元素也能适屏且不对整体排版效果造成破坏。

目前，在移动终端上一般都采用私有的排版协议来进行上述适屏排版处理。在这种情况下，在移动终端上安装的浏览器客户端往往不是比如类似于android自带浏览器Chrome和iPhone自带浏览器Safari之类的标准浏览器。这种浏览器客户端不具有标准浏览器内核，从而无法单独解析标准的HTML和CSS，并且浏览器客户端也需要和服务器一一对应，换言之，对端服务器也需要采用相应的私有排版协议，才能进行相应的数据解析和传输。

然而，这类适屏排版处理方式有以下无法克服的问题：(1)由于该种浏览器没有采用标准的浏览器内核，因此在一些平台上会被禁止；(2)由于采用私有协议，后期会非常麻烦，往往需要同时更新客户端和服务器；(3)跨平台移植效率低，无法广泛兼容。

发明内容

鉴于上述，本发明提出了一种页面排版方法、装置及系统，利用该方法、装置及系统，通过确定网页数据的DOM树中各节点的节点显示宽度，在节点是表格节点且节点显示宽度大于移动终端的屏幕宽度时，修改该节点及子节点的节点类型和节点CSS属性，可以实现基于通用排版协议的适屏排版处理。

根据本发明的一个方面，提供了一种页面排版方法，包括：在接收到基于移动终端发出的网页加载请求而从目标网页内容服务器获取的网页数据后，将所述网页数据解析成与所述网页数据对应的DOM树及对应的节点CSS属性，其中，所述网页加载请求与移动终端的屏幕宽度信息一起发送给中间件服务器；遍历所述DOM树，确定所述DOM树中各个节点的节点显示宽度；基于移动终端的屏幕宽度和所确定的各个节点的节点显示宽度，修改各个节点的节点类型和节点CSS属性；以及根据所述DOM树以及修改后的各个节点的节点CSS属性，生成经过适屏排版处理后的网页页面，以供发送给移动终端来进行浏览。

在上述方面的一个或多个示例中，所述节点可以包括文本节点、图片节点和表格节点。

在上述方面的一个或多个示例中，在所述节点的类型是表格节点时，确定所述DOM树中各个节点的节点显示宽度可以包括：遍历所述表格节点的所有行，确定各行中包含的表格单元的显示宽度；将各行中的所有表格单元的显示宽度相加，计算出各行的行显示宽度；从所计算出的各行的行显示宽度中选择最大的行显示宽度，作为所述表格节点的节点显示宽度。

在上述方面的一个或多个示例中，确定表格单元的显示宽度包括：确定该表格单元的所有叶节点的样式类型和显示宽度；按照将样式类型为行内元素的连续叶节点的显示宽度相加以及其它叶节点的显示宽度保持不变的方式，对该表格单元的所有叶节点的显示宽度进行处理；以及从经过处理后的显示宽度中选择最大的显示宽度，作为该表格单元的显示宽度。

在上述方面的一个或多个示例中，在所述节点的类型是文本节点或图片节点时，确定所述DOM树中各个节点的显示宽度可以包括：根据文本宽度计算方法或图片宽度计算方法计算节点显示宽度。

在上述方面的一个或多个示例中，在所述节点的类型是表格节点时，基于移动终端的屏幕宽度和所确定的各个节点的节点显示宽度，修改各个节点的节点类型和节点CSS属性可以包括：在所述节点的节点显示宽度不大于所述移动终端的屏幕宽度时，保持所述节点的节点类型和节点CSS属性不变；以及在所述节点的节点显示宽度大于所述移动终端的屏幕宽度时，将所述节点自身及子节点的节点类型从表格节点修改为普通节点，并且将所述节点自身及子节点中的经过节点类型修改后的表格单元的样式修改为display:inline-block。

在上述方面的一个或多个示例中，基于移动终端的屏幕宽度和所确定的各个节点的节点显示宽度，修改各个节点的节点类型和节点CSS属性还可以包括：在所述节点的节点CSS属性中包含有允许被限制输出的CSS样式时，将所述节点CSS属性修改为禁止输出所述CSS样式。

根据本发明的另一方面，提供了一种表格节点显示宽度确定方法，包括：遍历所述表格节点的所有行，确定各行中包含的表格单元的显示宽度；将各行中的所有表格单元的显示宽度相加，计算出各行的行显示宽度；从所计算出的各行的行显示宽度中选择最大的行显示宽度，作为所述表格节点的节点显示宽度。

在上述方面的一个或多个示例中，确定表格单元的显示宽度可以包括：确定该表格单元的所有叶节点的样式类型和显示宽度；按照将样式类型为行内元素的连续叶节点的显示宽度相加以及其它叶节点的显示宽度保持不变的方式，对该表格单元的所有叶节点的显示宽度进行处理；以及从经过处理后的显示宽度中选择最大的显示宽度，作为该表格单元的显示宽度。

根据本发明的另一方面，提供了一种页面排版装置，包括：解析单元，用于在接收到基于移动终端发出的网页加载请求而从目标服务器获取的网页数据后，将所述网页数据解析成与所述网页数据对应的DOM树及对应的节点CSS属性，其中，所述网页加载请求与移动终端的屏幕宽度信息一起发送给中间件服务器；节点显示宽度确定单元，用于遍历所述DOM树，确定所述DOM树中各个节点的节点显示宽度；类型和属性修改单元，用于基于移动终端的屏幕宽度和所确定的各个节点的节点显示宽度，修改各个节点的节点类型和节点CSS属性；以及网页页面生成单元，用于根据所述DOM树以及修改后的各个节点的节点CSS属性，生成经过适屏排版处理后的网页页面，以供发送给移动终端来进行浏览。

在上述方面的一个或多个示例中，所述节点包括文本节点、图片节点和表格节点，所述节点显示宽度确定单元可以包括表格节点显示宽度确定模块，用于确定表格节点的节点显示宽度，以及文本及图片节点显示宽度确定模块，用于根据文本宽度计算方法或图片宽度计算方法计算节点显示宽度。

在上述方面的一个或多个示例中，所述表格节点显示宽度确定模块可以包括：表格单元显示宽度确定模块，用于遍历所述表格节点的所有行，确定各行中包含的表格单元的显示宽度；行显示宽度计算模块，用于将各行中的所有表格单元的显示宽度相加，计算出各行的行显示宽度；以及第一选择模块，用于从所计算出的各行的行显示宽度中选择最大的行显示宽度，作为所述表格节点的节点显示宽度。

在上述方面的一个或多个示例中，所述表格单元显示宽度确定模块可以包括：样式类型及显示宽度确定模块，用于确定该表格单元的所有叶节点的样式类型和显示宽度；显示宽度处理模块，用于按照将样式类型为行内元素的连续叶节点的显示宽度相加以及其它叶节点的显示宽度保持不变的方式，对该表格单元的所有叶节点的显示宽度进行处理；以及第二选择模块，用于从经过处理后的显示宽度中选择最大的显示宽度，作为该表格单元的显示宽度。

在上述方面的一个或多个示例中，在所述节点的类型是表格节点时，所述类型和属性修改单元被配置为：在所述节点的节点显示宽度不大于所述移动终端的屏幕宽度时，保持所述节点的节点类型和节点CSS属性不变；以及在所述节点的节点显示宽度大于所述移动终端的屏幕宽度时，将所述节点自身及子节点的节点类型从表格节点修改为普通节点，并且将所述节点自身及子节点中的经过节点类型修改后的表格单元的样式修改为display:inline-block。

根据本发明的另一方面，提供了一种页面排版系统，包括：移动终端；中间件服务器，包括如上所述的页面排版装置；以及目标网页内容服务器，用于存储网页内容数据。

利用上述方法、装置及系统，通过确定网页数据的DOM树中各节点的节点显示宽度，在节点是表格节点且节点显示宽度大于移动终端的屏幕宽度时，将所述节点自身及子节点的节点类型从表格节点修改为普通节点，并且将所述节点自身及子节点中的经过节点类型修改后的表格单元的样式修改为display:inline-block，可以实现基于通用排版协议的适屏排版处理。

为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。

附图说明

根据下述参照附图进行的详细描述，本发明的上述和其他目的、特征和优点将变得更加显而易见。在附图中：

图1示出了根据本发明的实施例的页面排版方法的流程图；

图2示出了节点显示宽度确定过程的一个示例的流程图；

图3示出了表格单元显示宽度确定过程的一个示例的流程图；

图4A示出了表格节点的一个示例，图4B-4E示出了表格单元的几个示例；

图5示出了节点类型和节点CSS属性修改过程的一个示例的流程图；

图6A和6B分别示出了未进行适屏排版和进行适屏排版后的网页效果图；

图7示出了根据本发明的页面排版系统的方框示意图；

图8示出了图7中的页面排版装置的方框示意图；

图9示出了表格节点显示宽度确定模块的方框示意图；和

图10示出了表格单元显示宽度确定模块的方框示意图。

在所有附图中相同的标号指示相似或相应的特征或功能。

具体实施方式

下面描述本公开的各个方面。应该明白的是，本文的教导可以以多种多样形式具体体现，并且在本文中公开的任何具体结构、功能或两者仅仅是代表性的。基于本文的教导，本领域技术人员应该明白的是，本文所公开的一个方面可以独立于任何其它方面实现，并且这些方面中的两个或多个方面可以按照各种方式组合。例如，可以使用本文所阐述的任何数目的方面，实现装置或实践方法。另外，可以使用其它结构、功能、或除了本文所阐述的一个或多个方面之外或不是本文所阐述的一个或多个方面的结构和功能，实现这种装置或实践这种方法。此外，本文所描述的任何方面可以包括权利要求的至少一个元素。

下面将参照附图描述本发明的各个实施例。

图1示出了根据本发明的实施例的页面排版方法的流程图。

如图1所述，在步骤S110，移动终端向中间件服务器发送网页加载请求和移动终端的屏幕宽度信息。这里要说明的是，移动终端的屏幕宽度信息可以与网页加载请求一起发送给中间件服务器，也可以包含在网页加载请求中发送给中间件服务器。此外，除了网页加载请求和移动终端的屏幕宽度信息之外，移动终端还可以向中间件服务器发送移动终端的其它属性信息，比如移动终端的屏幕分辨率等。同样，这些属性信息也可以与网页加载请求一起或者包含在网页加载请求中发送给中间件服务器。

在接收到基于移动终端发出的网页加载请求和移动终端的屏幕宽度信息后，在步骤S120，中间件服务器将网页加载请求发送给目标网页内容服务器。在移动终端的屏幕宽度信息包含在网页加载请求中时，在将网页加载请求发送给目标网页内容服务器之前，还需要从网页加载请求中提取移动终端的屏幕宽度信息，然后将经过提取处理后得到的网页加载请求发送给目标网页内容服务器。接着，在步骤S130，目标网页内容服务器响应于所接收的网页加载请求获取对应的网页数据并返回给中间件服务器。

在接收到目标网页内容服务器返回的网页数据后，在步骤S140，中间件服务器将所述网页数据解析成与所述网页数据对应的DOM树及对应的节点CSS属性。这里，中间件服务器对所述网页数据的解析是利用中间件服务器中的浏览器内容，按照标准浏览器加载的方式进行解析。术语“CSS(CascadingStyleSheet)”是级联样式表，用来表现HTML或XML等文件式样。所述CSS属性比如包括字体属性、颜色和背景属性、文本属性、边距属性、填充距属性、边框属性等。在进行网页渲染时，可以按照该CSS属性确定节点的样式。

接着，在步骤S150，在中间件服务器上，遍历所述DOM树，确定所述DOM树中各个节点的节点显示宽度。节点显示宽度的确定过程将在下面参照图2-图4进行详细描述。

在确定出各个节点的节点显示宽度后，在步骤S160，中间件服务器基于移动终端的屏幕宽度和所确定的各个节点的节点显示宽度，修改各个节点的节点类型和节点CSS属性。节点类型和节点CSS属性的修改过程将在下面参照图5进行详细描述。

进行上述节点类型和节点CSS属性修改后，在步骤S170，中间件服务器根据所述DOM树以及修改后的各个节点的节点CSS属性，生成经过适屏排版处理后的网页页面。然后，在步骤S180，将所生成的经过适屏排版处理后的网页页面返回给移动终端，以供移动终端在屏幕上显示和浏览。

下面分别参照图2-图4以及图5描述节点的节点显示宽度确定过程以及节点类型和节点CSS属性修改过程。

图2示出了节点显示宽度确定过程的一个示例的流程图，图3示出了表格单元显示宽度确定过程的一个示例的流程图，图4A示出了表格节点的一个示例，以及图4B-4E示出了表格单元的几个示例。

如图2所示，在将所述网页数据解析成与所述网页数据对应的DOM树及对应的节点CSS属性后，遍历DOM树中的所有节点，针对每个节点，在步骤S151，判断该节点的节点属性是文本节点、图片节点或表格节点。

在判断为文本节点或图片节点时，在步骤S153，根据文本宽度计算方法或图片宽度计算方法计算节点显示宽度。该文本宽度计算方法或图片宽度计算方法可以采用任何本领域公知的方式进行，在此不详细描述。比如，图片宽度可以通过读取图片本身的属性来获取，而文本宽度可以利用文本数乘以文本字体的大小来计算出。

在判断为表格节点时，在步骤S155，遍历所述表格节点的所有行，确定各行中包含的表格单元的显示宽度。图3示出了表格单元的显示宽度的确定方法的一个示例的流程图。

如图3所示，首先，在步骤S1551中，确定该表格单元的所有叶节点的样式类型和显示宽度。这里，所述叶节点通常是文本节点或图片节点，所述样式类型通常包括inline样式(行内元素样式)和block样式(块级元素样式)。然后，在步骤S1553中，按照将样式类型为行内元素的连续叶节点的显示宽度相加以及其它叶节点的显示宽度保持不变的方式，对该表格单元的所有叶节点的显示宽度进行处理。最后，在步骤S1555，从经过处理后的显示宽度中选择最大的显示宽度，作为该表格单元的显示宽度。

在如上确定出各行中包含的表格单元的显示宽度后，在步骤S157，将各行中的所有表格单元的显示宽度相加，计算出各行的行显示宽度。接着，在步骤S159，从所计算出的各行的行显示宽度中选择最大的行显示宽度，作为所述表格节点的节点显示宽度。

图4A示出了一个由三行三列构成的表格节点。如图4A所示，第一行的显示宽度由三个单元格宽度之和组成，按照示出的字符计算为41个字符。由于与其余二行相比，第一行的显示宽度最大。因此，该表格节点的显示宽度为41个字符。

下面结合图4B到4D对表格单元的显示宽度确定进行说明。在进行说明之前，首先对术语“行内元素样式(inline样式)”和“块级元素样式(block样式)”进行解释。节点的基本排版方式，即排版样式，主要分为inline样式和block样式两种。对于inline样式的节点，该节点会在当前行尾紧接排版；而对于block样式的节点，会另起一行进行排版。比如，有相邻的设置为inline样式的两段文本，后一段文本会紧接前一段文本排版输出，而对于设置为block样式的两段文本，则后一段文本相当前一段文本换行输出。

图4B示出了由全部连续相邻且样式类型都为行内元素样式(inline样式)的叶节点构成的表格单元。如图4B所示，表格单元依序由节点A1-A5构成，所有5个节点的样式类型都为inline样式，且节点A1-A3的显示宽度为10个字符，A4的显示宽度为8个字符，以及A5的显示宽度为5个字符，则该表格单元的显示宽度为43个字符。

图4C示出由任何相邻的两个叶节点不会同时是inline样式的叶节点构成的表格单元。如图4C所示，表格单元依序由节点A1-A5构成，其中A1、A3和A5的样式类型为inline样式，而A2和A4的样式类型为block样式。同样，节点A1-A3的显示宽度为10个字符，A4的显示宽度为8个字符，以及A5的显示宽度为5个字符。在这种情况下，表格单元的显示宽度为10个字符。

图4D示出了由任何相邻的两个叶节点不会同时是inline样式的叶节点构成的表格单元。如图4D所示，表格单元依序由节点A1-A5构成，其中节点A1、A3、A4、A5的样式类型为block样式，而节点A2的样式类型为inline样式。同样，节点A1-A3的显示宽度为10个字符，节点A4的显示宽度为8个字符，以及节点A5的显示宽度为5个字符。在这种情况下，表格单元的显示宽度为10个字符。

图4E示出了包含由相邻的两个叶节点同时是inline样式的叶节点构成的表格单元。如图4E所示，表格单元依序由节点A1-A7构成，其中，节点A1-A3的样式类型为inline样式，节点A4和A5的样式类型为block样式，节点A6-A7的样式类型为inline样式。而且，节点A1到A3的显示宽度都为10个字符，节点A4的显示宽度为15个字符，节点A5的显示宽度为17个字符，节点A6的显示宽度为19个字符，以及节点A7的显示宽度为20个字符。在这种情况下，由于节点A1-A3以及A6-A7是连续相邻的inline样式节点，所以将节点A1-A3的显示宽度相加，得到30个字符，以及将节点A6和A7相加，得到39个字符。然后将上述计算出的显示宽度与节点A4和A5的显示宽度相比较，选出最大的显示宽度，即39个字符，作为该表格节点的显示宽度。

图5示出了节点类型和节点CSS属性修改过程的流程图。如图5所示，在确定出各个节点的节点显示宽度后，在步骤S161，判断在所述节点的节点显示宽度是否大于所述移动终端的屏幕宽度。在判断为不大于所述移动终端的屏幕宽度时，在步骤S162，保持所述节点的节点类型和节点CSS属性不变。

在判断为大于所述移动终端的屏幕宽度时，如果节点类型为文本节点或图片节点，则在步骤S163，按照现有的文本适屏排版规则或图片排版规则进行节点CSS属性修改。比如，文本适屏排版规则可以为*{word-break:break-all；}，以及图片排版规则可以为“img,embed,object,video,input{max-width:100％；}”。由此，利用文本规则，可以保证当文本宽度超过屏宽时，文本自动折行。利用图片排版规则中的max-width规则，可以保证图片、视频的元素宽度不超过屏宽。

在节点类型为表格节点时，则在步骤S164，将所述节点自身及子节点的节点类型从表格节点修改为普通节点，并且将所述节点自身及子节点中的经过节点类型修改后的表格单元的样式修改为display:inline-block。具体地，在一个示例中，将表格节点的<table>/<tbody>/<thead>/<td>/<tr>标签转为<div>,并在原来为<td>的<div>加上display:inline-block的样式。这里，table是指表格，tbody是表格主体，thead是表格头，td是表格单元，tr是表格单元中的行。

图6A和6B分别示出了未进行适屏排版和进行适屏排版后的网页效果图。从图中可以看出，图6A在手机上需要左右滑动才能实现完整浏览，6B无需左右滑动就可以实现完整浏览。应用根据本发明的适屏排版处理后，在移动终端上的展现与现有技术相比有非常明显的提高，从而提升用户的使用体验。

此外，在进行节点CSS属性修改时，为了保持整体页面简洁，还可以在所述节点的节点CSS属性中包含有允许被限制输出的CSS样式时，将所述节点CSS属性修改为禁止输出所述CSS样式排版，从而对网页内容进行精简。例如，当遍历DOM节点时发现该节点原页面存在背景图，则在进行节点CSS属性修改时，该背景图属性修改为禁止输出，从而在移动终端的屏幕上显示时将不会出现背景图。

此外，在移动终端将移动终端的屏幕分辨率发送给中间件服务器时，在中间件服务器进行节点CSS属性修改时，还可以基于移动终端的屏幕分辨率，对字高、控件大小、文字大小进行修改和优化处理。此外，还可以设置“禁止字体缩放”、“去掉链接下划线”等。

下面列出了一些属性修改的具体修改方案。

·控件样式设定：

ul,li,ol{list-style:none；}，

li{text-align:left；line-height:150％；}，

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0；padding:0}

·字体大小设定：

h1,h2,h3,h4,h5,h6{font-size:19px；}

body{-webkit-text-size-adjust:none；font-size:19px；line-height:150％；margin:0px1px；padding:0}

·禁止字体缩放：

html{-webkit-text-size-adjust:none；}

·去掉链接下划线：

a:link{text-decoration:none；}。

此外，在进行节点CSS属性修改时，还可以加入根据手机特点进行定制的内联全局样式，以便更好地控制页面在手机上的展现效果。比如，根据用户体验的经验，设置文字大小，行高，<img>/<object>/<embed>最大宽度等。

另外，在进行节点CSS属性修改时，还可以比如对于元素的边框，内边距，外边距等属性限定最大值，比如限制最大值为2个像素。此外，还可以对于Float属性元素的相邻节点进行clear：both的设置，以防止布局错位。

如上参照图1-图6B描述了根据本发明的页面排版方法。本发明的上述页面排版方法，可以采用软件实现，也可以采用硬件实现，或采用软件和硬件组合的方式实现。

图7示出了示出了根据本发明的页面排版系统1的方框示意图。如图7所示，网页排版系统1包括移动终端10、中间件服务器20以及目标网页内容服务器30。所述中间件服务器20包括页面排版装置700。

在工作时，移动终端10将网页加载请求和移动终端的屏幕宽度信息发送给中间件服务器20。中间件服务器20将网页加载请求转发给目标网页内容服务器30，并从目标网页内容服务器30获取对应的网页数据。然后，中间件服务器20基于移动终端的屏幕宽度信息，对所获取的网页数据进行适屏排版，并将适屏排版处理后的网页页面返回给移动终端进行浏览。

图8示出了图7中的页面排版装置700的方框示意图。如图8所示，页面排版装置700包括解析单元710、节点显示宽度确定单元720、类型和属性修改单元730和网页页面生成单元740。

在接收到基于移动终端发出的网页加载请求而从目标服务器获取的网页数据后，解析单元710将所述网页数据解析成与所述网页数据对应的DOM树及对应的节点CSS属性。在解析出DOM树后，节点显示宽度确定单元720遍历所述DOM树，确定所述DOM树中各个节点的节点显示宽度。

图9示出了节点显示宽度确定单元720的一个示例的方框示意图。如图9所示，节点显示宽度确定单元720可以包括：文本及图片节点显示宽度确定模块721，用于根据文本宽度计算方法或图片宽度计算方法计算节点显示宽度；以及表格节点显示宽度确定模块723，用于确定表格节点的节点显示宽度。表格节点显示宽度模块723可以包括表格单元显示宽度确定模块725，用于遍历所述表格节点的所有行，确定各行中包含的表格单元的显示宽度；行显示宽度计算模块727，用于将各行中的所有表格单元的显示宽度相加，计算出各行的行显示宽度；以及第一选择模块729，用于从所计算出的各行的行显示宽度中选择最大的行显示宽度，作为该表格节点的节点显示宽度。

图10示出了表格单元显示宽度确定模块725的一个示例的方框示意图。如图10所示，表格单元显示宽度确定模块725包括样式类型及显示宽度确定模块7251、显示宽度处理模块7253以及第二选择模块7255。样式类型及显示宽度确定模块7251用于确定该表格单元的所有叶节点的样式类型和显示宽度。显示宽度处理模块7253用于按照将样式类型为行内元素的连续叶节点的显示宽度相加以及其它叶节点的显示宽度保持不变的方式，对该表格单元的所有叶节点的显示宽度进行处理。第二选择模块7255用于从经过处理后的显示宽度中选择最大的显示宽度，作为该表格单元的显示宽度。

在如上确定各个节点的节点显示宽度后，类型和属性修改单元730基于移动终端的屏幕宽度和所确定的各个节点的节点显示宽度，修改各个节点的节点类型和节点CSS属性。在所述节点的类型是表格节点时，所述属性修改单元被配置为：在所述节点的节点显示宽度不大于所述移动终端的屏幕宽度时，保持所述节点的节点类型和节点CSS属性不变；以及在所述节点的节点显示宽度大于所述移动终端的屏幕宽度时，将所述节点自身及子节点的节点类型从表格节点修改为普通节点，并且将所述节点自身及子节点中的经过节点类型修改后的表格单元的样式修改为display:inline-block。在所述节点的类型是文本或图片节点时，所述属性修改单元被配置为：在所述节点的节点显示宽度不大于所述移动终端的屏幕宽度时，保持所述节点的节点类型和节点CSS属性不变；以及在节点的节点显示宽度大于所述移动终端的屏幕宽度时，按照现有的文本适屏排版规则或图片排版规则进行节点CSS属性修改。

在如上进行节点类型和节点CSS属性修改后，网页页面生成单元740根据所述DOM树以及修改后的各个节点的节点CSS属性，生成经过适屏排版处理后的网页页面，以供发送给移动终端来进行浏览。

利用该方法、装置及系统，通过确定网页数据的DOM树中各节点的节点显示宽度，在节点是表格节点且节点显示宽度大于移动终端的屏幕宽度时，将所述节点自身及子节点的节点类型从表格节点修改为普通节点，并且将所述节点自身及子节点中的经过节点类型修改后的表格单元的样式修改为display:inline-block，可以实现基于通用排版协议的适屏排版处理。

此外，典型地，本发明所述的移动终端可为各种智能移动终端设备，例如智能手机、个人数字助理(PDA)等。

此外，根据本发明的方法还可以被实现为由移动终端中的处理器(比如CPU)执行的计算机程序，并且存储在移动终端的存储器中。在该计算机程序被处理器执行时，执行本发明的方法中限定的上述功能。

此外，根据本发明的方法还可以实现为一种计算机程序产品，该计算机程序产品包括计算机可读介质，在该计算机可读介质上存储有用于执行本发明的方法中限定的上述功能的计算机程序。

此外，上述方法步骤以及系统单元也可以利用控制器以及用于存储使得控制器实现上述步骤或单元功能的计算机程序的计算机可读存储设备实现。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬件和软件的这种可互换性，已经就各种示意性组件、方块、模块、电路和步骤的功能对其进行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现所述的功能，但是这种实现决定不应被解释为导致脱离本发明的范围。

尽管前面公开的内容示出了本发明的示例性实施例，但是应当注意，在不背离权利要求限定的本发明的范围的前提下，可以进行多种改变和修改。根据这里描述的发明实施例的方法权利要求的功能、步骤和/或动作不需以任何特定顺序执行。此外，尽管本发明的元素可以以个体形式描述或要求，但是也可以设想多个，除非明确限制为单数。

虽然如上参照图描述了根据本发明的各个实施例进行了描述，但是本领域技术人员应当理解，对上述本发明所提出的各个实施例，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。

Claims (15)

1.一种页面排版方法，包括：

在接收到基于移动终端发出的网页加载请求而从目标网页内容服务器获取的网页数据后，将所述网页数据解析成与所述网页数据对应的DOM树及对应的节点CSS属性，其中，所述网页加载请求与移动终端的屏幕宽度信息一起发送给中间件服务器；

遍历所述DOM树，确定所述DOM树中各个节点的节点显示宽度；

基于移动终端的屏幕宽度和所确定的各个节点的节点显示宽度，修改各个节点的节点类型和节点CSS属性；以及

根据所述DOM树以及修改后的各个节点的节点CSS属性，生成经过适屏排版处理后的网页页面，以供发送给移动终端来进行浏览。

2.如权利要求1所述的页面排版方法，其中，所述节点包括文本节点、图片节点和表格节点。

3.如权利要求2所述的页面排版方法，其中，在所述节点的类型是表格节点时，确定所述DOM树中各个节点的节点显示宽度包括：

遍历所述表格节点的所有行，确定各行中包含的表格单元的显示宽度；

将各行中的所有表格单元的显示宽度相加，计算出各行的行显示宽度；

从所计算出的各行的行显示宽度中选择最大的行显示宽度，作为所述表格节点的节点显示宽度。

4.如权利要求3所述的页面排版方法，其中，确定表格单元的显示宽度包括：

确定该表格单元的所有叶节点的样式类型和显示宽度；

按照将样式类型为行内元素的连续叶节点的显示宽度相加以及其它叶节点的显示宽度保持不变的方式，对该表格单元的所有叶节点的显示宽度进行处理；以及

从经过处理后的显示宽度中选择最大的显示宽度，作为该表格单元的显示宽度。

5.如权利要求2所述的页面排版方法，其中，在所述节点的类型是文本节点或图片节点时，确定所述DOM树中各个节点的显示宽度包括：

根据文本宽度计算方法或图片宽度计算方法计算节点显示宽度。

6.如权利要求2所述的页面排版方法，其中，在所述节点的类型是表格节点时，基于移动终端的屏幕宽度和所确定的各个节点的节点显示宽度，修改各个节点的节点类型和节点CSS属性包括：

在所述节点的节点显示宽度不大于所述移动终端的屏幕宽度时，保持所述节点的节点类型和节点CSS属性不变；以及

在所述节点的节点显示宽度大于所述移动终端的屏幕宽度时，将所述节点自身及子节点的节点类型从表格节点修改为普通节点，并且将所述节点自身及子节点中的经过节点类型修改后的表格单元的样式修改为display:inline-block。

7.如权利要求1所述的页面排版方法，其中，基于移动终端的屏幕宽度和所确定的各个节点的节点显示宽度，修改各个节点的节点类型和节点CSS属性还包括：

在所述节点的节点CSS属性中包含有允许被限制输出的CSS样式时，将所述节点CSS属性修改为禁止输出所述CSS样式。

8.一种表格节点显示宽度确定方法，包括：

遍历所述表格节点的所有行，确定各行中包含的表格单元的显示宽度；

将各行中的所有表格单元的显示宽度相加，计算出各行的行显示宽度；

从所计算出的各行的行显示宽度中选择最大的行显示宽度，作为所述表格节点的节点显示宽度。

9.如权利要求8所述的表格节点显示宽度确定方法，其中，确定表格单元的显示宽度包括：

确定该表格单元的所有叶节点的样式类型和显示宽度；

按照将样式类型为行内元素的连续叶节点的显示宽度相加以及其它叶节点的显示宽度保持不变的方式，对该表格单元的所有叶节点的显示宽度进行处理；以及

从经过处理后的显示宽度中选择最大的显示宽度，作为该表格单元的显示宽度。

10.一种页面排版装置，包括：

解析单元，用于在接收到基于移动终端发出的网页加载请求而从目标服务器获取的网页数据后，将所述网页数据解析成与所述网页数据对应的DOM树及对应的节点CSS属性，其中，所述网页加载请求与移动终端的屏幕宽度信息一起发送给中间件服务器；

节点显示宽度确定单元，用于遍历所述DOM树，确定所述DOM树中各个节点的节点显示宽度；

类型和属性修改单元，用于基于移动终端的屏幕宽度和所确定的各个节点的节点显示宽度，修改各个节点的节点类型和节点CSS属性；以及

网页页面生成单元，用于根据所述DOM树以及修改后的各个节点的节点CSS属性，生成经过适屏排版处理后的网页页面，以供发送给移动终端来进行浏览。

11.如权利要求10所述的页面排版装置，其中，所述节点包括文本节点、图片节点和表格节点，所述节点显示宽度确定单元包括：

表格节点显示宽度确定模块，用于确定表格节点的节点显示宽度，以及

文本及图片节点显示宽度确定模块，用于根据文本宽度计算方法或图片宽度计算方法计算节点显示宽度。

12.如权利要求11所述的页面排版装置，其中，所述表格节点显示宽度确定模块包括：

表格单元显示宽度确定模块，用于遍历所述表格节点的所有行，确定各行中包含的表格单元的显示宽度；

行显示宽度计算模块，用于将各行中的所有表格单元的显示宽度相加，计算出各行的行显示宽度；以及

第一选择模块，用于从所计算出的各行的行显示宽度中选择最大的行显示宽度，作为所述表格节点的节点显示宽度。

13.如权利要求12所述的页面排版装置，其中，所述表格单元显示宽度确定模块包括：

样式类型及显示宽度确定模块，用于确定该表格单元的所有叶节点的样式类型和显示宽度；

显示宽度处理模块，用于按照将样式类型为行内元素的连续叶节点的显示宽度相加以及其它叶节点的显示宽度保持不变的方式，对该表格单元的所有叶节点的显示宽度进行处理；以及

第二选择模块，用于从经过处理后的显示宽度中选择最大的显示宽度，作为该表格单元的显示宽度。

14.如权利要求11所述的页面排版装置，其中，在所述节点的类型是表格节点时，所述类型和属性修改单元被配置为：

在所述节点的节点显示宽度不大于所述移动终端的屏幕宽度时，保持所述节点的节点类型和节点CSS属性不变；以及

在所述节点的节点显示宽度大于所述移动终端的屏幕宽度时，将所述节点自身及子节点的节点类型从表格节点修改为普通节点，并且将所述节点自身及子节点中的经过节点类型修改后的表格单元的样式修改为display:inline-block。

15.一种页面排版系统，包括：

移动终端；

中间件服务器，包括如权利要求10-14中任何一个所述的页面排版装置；以及

目标网页内容服务器，用于存储网页内容数据。