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

文档序号:9471400阅读:来源:国知局
068]其中,移动终端浏览器对获取的网页资源中包含的页面元素进行解析,在根据所述解析生成排版树节点的过程中,计算各个节点的宽度,或者,在根据所述解析生成所有排版树节点后,遍历排版树,并计算各个节点的宽度。
[0069]在步骤SlOl中,计算网页排版树中各个节点的宽度,在一种可能的实施方式中,可以包括以下步骤:
[0070]遍历网页排版树的节点;
[0071]判断各个节点的层叠样式表中是否设置了宽度值;
[0072]如果节点的层叠样式表中设置了宽度值,以所述节点的层叠样式表的宽度为节点的宽度;
[0073]如果节点的层叠样式表中未设置宽度值,则查找所述节点的所有子节点,以宽度最大的子节点的宽度为所述节点的宽度,所述子节点的宽度为所述子节点的层叠样式表的览度;
[0074]如果节点的层叠样式表中未设置宽度值,且所述节点的所有子节点的层叠样式表中未设置宽度值,则设置所述节点的宽度小于或等于屏幕的宽度。
[0075]图2为图1所示的方法中计算网页排版树中各个节点的宽度的流程示意图,图2所示的步骤与上述计算排版树中各个节点的宽度在一种可能的实施方式中的步骤对应。如图2所示,在一种可能的实施方式中,计算排版树中各个节点的宽度,可以包括:
[0076]在步骤S201中,遍历网页排版树的节点;
[0077]在步骤S202中,判断各个节点的层叠样式表中是否设置了宽度值;
[0078]在步骤S203中,当节点的层叠样式表中设置了宽度值时,以所述节点的层叠样式表的宽度为节点的宽度;
[0079]在步骤S204中,当节点的层叠样式表中未设置宽度值时,查找所述节点的所有子节点;
[0080]在步骤S205中,判断所述节点的所有子节点的层叠样式表中是否都未设置宽度值;
[0081]在步骤S206中,当步骤S205判断的结果为所述节点的所有子节点的层叠样式表中都未设置宽度值时,设置所述节点的宽度小于或等于屏幕的宽度;
[0082]在步骤S207中,当步骤S205判断的结果为有所述节点的子节点的层叠样式表中设置了宽度值时,以宽度最大的子节点的宽度为所述节点的宽度。
[0083]其中,步骤S206中,设置所述节点的宽度小于或等于屏幕的宽度,使所述节点的宽度值为一个小于或等于屏幕宽度的宽度值,对所述节点按标准流程排版。
[0084]其中,步骤S207中,当所述节点的子节点中存在层叠样式表中设置了宽度值的子节点,则将层叠样式表中设置了宽度值的子节点中,宽度最大的子节点的宽度作为所述节点的宽度。在子节点中寻找宽度最大的子节点可以采用常规的寻找最大值的循环方法,例如,设置中间变量max,查找所述节点的所有子节点,在查找所述节点的所有子节点的过程中,将第一个在层叠样式表中设置了宽度值的子节点的宽度作为max的初值;在之后的查找过程中,将层叠样式表中设置了宽度值的子节点的宽度与max进行比较,如果所述子节点的宽度小于max,则保持max的值不变,如果所述子节点的宽度大于或等于max,则令max等于所述子节点的宽度;以此类推,直至查找完毕所述节点的所有子节点,设置节点的宽度为max,所述max即为宽度最大的子节点的宽度。由于设置节点的宽度在于确定节点的宽度的大小,因此不必要知道查找的过程中最大的宽度对应于节点的哪个子节点,但知道最大的宽度对应于节点的哪个子节点,并不影响本申请的原理。
[0085]在另一种可能的实施方式中,如果是在根据所述解析生成排版树节点的过程中计算各个节点的宽度,则当某个节点的层叠样式表中未设置宽度值时,继续向下逐层解析所述节点的子节点,以宽度最大的子节点的宽度为所述节点的宽度,所述子节点的宽度为所述子节点的层叠样式表的宽度;如果所述节点的子节点全部解析完毕,而所有所述节点的子节点的层叠样式表中皆未设置宽度值,则设置所述节点的宽度小于或等于屏幕的宽度。
[0086]在步骤S103中,根据步骤S102的判断结果,如果节点的宽度小于或等于屏幕宽度,则保留所述节点的原样式,并对所述节点按标准流程排版。
[0087]在步骤S104中,根据步骤S102的判断结果,如果节点的宽度不小于或等于屏幕宽度,则修改所述节点的样式,并对所述节点按适应屏幕规则排版。
[0088]步骤S104中修改所述节点的样式可以包括但不局限于下述规则:
[0089]修改节点的层叠样式表的宽度值和最大宽度值,使所述层叠样式表的宽度值和最大宽度值小于或等于屏幕宽度。在网页排版中,节点的层叠样式表的尺寸属性包括宽度、最大宽度和最小宽度等,其中,层叠样式表的宽度用于设置元素内容区的宽度,并用于确定对象的实际宽度;层叠样式表的最大宽度用于限制元素宽度的最大值,防止元素的溢出,并与层叠样式表的最小宽度一起,用于防止网页页面因过大或过小而产生变形。本申请公开的实施例中,如果节点的宽度大于屏幕的宽度,则修改节点的层叠样式表的宽度值,使层叠样式表的宽度值小于屏幕宽度,也就是说元素内容区的宽度不超过屏幕宽度,从而使元素内容在显示时不会超出屏幕。并修改节点的层叠样式表的最大宽度值,使层叠样式表中的最大宽度值小于屏幕宽度,从而进一步防止元素在显示时溢出屏幕或发生变形。如果设置节点的层叠样式表的宽度等于屏幕宽度,则会造成部分显示内容紧靠屏幕,影响视觉体验,因此优选的是设置节点的层叠样式表的宽度小于屏幕的宽度。层叠样式表的最小宽度默认小于层叠样式表的宽度,因此不赘述层叠样式表的最小宽度的设置。
[0090]修改节点中层叠样式表的填充属性和边距属性的分辨率,使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值。层叠样式表中,元素的实际宽度由元素内容的宽度、边框属性、填充属性以及边距属性的和确定。其中,边框属性的值通常很小,因此可以不考虑边框属性的调整;填充属性是元素内容和边框之间的间隔;边距属性是一个元素和另一个元素之间的间隔。填充属性和边距属性用于将元素分块显示。
[0091]修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率,使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值,从而防止元素内容在显示时四周有过多的空白,进一步扩大元素内容在屏幕上的显示空间,并避免填充属性和边距属性过大造成网页页面中文本内容折行的问题。填充属性的预设值和边距属性的预设值可以相同,也可以不同。对于目前大多数的手机屏幕而言,填充属性的预设值和边距属性的预设值可以都设为6px,使屏幕空白不过大也不过小,让用户有较好的视觉体验。填充属性的预设值和边距属性的预设值也可以根据当前用户使用的智能终端的屏幕大小确定,例如屏幕较大时,可以取较大的填充属性预设值和边距属性的预设值,屏幕较小时,可以取较小的填充属性预设值和边距属性预设值。
[0092]通过修改节点的层叠样式表的宽度值和最大宽度值,以及修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率,可以使元素内容的显示适应屏幕的宽度,避免溢出、内容显示不全和变形的问题。
[0093]在较佳的实施方式中,所述修改节点的样式,还可以包括:
[0094]设置所有元素的垂直对齐属性为baseline (元素放置在父元素的基线上)。即对所有元素设置统一的垂直对齐属性,且所述垂直对齐属性为baseline,垂直对齐属性的baseline值指将元素放置在父元素的基线上,从而使所有元素显示整齐,且防止由于元素的垂直对齐属性不一致造成的元素显示在垂直方向上的错乱。
[0095]过滤分辨率大于预设值的背景图。分辨率大于预设值的背景图在节点进行适应屏幕规则排版后也很难与前景的文本或上下文保持原有的协调效果,因而过滤分辨率大于预设图的背景图,避免页面显示效果的不协调,使页面显示更简洁,对分辨率小于预设值的背景图,则可以保留。对目前大多数的手机屏幕而言,所述预设值可以为240*300px,所述预设值也可以根据智能终端的屏幕大小进行设置。
[0096]限制文本元素的字体大小,使字体大小不超过字体预设值。所述限制文本元素的字体大小,包括:如果文本元素的字体大小小于或等于字体预设值,则不改变文本元素的字体大小,如果文本元素的字体大小大于字体预设值,则修改所述文本元素的字体大小,使所述文本字体大小等于字体预设值。限制文本元素的字体大小,可以防止字体太大造成折行后的重叠,对目前大多数的手机屏幕而言,字体预设值可以设为20号,使字体显示清晰,可视性好,同时避免造成折行,字体预设值也可以根据智能终端的屏幕大小进行设置。
[0097]设置所有文本元素的行高为所述文本元素的字号的1.6倍。将所有文本元素的行高设置为所述文本元素的字号的1.6倍,可以使文本的行间距适中,不会太紧密也不会太稀疏,提高文本显示的视觉体验。
[0098]设置所有文本元素的缩进为相同值。将所有文本元素的缩进设置为相同的值,可以使文本缩进统一,段落换行时可以更好的对齐,从而获得更好的显示效果。所述相同值可以为常规的文本缩进值,例如2px,也可以根据智能终端的屏幕大小确定。
[0099]设置文本元素为左对齐,设置图片元素为居中对齐。将文本元素和图片元素设置为统一且符合视觉美感的对齐格式,可以提高用户对图文显示的视觉体验。
[0100]在步骤S104中,所述适应屏幕规则排版可以包括但不局限于下述规则:
[0101]以修改节点的样式后所述节点的元素内容的高度为所述节点的排版高度,按所述节点的排版高度进行排版。修改节点的样式后,由于节点的宽度发生变化,即节点的元素内容的宽度发生变化,相应地可能会导致节点的元素内容的高度发生变化,因此按发生变化后的元素内容的高度为节点的排版高度,而非采用节点的层叠样式表的高度为节点的排版高度,从而保证元素内容在显示时不会出现缺失。
当前第2页1 2 3 4 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1