一种网页适应屏幕排版方法及装置制造方法及图纸

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

【技术实现步骤摘要】

本专利技术涉及网页排版
，特别是涉及一种网页适应屏幕排版方法及装置。
技术介绍
随着智能手机与平板电脑等移动终端的普及和移动网络技术的快速发展，使用移动终端上网已成为人们生活的常态。但目前网站的网页主要针对电脑屏幕进行设计，当用户使用移动终端浏览网站时，由于移动终端屏幕尺寸的限制，网页显示常常出现变形、杂舌L、内容丢失等情况，极大降低了用户的浏览体验。为使网页在移动终端上正常显示，提高用户的体验，浏览器通常将网页的所有网页元素进行样式修改后，按所有网页元素不超过一个屏幕宽度的标准将内容组织成数据流进行排版，然而这种方法仅对图片和文字有较好的展现，网页原有的布局和样式则被完全破坏，失去了原有网页的排版特性。
技术实现思路
本申请实施例中提供了一种网页适应屏幕排版方法及装置，以解决相关网页排版技术不能保留原网页布局和样式的问题。为了解决上述技术问题，本申请实施例公开了如下技术方案:根据本申请实施例的第一方面，提供一种网页适应屏幕排版方法，包括:计算网页排版树中各个节点的宽度；判断各个节点的宽度是否小于或等于屏幕宽度；以及如果节点的宽度小于或等于屏幕宽度，则保留所述节点的原样式，并对所述节点按标准流程排版，否则，修改所述节点的样式，并对所述节点按适应屏幕规则排版。可选的，所述计算网页排版树中各个节点的宽度，包括:遍历网页排版树的节点；判断各个节点的层叠样式表中是否设置了宽度值；如果节点的层叠样式表中设置了宽度值，以所述节点的层叠样式表的宽度为节点的宽度；如果节点的层叠样式表中未设置宽度值，则查找所述节点的所有子节点，以宽度最大的子节点的宽度为所述节点的宽度，所述子节点的宽度为所述子节点的层叠样式表的览度;如果节点的层叠样式表中未设置宽度值，且所述节点的所有子节点中的层叠样式表中未设置宽度值，则设置所述节点的宽度小于或等于屏幕的宽度。可选的，所述修改节点的样式，包括:修改节点的层叠样式表的宽度值和最大宽度值，使所述层叠样式表的宽度值和最大宽度值小于屏幕宽度；修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率，使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值。可选的，所述适应屏幕规则排版，包括:以修改节点的样式后所述节点的元素内容的高度为所述节点的排版高度，按所述节点的排版高度进行排版；动态拉伸浮动元素，所述动态拉伸浮动元素为:在一行中排版η个浮动元素后，当所述行的右方存在空白时，将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后，判断所述行的右方的空白是否大于一个或多个所述浮动元素的宽度，当所述行的右方的空白大于一个或多个所述浮动元素的宽度时，在所述行的右方的空白中加入一个或多个所述浮动元素，其中，η为按标准流程排版时，一行中排版的所述浮动元素的个数。根据本申请实施例的第二方面，提供一种网页适应屏幕排版装置，包括:计算单元，用于计算网页排版树中各个节点的宽度；第一判断单元，用于判断各个节点的宽度是否小于或等于屏幕宽度；第一执行单元，用于当节点的宽度小于或等于屏幕宽度时，保留所述节点的原样式，并对所述节点按标准流程排版；第二执行单元，用于当节点的宽度大于屏幕宽度时，修改所述节点的样式，并对所述节点按适应屏幕规则排版。可选的，所述计算单元，包括:第一执行子单元，用于遍历网页排版树的节点；第一判断子单元，用于判断各个节点的层叠样式表中是否设置了宽度值；第二执行子单元，用于当节点的层叠样式表中设置了宽度值时，以所述节点的层叠样式表的宽度为节点的宽度；第三执行子单元，用于当节点的层叠样式表中未设置宽度值时，查找所述节点的所有子节点；第二判断子单元，用于判断所述节点的所有子节点的层叠样式表中是否都未设置宽度值；第四执行子单元，用于当所述节点的所有子节点的层叠样式表中都未设置宽度值时，设置所述节点的宽度小于或等于屏幕的宽度；第五执行子单元，用于当有所述节点的子节点的层叠样式表中设置了宽度值时，以宽度最大的所述子节点的宽度为所述节点的宽度。可选的，所述第二执行单元包括:样式修改子单元，用于修改节点的样式；适应屏幕规则排版子单元，用于对节点按适应屏幕规则排版。可选的，所述修改样式子单元包括:宽度修改子单元，用于修改节点的层叠样式表的宽度值和最大宽度值，使所述层叠样式表的宽度值和最大宽度值小于屏幕宽度；边距修改子单元，修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率，使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值。可选的，所述适应屏幕规则排版子单元，包括:高度排版子单元，用于以修改节点的样式后所述节点的元素内容的高度为所述节点的排版高度，按所述节点的排版高度进行排版；动态拉伸子单元，用于动态拉伸浮动元素。可选的，所述动态拉伸子单元，包括:第三判断子单元，用于判断一行排版η个浮动元素后，所述行的右方是否存在空白；第六执行子单元，用于当所述行的右方存在空白时，将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值；第四判断子单元，用于当所述行的右方存在空白时，将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后，判断所述行的右方的空白是否大于一个或多个所述浮动元素的宽度；第七执行子单元，用于当所述行的右方的空白大于一个或多个所述浮动元素的宽度时，在所述行的右方的空白中加入一个或多个所述浮动元素，其中，η为按标准流程排版时，一行中排版的所述浮动元素的个数。本申请实施例公开的技术方案，计算排版树每个节点的宽度，对节点的宽度大于智能终端屏幕的节点，限制所述节点的宽度，修改所述节点的样式，并按适应屏幕规则排版，使所述节点的显示能够适应屏幕；对节点的宽度小于或等于智能终端屏幕的节点，不做样式处理，并按标准流程排版，保留其原样式。本申请实施例公开的技术方案包括以下有益效果:第一，在保证网页页面适应屏幕的基础上更多地保留页面原来的布局和样式，使页面显示有更好的效果和视觉体验；第二，方案简单，且优化了各种网页页面写法之间的兼容。本方案保留了大量页面节点的原样式，只对宽度大于屏幕的节点修改样式并采用适应屏幕规则排版，因而总体上不容易与标准流程冲突，降低了各种页面写法之间因为难以兼容造成的问题。【附图说明】为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。图1为本申请实施例提供的一种网页适应屏幕排版方法的流程示意图；图2为图1所示的方法中计算网页排版树中各个节点的宽度的流程示意图；图3为本申请实施例提供的一种网页适应屏幕排版装置的结构示意图；图4为图3所示的装置中计算单元的结构示意图；图5为图3所示的装置中第二执行单元的结构示意图；图6为图5所示的第二执行单元中样式修改子单元的结构示意图；图7为图5所示的第二执行单元中适应屏幕规则排版子单元的结构示意图；图8为图7所示适应屏幕规则排版子单元中动态拉伸子单元的结构示意图。【具体实施方式】为了使本
的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不本文档来自技高网...

【技术保护点】
一种网页适应屏幕排版方法，其特征在于，包括：计算网页排版树中各个节点的宽度；判断各个节点的宽度是否小于或等于屏幕宽度；以及如果节点的宽度小于或等于屏幕宽度，则保留所述节点的原样式，并对所述节点按标准流程排版，否则，修改所述节点的样式，并对所述节点按适应屏幕规则排版。

【技术特征摘要】

【专利技术属性】
技术研发人员：许国庆，
申请(专利权)人：广州市动景计算机科技有限公司，
类型：发明
国别省市：广东;44