CN105224564A - 一种网页适应屏幕排版方法及装置 - Google Patents

Abstract

本申请公开了一种网页适应屏幕排版方法及装置。本申请实施例通过计算排版树每个节点的宽度，对节点的宽度大于智能终端屏幕的节点，限制这些节点的宽度，修改这些节点的样式，并按适应屏幕规则排版；对节点的宽度小于或等于智能终端屏幕的节点，不做样式处理，并按标准流程排版，保留其原样式。从而保证网页页面在适应屏幕的基础上更多地保留页面的原样式，使页面显示有更好的效果和视觉体验，并且本申请只对宽度大于屏幕的节点采用适应屏幕规则排版，因而总体上不易与标准流程冲突，降低了各种页面写法之间因为难以兼容造成的问题。

Description

一种网页适应屏幕排版方法及装置

技术领域

本发明涉及网页排版技术领域，特别是涉及一种网页适应屏幕排版方法及装置。

背景技术

随着智能手机与平板电脑等移动终端的普及和移动网络技术的快速发展，使用移动终端上网已成为人们生活的常态。但目前网站的网页主要针对电脑屏幕进行设计，当用户使用移动终端浏览网站时，由于移动终端屏幕尺寸的限制，网页显示常常出现变形、杂乱、内容丢失等情况，极大降低了用户的浏览体验。

为使网页在移动终端上正常显示，提高用户的体验，浏览器通常将网页的所有网页元素进行样式修改后，按所有网页元素不超过一个屏幕宽度的标准将内容组织成数据流进行排版，然而这种方法仅对图片和文字有较好的展现，网页原有的布局和样式则被完全破坏，失去了原有网页的排版特性。

发明内容

本申请实施例中提供了一种网页适应屏幕排版方法及装置，以解决相关网页排版技术不能保留原网页布局和样式的问题。

为了解决上述技术问题，本申请实施例公开了如下技术方案：

根据本申请实施例的第一方面，提供一种网页适应屏幕排版方法，包括：

计算网页排版树中各个节点的宽度；

判断各个节点的宽度是否小于或等于屏幕宽度；以及

如果节点的宽度小于或等于屏幕宽度，则保留所述节点的原样式，并对所述节点按标准流程排版，否则，修改所述节点的样式，并对所述节点按适应屏幕规则排版。

可选的，所述计算网页排版树中各个节点的宽度，包括：

遍历网页排版树的节点；

判断各个节点的层叠样式表中是否设置了宽度值；

如果节点的层叠样式表中设置了宽度值，以所述节点的层叠样式表的宽度为节点的宽度；

如果节点的层叠样式表中未设置宽度值，则查找所述节点的所有子节点，以宽度最大的子节点的宽度为所述节点的宽度，所述子节点的宽度为所述子节点的层叠样式表的宽度；

如果节点的层叠样式表中未设置宽度值，且所述节点的所有子节点中的层叠样式表中未设置宽度值，则设置所述节点的宽度小于或等于屏幕的宽度。

可选的，所述修改节点的样式，包括：

修改节点的层叠样式表的宽度值和最大宽度值，使所述层叠样式表的宽度值和最大宽度值小于屏幕宽度；

修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率，使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值。

可选的，所述适应屏幕规则排版，包括：

以修改节点的样式后所述节点的元素内容的高度为所述节点的排版高度，按所述节点的排版高度进行排版；

动态拉伸浮动元素，所述动态拉伸浮动元素为：在一行中排版n个浮动元素后，当所述行的右方存在空白时，将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后，判断所述行的右方的空白是否大于一个或多个所述浮动元素的宽度，当所述行的右方的空白大于一个或多个所述浮动元素的宽度时，在所述行的右方的空白中加入一个或多个所述浮动元素，其中，n为按标准流程排版时，一行中排版的所述浮动元素的个数。

根据本申请实施例的第二方面，提供一种网页适应屏幕排版装置，包括：

计算单元，用于计算网页排版树中各个节点的宽度；

第一判断单元，用于判断各个节点的宽度是否小于或等于屏幕宽度；

第一执行单元，用于当节点的宽度小于或等于屏幕宽度时，保留所述节点的原样式，并对所述节点按标准流程排版；

第二执行单元，用于当节点的宽度大于屏幕宽度时，修改所述节点的样式，并对所述节点按适应屏幕规则排版。

可选的，所述计算单元，包括：

第一执行子单元，用于遍历网页排版树的节点；

第一判断子单元，用于判断各个节点的层叠样式表中是否设置了宽度值；

第二执行子单元，用于当节点的层叠样式表中设置了宽度值时，以所述节点的层叠样式表的宽度为节点的宽度；

第三执行子单元，用于当节点的层叠样式表中未设置宽度值时，查找所述节点的所有子节点；

第二判断子单元，用于判断所述节点的所有子节点的层叠样式表中是否都未设置宽度值；

第四执行子单元，用于当所述节点的所有子节点的层叠样式表中都未设置宽度值时，设置所述节点的宽度小于或等于屏幕的宽度；

第五执行子单元，用于当有所述节点的子节点的层叠样式表中设置了宽度值时，以宽度最大的所述子节点的宽度为所述节点的宽度。

可选的，所述第二执行单元包括：

样式修改子单元，用于修改节点的样式；

适应屏幕规则排版子单元，用于对节点按适应屏幕规则排版。

可选的，所述修改样式子单元包括：

宽度修改子单元，用于修改节点的层叠样式表的宽度值和最大宽度值，使所述层叠样式表的宽度值和最大宽度值小于屏幕宽度；

边距修改子单元，修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率，使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值。

可选的，所述适应屏幕规则排版子单元，包括：

高度排版子单元，用于以修改节点的样式后所述节点的元素内容的高度为所述节点的排版高度，按所述节点的排版高度进行排版；

动态拉伸子单元，用于动态拉伸浮动元素。

可选的，所述动态拉伸子单元，包括：

第三判断子单元，用于判断一行排版n个浮动元素后，所述行的右方是否存在空白；

第六执行子单元，用于当所述行的右方存在空白时，将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值；

第四判断子单元，用于当所述行的右方存在空白时，将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后，判断所述行的右方的空白是否大于一个或多个所述浮动元素的宽度；

第七执行子单元，用于当所述行的右方的空白大于一个或多个所述浮动元素的宽度时，在所述行的右方的空白中加入一个或多个所述浮动元素，

其中，n为按标准流程排版时，一行中排版的所述浮动元素的个数。

本申请实施例公开的技术方案，计算排版树每个节点的宽度，对节点的宽度大于智能终端屏幕的节点，限制所述节点的宽度，修改所述节点的样式，并按适应屏幕规则排版，使所述节点的显示能够适应屏幕；对节点的宽度小于或等于智能终端屏幕的节点，不做样式处理，并按标准流程排版，保留其原样式。本申请实施例公开的技术方案包括以下有益效果：

第一，在保证网页页面适应屏幕的基础上更多地保留页面原来的布局和样式，使页面显示有更好的效果和视觉体验；

第二，方案简单，且优化了各种网页页面写法之间的兼容。本方案保留了大量页面节点的原样式，只对宽度大于屏幕的节点修改样式并采用适应屏幕规则排版，因而总体上不容易与标准流程冲突，降低了各种页面写法之间因为难以兼容造成的问题。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种网页适应屏幕排版方法的流程示意图；

图2为图1所示的方法中计算网页排版树中各个节点的宽度的流程示意图；

图3为本申请实施例提供的一种网页适应屏幕排版装置的结构示意图；

图4为图3所示的装置中计算单元的结构示意图；

图5为图3所示的装置中第二执行单元的结构示意图；

图6为图5所示的第二执行单元中样式修改子单元的结构示意图；

图7为图5所示的第二执行单元中适应屏幕规则排版子单元的结构示意图；

图8为图7所示适应屏幕规则排版子单元中动态拉伸子单元的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

图1是本申请实施例提供的一种网页适应屏幕排版方法的流程示意图，如图1所示，所述方法包括以下步骤。

在步骤S101中，计算网页排版树中各个节点的宽度；

在步骤S102中，判断各个节点的宽度是否小于或等于屏幕宽度；

在步骤S103中，根据步骤S102的判断结果，如果节点的宽度小于或等于屏幕宽度，则保留所述节点的原样式，并对所述节点按标准流程排版；

在步骤S104中，根据步骤S102的判断结果，如果节点的宽度不小于或等于屏幕宽度，则修改所述节点的样式，并对所述节点按适应屏幕规则排版。

其中，移动终端浏览器对获取的网页资源中包含的页面元素进行解析，在根据所述解析生成排版树节点的过程中，计算各个节点的宽度，或者，在根据所述解析生成所有排版树节点后，遍历排版树，并计算各个节点的宽度。

在步骤S101中，计算网页排版树中各个节点的宽度，在一种可能的实施方式中，可以包括以下步骤：

遍历网页排版树的节点；

判断各个节点的层叠样式表中是否设置了宽度值；

如果节点的层叠样式表中设置了宽度值，以所述节点的层叠样式表的宽度为节点的宽度；

如果节点的层叠样式表中未设置宽度值，则查找所述节点的所有子节点，以宽度最大的子节点的宽度为所述节点的宽度，所述子节点的宽度为所述子节点的层叠样式表的宽度；

如果节点的层叠样式表中未设置宽度值，且所述节点的所有子节点的层叠样式表中未设置宽度值，则设置所述节点的宽度小于或等于屏幕的宽度。

图2为图1所示的方法中计算网页排版树中各个节点的宽度的流程示意图，图2所示的步骤与上述计算排版树中各个节点的宽度在一种可能的实施方式中的步骤对应。如图2所示，在一种可能的实施方式中，计算排版树中各个节点的宽度，可以包括：

在步骤S201中，遍历网页排版树的节点；

在步骤S202中，判断各个节点的层叠样式表中是否设置了宽度值；

在步骤S203中，当节点的层叠样式表中设置了宽度值时，以所述节点的层叠样式表的宽度为节点的宽度；

在步骤S204中，当节点的层叠样式表中未设置宽度值时，查找所述节点的所有子节点；

在步骤S205中，判断所述节点的所有子节点的层叠样式表中是否都未设置宽度值；

在步骤S206中，当步骤S205判断的结果为所述节点的所有子节点的层叠样式表中都未设置宽度值时，设置所述节点的宽度小于或等于屏幕的宽度；

在步骤S207中，当步骤S205判断的结果为有所述节点的子节点的层叠样式表中设置了宽度值时，以宽度最大的子节点的宽度为所述节点的宽度。

其中，步骤S206中，设置所述节点的宽度小于或等于屏幕的宽度，使所述节点的宽度值为一个小于或等于屏幕宽度的宽度值，对所述节点按标准流程排版。

其中，步骤S207中，当所述节点的子节点中存在层叠样式表中设置了宽度值的子节点，则将层叠样式表中设置了宽度值的子节点中，宽度最大的子节点的宽度作为所述节点的宽度。在子节点中寻找宽度最大的子节点可以采用常规的寻找最大值的循环方法，例如，设置中间变量max，查找所述节点的所有子节点，在查找所述节点的所有子节点的过程中，将第一个在层叠样式表中设置了宽度值的子节点的宽度作为max的初值；在之后的查找过程中，将层叠样式表中设置了宽度值的子节点的宽度与max进行比较，如果所述子节点的宽度小于max，则保持max的值不变，如果所述子节点的宽度大于或等于max，则令max等于所述子节点的宽度；以此类推，直至查找完毕所述节点的所有子节点，设置节点的宽度为max，所述max即为宽度最大的子节点的宽度。由于设置节点的宽度在于确定节点的宽度的大小，因此不必要知道查找的过程中最大的宽度对应于节点的哪个子节点，但知道最大的宽度对应于节点的哪个子节点，并不影响本申请的原理。

在另一种可能的实施方式中，如果是在根据所述解析生成排版树节点的过程中计算各个节点的宽度，则当某个节点的层叠样式表中未设置宽度值时，继续向下逐层解析所述节点的子节点，以宽度最大的子节点的宽度为所述节点的宽度，所述子节点的宽度为所述子节点的层叠样式表的宽度；如果所述节点的子节点全部解析完毕，而所有所述节点的子节点的层叠样式表中皆未设置宽度值，则设置所述节点的宽度小于或等于屏幕的宽度。

在步骤S103中，根据步骤S102的判断结果，如果节点的宽度小于或等于屏幕宽度，则保留所述节点的原样式，并对所述节点按标准流程排版。

在步骤S104中，根据步骤S102的判断结果，如果节点的宽度不小于或等于屏幕宽度，则修改所述节点的样式，并对所述节点按适应屏幕规则排版。

步骤S104中修改所述节点的样式可以包括但不局限于下述规则：

修改节点的层叠样式表的宽度值和最大宽度值，使所述层叠样式表的宽度值和最大宽度值小于或等于屏幕宽度。在网页排版中，节点的层叠样式表的尺寸属性包括宽度、最大宽度和最小宽度等，其中，层叠样式表的宽度用于设置元素内容区的宽度，并用于确定对象的实际宽度；层叠样式表的最大宽度用于限制元素宽度的最大值，防止元素的溢出，并与层叠样式表的最小宽度一起，用于防止网页页面因过大或过小而产生变形。本申请公开的实施例中，如果节点的宽度大于屏幕的宽度，则修改节点的层叠样式表的宽度值，使层叠样式表的宽度值小于屏幕宽度，也就是说元素内容区的宽度不超过屏幕宽度，从而使元素内容在显示时不会超出屏幕。并修改节点的层叠样式表的最大宽度值，使层叠样式表中的最大宽度值小于屏幕宽度，从而进一步防止元素在显示时溢出屏幕或发生变形。如果设置节点的层叠样式表的宽度等于屏幕宽度，则会造成部分显示内容紧靠屏幕，影响视觉体验，因此优选的是设置节点的层叠样式表的宽度小于屏幕的宽度。层叠样式表的最小宽度默认小于层叠样式表的宽度，因此不赘述层叠样式表的最小宽度的设置。

修改节点中层叠样式表的填充属性和边距属性的分辨率，使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值。层叠样式表中，元素的实际宽度由元素内容的宽度、边框属性、填充属性以及边距属性的和确定。其中，边框属性的值通常很小，因此可以不考虑边框属性的调整；填充属性是元素内容和边框之间的间隔；边距属性是一个元素和另一个元素之间的间隔。填充属性和边距属性用于将元素分块显示。

修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率，使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值，从而防止元素内容在显示时四周有过多的空白，进一步扩大元素内容在屏幕上的显示空间，并避免填充属性和边距属性过大造成网页页面中文本内容折行的问题。填充属性的预设值和边距属性的预设值可以相同，也可以不同。对于目前大多数的手机屏幕而言，填充属性的预设值和边距属性的预设值可以都设为6px，使屏幕空白不过大也不过小，让用户有较好的视觉体验。填充属性的预设值和边距属性的预设值也可以根据当前用户使用的智能终端的屏幕大小确定，例如屏幕较大时，可以取较大的填充属性预设值和边距属性的预设值，屏幕较小时，可以取较小的填充属性预设值和边距属性预设值。

通过修改节点的层叠样式表的宽度值和最大宽度值，以及修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率，可以使元素内容的显示适应屏幕的宽度，避免溢出、内容显示不全和变形的问题。

在较佳的实施方式中，所述修改节点的样式，还可以包括：

设置所有元素的垂直对齐属性为baseline(元素放置在父元素的基线上)。即对所有元素设置统一的垂直对齐属性，且所述垂直对齐属性为baseline，垂直对齐属性的baseline值指将元素放置在父元素的基线上，从而使所有元素显示整齐，且防止由于元素的垂直对齐属性不一致造成的元素显示在垂直方向上的错乱。

过滤分辨率大于预设值的背景图。分辨率大于预设值的背景图在节点进行适应屏幕规则排版后也很难与前景的文本或上下文保持原有的协调效果，因而过滤分辨率大于预设图的背景图，避免页面显示效果的不协调，使页面显示更简洁，对分辨率小于预设值的背景图，则可以保留。对目前大多数的手机屏幕而言，所述预设值可以为240*300px，所述预设值也可以根据智能终端的屏幕大小进行设置。

限制文本元素的字体大小，使字体大小不超过字体预设值。所述限制文本元素的字体大小，包括：如果文本元素的字体大小小于或等于字体预设值，则不改变文本元素的字体大小，如果文本元素的字体大小大于字体预设值，则修改所述文本元素的字体大小，使所述文本字体大小等于字体预设值。限制文本元素的字体大小，可以防止字体太大造成折行后的重叠，对目前大多数的手机屏幕而言，字体预设值可以设为20号，使字体显示清晰，可视性好，同时避免造成折行，字体预设值也可以根据智能终端的屏幕大小进行设置。

设置所有文本元素的行高为所述文本元素的字号的1.6倍。将所有文本元素的行高设置为所述文本元素的字号的1.6倍，可以使文本的行间距适中，不会太紧密也不会太稀疏，提高文本显示的视觉体验。

设置所有文本元素的缩进为相同值。将所有文本元素的缩进设置为相同的值，可以使文本缩进统一，段落换行时可以更好的对齐，从而获得更好的显示效果。所述相同值可以为常规的文本缩进值，例如2px，也可以根据智能终端的屏幕大小确定。

设置文本元素为左对齐，设置图片元素为居中对齐。将文本元素和图片元素设置为统一且符合视觉美感的对齐格式，可以提高用户对图文显示的视觉体验。

在步骤S104中，所述适应屏幕规则排版可以包括但不局限于下述规则：

以修改节点的样式后所述节点的元素内容的高度为所述节点的排版高度，按所述节点的排版高度进行排版。修改节点的样式后，由于节点的宽度发生变化，即节点的元素内容的宽度发生变化，相应地可能会导致节点的元素内容的高度发生变化，因此按发生变化后的元素内容的高度为节点的排版高度，而非采用节点的层叠样式表的高度为节点的排版高度，从而保证元素内容在显示时不会出现缺失。

动态拉伸浮动(float)元素，所述动态拉伸浮动元素为：在一行中排版n个浮动元素后，当所述行的右方存在空白时，将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后，判断所述行的右方的空白是否大于一个或多个所述浮动元素的宽度，当所述行的右方的空白大于一个或多个所述浮动元素的宽度时，在所述行的右方的空白中加入一个或多个所述浮动元素。其中，n为按标准流程排版时，一行中排版的所述浮动元素的个数。浮动元素的属性包括宽度、最小宽度和最大宽度，将浮动元素的宽度值设置为其最小宽度值，可以将浮动元素的宽度缩小。只有满足所述行的右方的空白大于一个或多个所述浮动元素的宽度的条件时，在所述行的右方的空白中加入一个或多个所述浮动元素。当所述行的右方不存在空白时，或者当所述行的右方存在空白但所述行的右方的空白小于一个所述浮动元素的宽度时，对所述浮动元素的排版不作处理。

与上述动态拉伸浮动元素步骤相对应，所述动态拉伸浮动元素可以包括如下流程步骤：

(1)判断一行排版n个浮动元素后，所述行的右方是否存在空白；

(2)当步骤(1)的判断结果为所述行的右方存在空白时，将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值；

(3)在步骤(2)将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后，判断所述行的右方的空白是否大于一个或多个浮动元素的宽度；

(4)当步骤(3)的判断结果为所述行的右方的空白大于一个或多个浮动元素的宽度时，在所述行的右方的空白中加入一个或多个所述浮动元素。

其中，在一种可能的实施方式中，步骤(3)可以为：获取所述行的右方的空白的宽度值，以所述行的右方的空白的宽度值除以浮动元素的宽度值，对所得到的结果取整，判断取整的结果m是否大于或等于1；

相应地，步骤(4)为：当步骤(3)中判断的结果为m大于或等于1时，在所述行的右方的空白中加入m个浮动元素；

如果步骤(3)的判断结果为所述行的右方不存在空白，或者，如果步骤(3)中判断的结果为m小于1，则结束所述动态拉伸浮动元素流程，对所述浮动元素的排版不作处理。

通过动态拉伸浮动元素，可以扩大浮动元素的可显示区域，在一行中尽可能多的排版浮动元素，从而避免因为节点的样式修改后浮动元素出现折行造成显示混乱和不均匀，也避免屏幕上出现过多空白。

在较佳的实施方式中，所述适应屏幕规则排版，还可以包括：

展开所有的框架(Frame)和浮动框架(Iframe)元素。由于框架元素和浮动框架元素中通常嵌套了另一个页面，如果不展开这些元素，将难以查看被嵌套的页面。展开框架集(FrameSet)中所有的框架元素，以及所有页面中的浮动框架元素，从而显示框架元素和浮动框架元素中的所有内容，防止适应屏幕排版中无法显示被嵌套页面而造成内容缺失。

按行排版表格。对表格按行进行排版，而非按表格方式进行排版。所述按行排版表格为：将表格中同一行内的单元格按单元格本身的顺序在一个排版行中依次排版，并将在一个排版行中未排版完毕的单元格另起一个排版行继续排版；当表格中同一行的单元格排版完毕后，将表格中下一行的单元格另起一个排版行进行排版。

按行排版表格可以更好的使表格适应屏幕的大小，让表格可以完整有序地显示在屏幕上，防止表格内容丢失和单元格变形，以及防止节点的样式修改后表格内容出现重叠和错乱的情况。

去除多余的空白。所述去除多余的空白，包括：对于连续出现的多个空标签(<br>)，只保留一个空标签，删除其他空标签，从而压缩空行的高度；去掉段落标签(<p>)、单元格标签(<td>)和区块标签(<div>)内单独的空格(&nbsp)，所述去掉单独的空格为：当某一行中只有一个&nbsp而无其他元素或内容时，忽略此行，对此行不作排版。去除不必要的空白，可以使适应屏幕规则排版的效果更紧凑。

保持图片、视频和插件元素的长宽比。所述保持图片、视频和插件元素的长宽比为：获取图片、视频和插件元素的原始长宽比，当节点的样式修改后，分别按修改后的图片、视频和插件元素的宽度和自身的原始长宽比调整修改后的图片、视频和插件元素的高度，例如，图片原始的大小为400*600px，原始长宽比为3:2，节点的样式修改后，图片的宽度变为200px，则图片的高度相应地调整为300px，图片的大小调整为200*300px。

保持图片、视频和插件的长宽比，可以取得更好的显示效果，防止图片、视频和插件在显示时变形。

本申请实施例提供的一种网页适应屏幕排版方法，只对节点的宽度大于智能终端屏幕的节点，修改所述节点的样式，并按适应屏幕规则排版，使所述节点的显示能够适应屏幕，并具有美观的效果和视觉体验；而对节点的宽度小于或等于智能终端屏幕的节点，则保留其原样式，并按标准流程排版。从而在保证网页页面适应屏幕的基础上更多地保留页面原来的布局、样式和风格，而且由于只改动一部分节点，节省了排版资源，总体上不容易与标准流程冲突，适用于各种页面写法。通过以上的方法实施例的描述，所属领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：只读存储器(ROM)、随机存取存储器(RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

根据本申请实施例的第二方面，与本申请实施例提供的一种网页适应屏幕排版方法相对应，本申请实施例还提供了一种网页适应屏幕排版装置。图3为本申请实施例提供的一种网页适应屏幕排版装置的结构示意图，在一种可能的实施方式中，如图3所示，所述装置包括：

计算单元U301，用于计算网页排版树中各个节点的宽度；

第一判断单元U302，与计算单元U301连接，用于判断各个节点的宽度是否小于或等于屏幕宽度；

第一执行单元U303，与第一判断单元U302连接，用于当节点的宽度小于或等于屏幕宽度时，保留所述节点的原样式，并对所述节点按标准流程排版；

第二执行单元U304，与第一判断单元U302连接，用于当节点的宽度大于屏幕宽度时，修改所述节点的样式，并对所述节点按适应屏幕规则排版。

图4为图3所示的装置中计算单元的结构示意图。在一种可能的实施方式中，所述计算单元U301，如图4所示，包括：

第一执行子单元U401，用于遍历网页排版树的节点；

第一判断子单元U402，与第一执行子单元U401连接，用于判断各个节点的层叠样式表中是否设置了宽度值；

第二执行子单元U403，与第一判断子单元U402连接，用于当节点的层叠样式表中设置了宽度值时，以所述节点的层叠样式表的宽度为节点的宽度；

第三执行子单元U404，与第一判断子单元U402连接，用于当节点的层叠样式表中未设置宽度值时，查找所述节点的所有子节点；

第二判断子单元U405，与第三执行子单元U404连接，用于判断所述节点的所有子节点的层叠样式表中是否都未设置宽度值；

第四执行子单元U406，与第二判断子单元U405和第三执行子单元U404连接，用于当所述节点的所有子节点的层叠样式表中都未设置宽度值时，设置所述节点的宽度小于或等于屏幕的宽度；

第五执行子单元U407，与第二判断子单元U405和第三执行子单元U404连接，用于当有所述节点的子节点的层叠样式表中设置了宽度值时，以宽度最大的所述子节点的宽度为所述节点的宽度。

图5为图3所示的装置中第二执行单元的结构示意图。在一种可能的实施方式中，所述第二执行单元U304，如图5所示，包括：

样式修改子单元U501，用于修改节点的样式；

适应屏幕规则排版子单元U502，与样式修改子单元U501连接，用于对节点按适应屏幕规则排版。

图6为图5所示的第二执行单元中样式修改子单元的结构示意图。在一种可能的实施方式中，所述修改样式子单元，如图6所示，包括：

宽度修改子单元U601，用于修改节点的层叠样式表的宽度值和最大宽度值，使所述层叠样式表的宽度值和最大宽度值小于屏幕宽度；

边距修改子单元U602，修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率，使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值。

图7为图5所示的第二执行单元中适应屏幕规则排版子单元的结构示意图。在一种可能的实施方式中，所述适应屏幕规则排版子单元，如图7所示，包括：

高度排版子单元U701，用于以修改节点的样式后所述节点的元素内容的高度为所述节点的排版高度，按所述节点的排版高度进行排版；

动态拉伸子单元U702，用于动态拉伸浮动元素。

图8为图7所示适应屏幕规则排版子单元中动态拉伸子单元的结构示意图。在一种可能的实施方式中，所述动态拉伸子单元，如图8所示，包括：

第三判断子单元U801，用于判断一行排版n个浮动元素后，所述行的右方是否存在空白；

第六执行子单元U802，与第三判断子单元U801连接，用于当所述行的右方存在空白时，将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值；

第四判断子单元U803，与第六执行子单元U802连接，用于当所述行的右方存在空白时，将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后，判断所述行的右方的空白是否大于一个或多个所述浮动元素的宽度；

第七执行子单元U804，与第四判断子单元U803连接，用于当所述行的右方的空白大于一个或多个所述浮动元素的宽度时，在所述行的右方的空白中加入一个或多个所述浮动元素。

本申请实施例提供的一种网页适应屏幕排版装置，通过计算网页排版树中各个节点的宽度，对节点的宽度小于或等于智能终端屏幕的节点，保留其原样式，并按标准流程排版；对节点的宽度大于智能终端屏幕的节点，则修改所述节点的样式，限制所述节点的宽度，并按适应屏幕规则排版，使所述节点的显示能够适应屏幕，并具有美观的效果和视觉体验。从而在保证网页页面适应屏幕的基础上更多地保留页面原来的布局、样式和风格，而且由于只改动一部分节点，简化了结构，节省了排版资源，总体上不容易与标准流程冲突，适用于各种页面写法的排版。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、装置、单元或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、装置、单元或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、装置、单元或者设备中还存在另外的相同要素。

以上所述仅是本申请的具体实施方式，使本领域技术人员能够理解或实现本申请。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种网页适应屏幕排版方法，其特征在于，包括：

计算网页排版树中各个节点的宽度；

判断各个节点的宽度是否小于或等于屏幕宽度；以及

如果节点的宽度小于或等于屏幕宽度，则保留所述节点的原样式，并对所述节点按标准流程排版，否则，修改所述节点的样式，并对所述节点按适应屏幕规则排版。

2.如权利要求1所述的网页适应屏幕排版方法，其特征在于，所述计算网页排版树中各个节点的宽度，包括：

遍历网页排版树的节点；

判断各个节点的层叠样式表中是否设置了宽度值；

如果节点的层叠样式表中设置了宽度值，以所述节点的层叠样式表的宽度为节点的宽度；

如果节点的层叠样式表中未设置宽度值，则查找所述节点的所有子节点，以宽度最大的子节点的宽度为所述节点的宽度，所述子节点的宽度为所述子节点的层叠样式表的宽度；

如果节点的层叠样式表中未设置宽度值，且所述节点的所有子节点中的层叠样式表中未设置宽度值，则设置所述节点的宽度小于或等于屏幕的宽度。

3.如权利要求1所述的网页适应屏幕排版方法，其特征在于，所述修改节点的样式，包括：

修改节点的层叠样式表的宽度值和最大宽度值，使所述层叠样式表的宽度值和最大宽度值小于屏幕宽度；

修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率，使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值。

4.如权利要求1所述的网页适应屏幕排版方法，其特征在于，所述适应屏幕规则排版，包括：

以修改节点的样式后所述节点的元素内容的高度为所述节点的排版高度，按所述节点的排版高度进行排版；

动态拉伸浮动元素，所述动态拉伸浮动元素为：在一行中排版n个浮动元素后，当所述行的右方存在空白时，将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后，判断所述行的右方的空白是否大于一个或多个所述浮动元素的宽度，当所述行的右方的空白大于一个或多个所述浮动元素的宽度时，在所述行的右方的空白中加入一个或多个所述浮动元素，其中，n为按标准流程排版时，一行中排版的所述浮动元素的个数。

5.一种网页适应屏幕排版装置，其特征在于，包括：

计算单元，用于计算网页排版树中各个节点的宽度；

第一判断单元，用于判断各个节点的宽度是否小于或等于屏幕宽度；

第一执行单元，用于当节点的宽度小于或等于屏幕宽度时，保留所述节点的原样式，并对所述节点按标准流程排版；

第二执行单元，用于当节点的宽度大于屏幕宽度时，修改所述节点的样式，并对所述节点按适应屏幕规则排版。

6.如权利要求5所述的网页适应屏幕排版装置，其特征在于，所述计算单元，包括：

第一执行子单元，用于遍历网页排版树的节点；

第一判断子单元，用于判断各个节点的层叠样式表中是否设置了宽度值；

第二执行子单元，用于当节点的层叠样式表中设置了宽度值时，以所述节点的层叠样式表的宽度为节点的宽度；

第三执行子单元，用于当节点的层叠样式表中未设置宽度值时，查找所述节点的所有子节点；

第二判断子单元，用于判断所述节点的所有子节点的层叠样式表中是否都未设置宽度值；

第四执行子单元，用于当所述节点的所有子节点的层叠样式表中都未设置宽度值时，设置所述节点的宽度小于或等于屏幕的宽度；

第五执行子单元，用于当有所述节点的子节点的层叠样式表中设置了宽度值时，以宽度最大的所述子节点的宽度为所述节点的宽度。

7.如权利要求5所述的网页适应屏幕排版装置，其特征在于，所述第二执行单元包括：

样式修改子单元，用于修改节点的样式；

适应屏幕规则排版子单元，用于对节点按适应屏幕规则排版。

8.如权利要求7所述的网页适应屏幕排版装置，其特征在于，所述修改样式子单元包括：

宽度修改子单元，用于修改节点的层叠样式表的宽度值和最大宽度值，使所述层叠样式表的宽度值和最大宽度值小于屏幕宽度；

边距修改子单元，修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率，使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值。

9.如权利要求7所述的网页适应屏幕排版装置，其特征在于，所述适应屏幕规则排版子单元，包括：

高度排版子单元，用于以修改节点的样式后所述节点的元素内容的高度为所述节点的排版高度，按所述节点的排版高度进行排版；

动态拉伸子单元，用于动态拉伸浮动元素。

10.如权利要求9所述的网页适应屏幕排版装置，其特征在于，所述动态拉伸子单元，包括：

第三判断子单元，用于判断一行排版n个浮动元素后，所述行的右方是否存在空白；

第六执行子单元，用于当所述行的右方存在空白时，将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值；

第四判断子单元，用于当所述行的右方存在空白时，将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后，判断所述行的右方的空白是否大于一个或多个所述浮动元素的宽度；

第七执行子单元，用于当所述行的右方的空白大于一个或多个所述浮动元素的宽度时，在所述行的右方的空白中加入一个或多个所述浮动元素，

其中，n为按标准流程排版时，一行中排版的所述浮动元素的个数。