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

文档序号:9471400阅读:来源:国知局
断子单元U801,用于判断一行排版η个浮动元素后,所述行的右方是否存在空白;
[0144]第六执行子单元U802,与第三判断子单元U801连接,用于当所述行的右方存在空白时,将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值;
[0145]第四判断子单元U803,与第六执行子单元U802连接,用于当所述行的右方存在空白时,将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后,判断所述行的右方的空白是否大于一个或多个所述浮动元素的宽度;
[0146]第七执行子单元U804,与第四判断子单元U803连接,用于当所述行的右方的空白大于一个或多个所述浮动元素的宽度时,在所述行的右方的空白中加入一个或多个所述浮动元素。
[0147]本申请实施例提供的一种网页适应屏幕排版装置,通过计算网页排版树中各个节点的宽度,对节点的宽度小于或等于智能终端屏幕的节点,保留其原样式,并按标准流程排版;对节点的宽度大于智能终端屏幕的节点,则修改所述节点的样式,限制所述节点的宽度,并按适应屏幕规则排版,使所述节点的显示能够适应屏幕,并具有美观的效果和视觉体验。从而在保证网页页面适应屏幕的基础上更多地保留页面原来的布局、样式和风格,而且由于只改动一部分节点,简化了结构,节省了排版资源,总体上不容易与标准流程冲突,适用于各种页面写法的排版。
[0148]为了描述的方便,描述以上装置时以功能分为各种单元分别描述。当然,在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
[0149]本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于装置实施例而言,由于其基本相似于方法实施例,所以描述得比较简单,相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。
[0150]本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述,例如程序模块。一般地,程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请,在这些分布式计算环境中,由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中,程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
[0151 ] 需要说明的是,在本文中,诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、装置、单元或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、装置、单元或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、装置、单元或者设备中还存在另外的相同要素。
[0152] 以上所述仅是本申请的【具体实施方式】,使本领域技术人员能够理解或实现本申请。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的,本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下,在其它实施例中实现。因此,本申请将不会被限制于本文所示的这些实施例,而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。
【主权项】
1.一种网页适应屏幕排版方法,其特征在于,包括: 计算网页排版树中各个节点的宽度; 判断各个节点的宽度是否小于或等于屏幕宽度;以及 如果节点的宽度小于或等于屏幕宽度,则保留所述节点的原样式,并对所述节点按标准流程排版,否则,修改所述节点的样式,并对所述节点按适应屏幕规则排版。2.如权利要求1所述的网页适应屏幕排版方法,其特征在于,所述计算网页排版树中各个节点的宽度,包括: 遍历网页排版树的节点; 判断各个节点的层叠样式表中是否设置了宽度值; 如果节点的层叠样式表中设置了宽度值,以所述节点的层叠样式表的宽度为节点的宽度; 如果节点的层叠样式表中未设置宽度值,则查找所述节点的所有子节点,以宽度最大的子节点的宽度为所述节点的宽度,所述子节点的宽度为所述子节点的层叠样式表的宽度; 如果节点的层叠样式表中未设置宽度值,且所述节点的所有子节点中的层叠样式表中未设置宽度值,则设置所述节点的宽度小于或等于屏幕的宽度。3.如权利要求1所述的网页适应屏幕排版方法,其特征在于,所述修改节点的样式,包括: 修改节点的层叠样式表的宽度值和最大宽度值,使所述层叠样式表的宽度值和最大宽度值小于屏幕宽度; 修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率,使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值。4.如权利要求1所述的网页适应屏幕排版方法,其特征在于,所述适应屏幕规则排版,包括: 以修改节点的样式后所述节点的元素内容的高度为所述节点的排版高度,按所述节点的排版高度进行排版; 动态拉伸浮动元素,所述动态拉伸浮动元素为:在一行中排版η个浮动元素后,当所述行的右方存在空白时,将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后,判断所述行的右方的空白是否大于一个或多个所述浮动元素的宽度,当所述行的右方的空白大于一个或多个所述浮动元素的宽度时,在所述行的右方的空白中加入一个或多个所述浮动元素,其中,η为按标准流程排版时,一行中排版的所述浮动元素的个数。5.一种网页适应屏幕排版装置,其特征在于,包括: 计算单元,用于计算网页排版树中各个节点的宽度; 第一判断单元,用于判断各个节点的宽度是否小于或等于屏幕宽度; 第一执行单元,用于当节点的宽度小于或等于屏幕宽度时,保留所述节点的原样式,并对所述节点按标准流程排版; 第二执行单元,用于当节点的宽度大于屏幕宽度时,修改所述节点的样式,并对所述节点按适应屏幕规则排版。6.如权利要求5所述的网页适应屏幕排版装置,其特征在于,所述计算单元,包括: 第一执行子单元,用于遍历网页排版树的节点; 第一判断子单元,用于判断各个节点的层叠样式表中是否设置了宽度值; 第二执行子单元,用于当节点的层叠样式表中设置了宽度值时,以所述节点的层叠样式表的宽度为节点的宽度; 第三执行子单元,用于当节点的层叠样式表中未设置宽度值时,查找所述节点的所有子节点; 第二判断子单元,用于判断所述节点的所有子节点的层叠样式表中是否都未设置宽度值; 第四执行子单元,用于当所述节点的所有子节点的层叠样式表中都未设置宽度值时,设置所述节点的宽度小于或等于屏幕的宽度; 第五执行子单元,用于当有所述节点的子节点的层叠样式表中设置了宽度值时,以宽度最大的所述子节点的宽度为所述节点的宽度。7.如权利要求5所述的网页适应屏幕排版装置,其特征在于,所述第二执行单元包括: 样式修改子单元,用于修改节点的样式; 适应屏幕规则排版子单元,用于对节点按适应屏幕规则排版。8.如权利要求7所述的网页适应屏幕排版装置,其特征在于,所述修改样式子单元包括: 宽度修改子单元,用于修改节点的层叠样式表的宽度值和最大宽度值,使所述层叠样式表的宽度值和最大宽度值小于屏幕宽度; 边距修改子单元,修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率,使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值。9.如权利要求7所述的网页适应屏幕排版装置,其特征在于,所述适应屏幕规则排版子单元,包括: 高度排版子单元,用于以修改节点的样式后所述节点的元素内容的高度为所述节点的排版高度,按所述节点的排版高度进行排版; 动态拉伸子单元,用于动态拉伸浮动元素。10.如权利要求9所述的网页适应屏幕排版装置,其特征在于,所述动态拉伸子单元,包括: 第三判断子单元,用于判断一行排版η个浮动元素后,所述行的右方是否存在空白; 第六执行子单元,用于当所述行的右方存在空白时,将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值; 第四判断子单元,用于当所述行的右方存在空白时,将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后,判断所述行的右方的空白是否大于一个或多个所述浮动元素的宽度; 第七执行子单元,用于当所述行的右方的空白大于一个或多个所述浮动元素的宽度时,在所述行的右方的空白中加入一个或多个所述浮动元素, 其中,η为按标准流程排版时,一行中排版的所述浮动元素的个数。
【专利摘要】本申请公开了一种网页适应屏幕排版方法及装置。本申请实施例通过计算排版树每个节点的宽度,对节点的宽度大于智能终端屏幕的节点,限制这些节点的宽度,修改这些节点的样式,并按适应屏幕规则排版;对节点的宽度小于或等于智能终端屏幕的节点,不做样式处理,并按标准流程排版,保留其原样式。从而保证网页页面在适应屏幕的基础上更多地保留页面的原样式,使页面显示有更好的效果和视觉体验,并且本申请只对宽度大于屏幕的节点采用适应屏幕规则排版,因而总体上不易与标准流程冲突,降低了各种页面写法之间因为难以兼容造成的问题。
【IPC分类】G06F17/30
【公开号】CN105224564
【申请号】CN201410290310
【发明人】许国庆
【申请人】广州市动景计算机科技有限公司
【公开日】2016年1月6日
【申请日】2014年6月25日
【公告号】WO2015196822A1
当前第4页1 2 3 4 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1