本公开实施例涉及窗口渲染技术领域,尤其涉及一种窗口渲染方法、装置、计算结设备及存储介质。
背景技术:
在移动终端的许多应用中,会开发弹窗来进行页面的显示,一般的,弹窗的页面尺寸与移动终端的页面尺寸不一致,通常弹窗的页面尺寸小于移动终端的页面尺寸。
现有的利用原始设计稿对页面内的弹窗进行渲染时,会根据弹窗内部读到的设备独立尺寸来进行渲染,这样渲染出来的图片尺寸与移动终端的页面尺寸相同。由于弹窗页面尺寸小于移动终端的页面尺寸,当页面内容比较多时,可能会出现弹窗显示出来的页面内容不完整的问题。
技术实现要素:
本公开提供一种窗口渲染方法、装置、计算机设备及存储介质,使得通过弹窗渲染出来的页面与弹窗尺寸相匹配。
第一方面,本公开实施例提供了一种窗口渲染方法,所述方法包括:
确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;
根据所述基准页面尺寸、所述基准窗口尺寸和所述目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸;
根据所述目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染。
第二方面,本公开实施例还提供了一种窗口渲染装置,所述装置包括:
目标页面尺寸确定模块,用于确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;
目标窗口尺寸确定模块,用于根据所述基准页面尺寸、所述基准窗口尺寸和所述目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸;
渲染模块,用于根据所述目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染。
第三方面,本公开实施例还提供了一种计算机设备,包括:
一个或多个处理装置;
存储装置,用于存储一个或多个程序;
当一个或多个程序被一个或多个处理装置执行,使得一个或多个处理装置实现如本公开任一实施例所述的窗口渲染方法。
第四方面,本公开实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现如本公开任一实施例所述的窗口渲染方法。
本公开实施例通过确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;根据基准页面尺寸、基准窗口尺寸和目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸;根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染,克服了根据读到的设备独立尺寸对弹窗进行渲染所导致弹窗内容可能显示不完整的问题,通过利用弹窗尺寸对弹窗页面进行渲染,使得通过弹窗渲染出来的页面与弹窗尺寸相匹配。
附图说明
结合附图并参考以下具体实施方式,本公开各实施例的上述和其他特征、优点及方面将变得更加明显。贯穿附图中,相同或相似的附图标记表示相同或相似的元素。应当理解附图是示意性的,原件和元素不一定按照比例绘制。
图1为本公开实施例一提供的一种窗口渲染方法的流程图;
图2为本公开实施例二提供的一种窗口渲染方法的流程图;
图3为本公开实施例三提供的一种窗口渲染方法的流程图;
图4为本公开实施例四提供的一种窗口渲染方法的流程图;
图5为本公开实施例五提供的一种窗口渲染装置的结构示意图;
图6为本公开实施例六提供的一种计算机设备的结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例,然而应当理解的是,本公开可以通过各种形式来实现,而且不应该被解释为限于这里阐述的实施例,相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是,本公开的附图及实施例仅用于示例性作用,并非用于限制本公开的保护范围。
应当理解,本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行,和/或并行执行。此外,方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。
本文使用的术语“包括”及其变形是开放性包括,即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”;术语“另一实施例”表示“至少一个另外的实施例”;术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。
需要注意,本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分,并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
需要注意,本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的,本领域技术人员应当理解,除非在上下文另有明确指出,否则应该理解为“一个或多个”。
本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的,而并不是用于对这些消息或信息的范围进行限制。
实施例一
图1为本公开实施例一提供的一种窗口渲染方法的流程图。本实施例可适用于页面中有窗口弹出的情况,该方法可以由窗口渲染装置来执行,该装置可以采用软件和/或硬件的方式实现,该装置可以配置于计算机设备中。如图1所示,该方法可以包括如下步骤:
s110、确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸。
本实施例中的页面优选可以是移动终端中所要显示的h5页面,h5页面为遵循html5标准规范的页面,其中,移动终端优选可以是手机、平板电脑等。本实施例中的尺寸可以是宽度和/或高度,其中,宽度和高度均可以由设备独立像素的数目或物理像素的数目来表示。示例性的,基准页面尺寸可以包括基准页面宽度和/或基准页面高度,基准窗口尺寸可以包括基准窗口宽度和/或基准窗口高度,目标页面尺寸可以包括目标页面宽度和/或目标页面高度。
在对目标页面进行渲染之前,通常会预先选定一个基准页面尺寸作为标准尺寸,基于该标准尺寸设计待渲染的页面初稿,并利用该页面初稿以及基准页面尺寸与目标页面尺寸之间的比例关系,对目标页面进行渲染。其中,目标页面优选可以是在目标移动终端中显示的与移动终端屏幕大小相当的页面,目标页面尺寸优选可以是目标移动终端屏幕的大小,基准页面尺寸优选可以是预先选定的移动终端屏幕的大小,而页面初稿优选可以是以基准页面尺寸为设计尺寸的页面。示例性的,目标页面为目标手机中显示的与目标手机屏幕尺寸相当的页面,目标页面尺寸可以是目标页面在宽度方向上的设备独立像素400px,基准页面尺寸可以是预先选定的第一手机屏幕在宽度方向上的设备独立像素375px,页面初稿对应的尺寸即为上述设备独立像素375px,根据基准页面尺寸与目标页面尺寸之间的比例关系,将页面初稿等比例放大400/375=1.1倍后,对目标页面进行渲染,得到与目标手机屏幕尺寸相匹配的目标页面。其中,目标页面中显示的内容与页面初稿中的内容相同,显示比例不同。
此外,还存在目标页面中设置有目标窗口(其中,目标窗口即弹窗)且对目标窗口进行渲染的情况。在对目标页面中的目标窗口进行渲染之前,优选可以基于标准尺寸(基准页面尺寸)设计待渲染的基准窗口初稿(即本实施例中的基准窗口页面),并利用该基准窗口初稿以及基准窗口尺寸与在目标窗口中读到的尺寸数据之间的比例关系,对目标页面进行渲染。在此需要说明的是,基准窗口在基准页面中所占的尺寸比例与目标窗口在目标页面中所占的尺寸比例相等。其中,基准窗口初稿优选可以是以基准页面尺寸为尺寸标准设计的,且与基准窗口尺寸大小相等的页面,基准窗口可以是预先设置的基准页面中的弹窗,基准窗口尺寸为该弹窗的尺寸。示例性的,基准窗口占基准页面宽度的1/5,基准页面尺寸可以是预先选定的第一手机屏幕在宽度方向上的设备独立像素375px,则基准窗口尺寸为预先选定的基准窗口在宽度方向上的设备独立像素75px,基准窗口初稿对应的尺寸即为上述设备独立像素75px,目标页面尺寸可以是目标页面在宽度方向上的设备独立像素400px,则在目标窗口中读到的尺寸数据也为设备独立像素400px。此时,如果根据基准窗口尺寸(75)与在目标窗口中读到的尺寸数据(400)之间的比例关系,对目标页面进行渲染,其得到的页面是与目标手机屏幕尺寸相匹配的页面,由于该页面的尺寸大于目标页面中目标窗口的尺寸,因此,该页面中的内容无法在目标窗口完全显示。
基于上述情况,本实施例在对目标窗口进行渲染之前,优选可以根据基准页面尺寸、基准窗口尺寸、目标页面尺寸和目标窗口尺寸之间的对应比例关系,确定目标窗口尺寸。
优选的,基准页面尺寸可以是预先选择确定的。基准窗口尺寸可以是根据实际需要预先设置确定的,也可以是预先确定基准窗口页面(基准窗口页面即上述基准窗口初稿),通过确定基准窗口页面的尺寸确定的,具体的,确定基准窗口尺寸可以包括:确定基准窗口页面的基准窗口页面尺寸,并将基准窗口页面尺寸作为基准窗口尺寸。目标页面尺寸可以通过目标终端的类型来确定,具体的,确定目标页面的目标页面尺寸可以包括:根据终端的操作系统和型号,确定目标页面所在终端的终端屏幕物理像素数目,并将终端屏幕物理像素数目作为目标页面尺寸,确定目标页面的目标页面尺寸还可以包括:根据终端的操作系统和型号,确定目标页面所在终端的终端屏幕设备独立像素数目,并将终端屏幕设备独立像素数目作为目标页面尺寸。
s120、根据基准页面尺寸、基准窗口尺寸和目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸。
本实施例中,优选可以根据基准页面尺寸、基准窗口尺寸、目标页面尺寸和目标窗口尺寸之间的对应比例关系“基准窗口尺寸/基准页面尺寸=目标窗口尺寸/目标页面尺寸”,确定目标窗口尺寸,优选还可以根据比例关系“基准窗口尺寸/目标窗口尺寸=基准页面尺寸/目标页面尺寸”,确定目标窗口尺寸,此外,比例关系还可以是上述比例关系的等价变形。在此需要说明的是,上述尺寸可以代指宽度,也可以代指长度,也可以代指高度,在同一个比例关系中,尺寸所代指的内容相同,即基准页面尺寸、基准窗口尺寸、目标页面尺寸和目标窗口尺寸之间的对应比例关系可以是“基准窗口宽度/基准页面宽度=目标窗口宽度/目标页面宽度”,也可以是“基准窗口高度/基准页面高度=目标窗口高度/目标页面高度”。
示例性的,若基准页面尺寸为基准页面宽度,基准窗口尺寸为基准窗口宽度,目标页面尺寸为目标页面宽度,则根据比例关系“基准窗口宽度/基准页面宽度=目标窗口宽度/目标页面宽度”可知,目标窗口宽度=(基准窗口宽度×目标页面宽度)/基准页面宽度。若基准页面尺寸为基准页面高度,基准窗口尺寸为基准窗口高度,目标页面尺寸为目标页面高度,则根据比例关系“基准窗口高度/基准页面高度=目标窗口高度/目标页面高度”可知,目标窗口高度=(基准窗口高度×目标页面高度)/基准页面高度。可以理解的是,目标窗口尺寸还可以根据其他等价变形的比例关系计算得到。
示例性的,基准页面宽度为设备独立像素375px,基准窗口宽度为设备独立像素75px,目标页面宽度为设备独立像素400px,则根据比例关系“基准窗口宽度/基准页面宽度=目标窗口宽度/目标页面宽度”可知,目标窗口宽度=(75×400)/375=80px。若基准页面高度为设备独立像素667px,基准窗口高度为设备独立像素134px,目标页面高度为设备独立像素640px,则根据比例关系“基准窗口高度/基准页面高度=目标窗口高度/目标页面高度”可知,目标窗口高度=(134×640)/667=129px。
s130、根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染。
本实施例中,优选根据目标窗口尺寸,将基准窗口页面渲染成目标窗口尺寸大小的页面。
在此需要说明的是,无论上述确定的目标窗口尺寸的单位是设备独立像素,还是物理像素,在进行渲染时,均需将目标窗口尺寸的单位转换为物理像素。示例性的,如果目标终端的目标页面对应的屏幕为2倍屏,则目标窗口宽度=80×2=160物理像素。
本实施例提供的一种窗口渲染方法,通过确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;根据基准页面尺寸、基准窗口尺寸和目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸;根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染,克服了根据读到的设备独立尺寸对弹窗进行渲染所导致弹窗内容可能显示不完整的问题,通过利用弹窗尺寸对弹窗页面进行渲染,使得通过弹窗渲染出来的页面与弹窗尺寸相匹配。
实施例二
图2为本公开实施例二提供的一种窗口渲染方法的流程图。本实施例可以与上述一个或者多个实施例中各个可选方案结合,在本实施例中,所述根据所述基准页面尺寸、所述基准窗口尺寸和所述目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸,包括:确定所述基准窗口尺寸与所述基准页面尺寸之间的窗口尺寸占比;根据所述目标页面尺寸和所述窗口尺寸占比,确定所述目标窗口尺寸。
如图2所示,该方法可以包括如下步骤:
s210、确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸。
s220、确定基准窗口尺寸与基准页面尺寸之间的窗口尺寸占比。
本实施例中,优选的,基准页面尺寸、基准窗口尺寸、目标页面尺寸和目标窗口尺寸之间的对应比例关系为“基准窗口尺寸/基准页面尺寸=目标窗口尺寸/目标页面尺寸”,则可以通过计算基准窗口尺寸与基准页面尺寸之间的比值,作为目标窗口在目标页面中的窗口尺寸占比。
优选的,确定基准窗口尺寸与基准页面尺寸之间的窗口尺寸占比,可以包括:计算基准窗口宽度与基准页面宽度之间的比值,并将比值作为窗口尺寸占比。优选的,计算基准窗口宽度与基准页面宽度之间的比值,可以包括:计算基准窗口的设备独立像素数目与基准页面的设备独立像素之间的比值;或,计算基准窗口的物理像素数目与基准页面的物理像素数目之间的比值。和/或,确定基准窗口尺寸与基准页面尺寸之间的窗口尺寸占比,可以包括:计算基准窗口高度与基准页面高度之间的比值,并将比值作为窗口尺寸占比。优选的,计算基准窗口高度与基准页面高度之间的比值,可以包括:计算基准窗口的设备独立像素数目与基准页面的设备独立像素之间的比值;或,计算基准窗口的物理像素数目与基准页面的物理像素数目之间的比值。
示例性的,基准页面宽度为设备独立像素375px,基准窗口宽度为设备独立像素75px,则窗口尺寸占比=75/375=1/5。基准页面宽度为物理像素750px,基准窗口宽度为物理像素150px,则窗口尺寸占比=150/750=1/5。
s230、根据目标页面尺寸和窗口尺寸占比,确定目标窗口尺寸。
优选的,可以根据目标页面宽度和窗口尺寸占比,确定目标窗口宽度,和/或可以根据目标页面高度和窗口尺寸占比,确定目标窗口高度。
示例性的,目标页面宽度为设备独立像素400px,则目标窗口宽度=400×1/5=80px。目标页面宽度为物理像素800px,则目标窗口宽度=800×1/5=160px。
s240、根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染。
本实施例提供的一种窗口渲染方法,通过确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;确定基准窗口尺寸与基准页面尺寸之间的窗口尺寸占比;根据目标页面尺寸和窗口尺寸占比,确定目标窗口尺寸;根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染,克服了根据读到的设备独立尺寸对弹窗进行渲染所导致弹窗内容可能显示不完整的问题,通过预设基准弹窗在预设基准页面中的弹窗占比,确定目标弹窗尺寸,利用目标弹窗尺寸对目标弹窗页面进行渲染,使得通过弹窗渲染出来的页面与弹窗尺寸相匹配。
实施例三
图3为本公开实施例三提供的一种窗口渲染方法的流程图。本实施例可以与上述一个或者多个实施例中各个可选方案结合,在本实施例中,所述根据所述基准页面尺寸、所述基准窗口尺寸和所述目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸,包括:
根据所述基准页面尺寸确定页面rem尺寸,根据所述基准窗口尺寸确定窗口rem尺寸;
根据所述目标页面尺寸、所述页面rem尺寸和所述窗口rem尺寸确定所述目标窗口尺寸。
以及,所述根据所述基准页面尺寸确定页面rem尺寸,根据所述基准窗口尺寸确定窗口rem尺寸,包括:
根据基准根元素和所述基准页面尺寸确定所述页面rem尺寸;
根据所述基准根元素和所述基准窗口尺寸确定所述窗口rem尺寸。
以及,所述根据所述目标页面尺寸、所述页面rem尺寸和所述窗口rem尺寸确定所述目标窗口尺寸,包括:
根据所述目标页面尺寸和所述页面rem尺寸确定目标根元素;
根据所述目标根元素和所述窗口rem尺寸确定目标窗口尺寸。
如图3所示,该方法可以包括如下步骤:
s310、确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸。
s320、根据基准页面尺寸确定页面rem尺寸,根据基准窗口尺寸确定窗口rem尺寸。
rem的全称为fontsizeoftherootelement,其是相对于根元素的大小单位,是一个相对单位。页面rem尺寸是相对于页面根元素的页面大小,窗口rem尺寸是相对于页面根元素的窗口大小。页面根元素为一个相对单位rem对应的页面像素数目,其中,页面像素数目可以是页面物理像素数目,也可以是页面设备独立像素数目。页面根元素可以在创建页面的过程中根据实际需要预先进行设置。示例性的,页面宽度对应的像素数目为500px,页面根元素为20px,则页面对应的页面rem尺寸为500/20=25rem。
优选的,根据基准页面尺寸确定页面rem尺寸,根据基准窗口尺寸确定窗口rem尺寸,包括:
根据基准根元素和基准页面尺寸确定页面rem尺寸;
根据基准根元素和基准窗口尺寸确定窗口rem尺寸。
本实施例中,可以预先设置基准页面对应的基准根元素,以基准根元素为均分步长,将基准页面尺寸(宽度或者高度)平均分成n份,其中,n为基准页面尺寸对应的页面rem尺寸,同理,以基准根元素为均分步长,将基准窗口尺寸(宽度或者高度)平均分成m份,其中,m为基准窗口尺寸对应的窗口rem尺寸
示例性的,基准页面宽度为设备独立像素375px,基准窗口宽度为设备独立像素75px,基准根元素为15px,则基准页面宽度对应的页面rem尺寸n为375/15=25rem,基准窗口宽度对应的窗口rem尺寸m=75/15=5rem。
s330、根据目标页面尺寸、页面rem尺寸和窗口rem尺寸确定目标窗口尺寸。
本实施例中,基准窗口对应的页面rem尺寸和目标页面对应的页面rem尺寸相等,基准窗口对应的窗口rem尺寸和目标页面对应的窗口rem尺寸相等。在已知目标页面尺寸、目标页面对应的页面rem尺寸和目标窗口对应的窗口rem尺寸之后,根据相应的比例关系,即可确定目标窗口的目标窗口尺寸。示例性的,相应的比例关系可以是目标页面尺寸/目标页面对应的页面rem尺寸=目标窗口尺寸/窗口rem尺寸,相应的比例关系还可以是前述比例关系的变化例等。
优选的,根据目标页面尺寸、页面rem尺寸和窗口rem尺寸确定目标窗口尺寸,包括:
根据目标页面尺寸和页面rem尺寸确定目标根元素;
根据目标根元素和窗口rem尺寸确定目标窗口尺寸。
示例性的,页面rem尺寸n为25rem,窗口rem尺寸m为5rem,目标页面宽度为设备独立像素400px,则目标根元素=400/25=16px,相应的,目标窗口尺寸为16×5=80设备独立像素。
s340、根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染。
本实施例提供的一种窗口渲染方法,通过确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;根据基准页面尺寸确定页面rem尺寸,根据基准窗口尺寸确定窗口rem尺寸;根据目标页面尺寸、页面rem尺寸和窗口rem尺寸确定目标窗口尺寸;根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染,克服了现有技术中根据读到的设备独立尺寸对弹窗进行渲染,所导致弹窗内容可能显示不完整的问题,通过引入rem尺寸确定目标弹窗尺寸,利用目标弹窗尺寸对目标弹窗页面进行渲染,使得通过弹窗渲染出来的页面与弹窗尺寸相匹配。
实施例四
图4为本公开实施例四提供的一种窗口渲染方法的流程图。本实施例可以与上述一个或者多个实施例中各个可选方案结合,在本实施例中,在所述确定所述基准窗口尺寸与所述基准页面尺寸之间的窗口尺寸占比之后,还包括:根据基准根元素和所述窗口尺寸占比,确定所述基准窗口尺寸对应的窗口rem尺寸;相应的,所述根据所述目标页面尺寸和所述窗口尺寸占比,确定所述目标窗口尺寸,包括:根据所述窗口rem尺寸和所述窗口尺寸占比,确定所述目标页面尺寸对应的页面rem尺寸;根据所述目标页面尺寸和所述页面rem尺寸,确定目标页面根元素;根据所述目标页面根元素和所述窗口rem尺寸,确定所述目标窗口尺寸。
如图4所示,该方法可以包括如下步骤:
s410、确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸。
s420、确定基准窗口尺寸与基准页面尺寸之间的窗口尺寸占比。
s430、根据基准根元素和窗口尺寸占比,确定基准窗口尺寸对应的窗口rem尺寸。
其中,基准根元素为一个相对长度单位rem对应的页面像素数目,其中,页面像素数目可以是页面物理像素数目,也可以是页面设备独立像素数目。基准根元素可以根据实际需求设定。本实施例中,以基准根元素为均分步长,将基准页面尺寸(宽度或者高度)平均分成n份,其中,n为基准页面尺寸对应的页面rem尺寸,根据窗口尺寸占比x可知,基准窗口对应的窗口rem尺寸m=n×x。
示例性的,基准页面宽度为设备独立像素375px,基准根元素为15px,则基准页面宽度对应的页面rem尺寸n为375/15=25rem,窗口尺寸占比x为1/5,则基准窗口宽度对应的窗口rem尺寸m=25×(1/5)=5rem。
s440、根据窗口rem尺寸和窗口尺寸占比,确定目标页面尺寸对应的页面rem尺寸。
上述确定的基准窗口对应的窗口rem尺寸m等于目标窗口对应的窗口rem尺寸y,优选的,可以利用目标窗口对应的窗口rem尺寸y和窗口尺寸占比x,确定目标页面尺寸对应的页面rem尺寸z=y/x。
示例性的,目标窗口宽度对应的窗口rem尺寸y为5rem,窗口尺寸占比x为1/5,则目标页面宽度对应的页面rem尺寸z=5/(1/5)=25rem。
在此需要说明的是,目标页面宽度对应的页面rem尺寸与基准页面宽度对应的页面rem尺寸相同。优选的,当基准页面宽度对应的页面rem尺寸确定后,可以直接确定目标页面宽度对应的页面rem尺寸。
s450、根据目标页面尺寸和页面rem尺寸,确定目标根元素。
示例性的,目标页面宽度对应的页面rem尺寸z为25rem,目标页面宽度为设备独立像素400,则目标根元素=400/25=16px。
s460、根据目标根元素和窗口rem尺寸,确定目标窗口尺寸。
根据目标根元素和目标窗口对应的窗口rem尺寸y,可以确定目标窗口尺寸。
示例性的,目标根元素为16px,目标窗口对应的窗口rem尺寸y为5rem,则目标窗口宽度=16×5=80设备独立像素。若目标手机的屏幕为2倍屏,则目标窗口宽度为80×2=160物理像素。
s470、根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染。
本实施例提供的一种窗口渲染方法,通过确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;确定基准窗口尺寸与基准页面尺寸之间的窗口尺寸占比;根据基准根元素和窗口尺寸占比,确定基准窗口尺寸对应的窗口rem尺寸;根据窗口rem尺寸和窗口尺寸占比,确定目标页面尺寸对应的页面rem尺寸;根据目标页面尺寸和页面rem尺寸,确定目标根元素;根据目标根元素和窗口rem尺寸,确定目标窗口尺寸;根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染,克服了根据读到的设备独立尺寸对弹窗进行渲染所导致弹窗内容可能显示不完整的问题,通过预设基准弹窗在预设基准页面中的弹窗占比,确定目标弹窗尺寸,利用目标弹窗尺寸对目标弹窗页面进行渲染,使得通过弹窗渲染出来的页面与弹窗尺寸始终相匹配。
实施例五
图5为本公开实施例五提供的一种窗口渲染装置的结构示意图。本实施例可适用于页面中有窗口弹出的情况。该装置可以采用软件和/或硬件的方式实现,该装置可以配置于计算机设备。如图5所示,该装置可以包括:
目标页面尺寸确定模块510,用于确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;
目标窗口尺寸确定模块520,用于根据基准页面尺寸、基准窗口尺寸和目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸;
渲染模块530,用于根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染。
本实施例提供的一种窗口渲染装置,通过尺寸确定模块确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;通过目标窗口尺寸确定模块根据基准页面尺寸、基准窗口尺寸和目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸;通过渲染模块根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染,克服了根据读到的设备独立尺寸对弹窗进行渲染所导致弹窗内容可能显示不完整的问题,通过利用弹窗尺寸对弹窗页面进行渲染,使得通过弹窗渲染出来的页面与弹窗尺寸相匹配。
在上述技术方案的基础上,进一步的,目标窗口尺寸确定模块520具体可以包括:
窗口尺寸占比确定单元,用于确定基准窗口尺寸与基准页面尺寸之间的窗口尺寸占比;
目标窗口尺寸确定单元,用于根据目标页面尺寸和窗口尺寸占比,确定目标窗口尺寸。
在上述技术方案的基础上,进一步的,窗口尺寸占比确定单元具体可以用于:
计算基准窗口宽度与基准页面宽度之间的比值,并将比值作为窗口尺寸占比;
目标窗口尺寸确定单元具体可以用于:
根据目标页面宽度和窗口尺寸占比,确定目标窗口宽度。
在上述技术方案的基础上,进一步的,窗口尺寸占比确定单元具体可以包括:
独立像素比值计算子单元,用于计算基准窗口的设备独立像素数目与基准页面的设备独立像素之间的比值;
或,物理像素比值计算子单元,用于计算基准窗口的物理像素数目与基准页面的物理像素数目之间的比值。
在上述技术方案的基础上,进一步的,目标页面尺寸确定模块510具体可以包括:
基准窗口尺寸确定单元,用于确定基准窗口页面的基准窗口页面尺寸,并将基准窗口页面尺寸作为基准窗口尺寸。
在上述技术方案的基础上,进一步的,目标页面尺寸确定模块510具体还可以包括:
目标页面尺寸确定单元,用于根据终端的操作系统和型号,确定目标页面所在终端的终端屏幕物理像素数目,并将终端屏幕物理像素数目作为目标页面尺寸。
在上述技术方案的基础上,进一步的,窗口渲染装置还包括基准rem尺寸确定模块,用于在确定基准窗口尺寸与基准页面尺寸之间的窗口尺寸占比之后,根据基准根元素和窗口尺寸占比,确定基准窗口尺寸对应的基准rem尺寸;
目标窗口尺寸确定单元具体可以用于:
根据基准rem尺寸和窗口尺寸占比,确定目标页面尺寸对应的目标页面rem尺寸;
根据目标页面尺寸和目标页面rem尺寸,确定目标页面根元素;
根据目标页面根元素和基准rem尺寸,确定目标窗口尺寸。
本公开实施例所提供的窗口渲染装置可执行本公开实施例所提供的窗口渲染方法,具备执行方法相应的功能模块和有益效果。
实施例六
下面参考图6,其示出了适于用来实现本公开实施例的计算机设备600的结构示意图。本公开实施例中的计算机设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、pda(个人数字助理)、pad(平板电脑)、pmp(便携式多媒体播放器)、车载终端(例如车载导航终端)等等。图6示出的计算机设备仅仅是一个示例,不应对本公开实施例的功能和使用范围带来任何限制。
如图6所示,计算机设备600可以包括处理装置(例如中央处理器、图形处理器等)601,其可以根据存储在只读存储器(rom)602中的程序或者从存储装置606加载到随机访问存储器(ram)603中的程序而执行各种适当的动作和处理。在ram603中,还存储有计算机设备600操作所需的各种程序和数据。处理装置601、rom602以及ram603通过总线604彼此相连。输入/输出(i/o)接口605也连接至总线604。
通常,以下装置可以连接至i/o接口605:包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置606;包括例如液晶显示器(lcd)、扬声器、振动器等的输出装置607;包括例如磁带、硬盘等的存储装置606;以及通信装置609。通信装置609可以允许计算机设备600与其他设备进行无线或有线通信以交换数据。虽然图6示出了具有各种装置的计算机设备600,但是应理解的是,并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地,根据本公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括一种计算机程序产品,其包括承载在非暂态计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信装置609从网络上被下载和安装,或者从存储装置606被安装,或者从rom602被安装。在该计算机程序被处理装置601执行时,执行本公开实施例的方法中限定的上述功能。
需要说明的是,本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中,计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:电线、光缆、rf(射频)等等,或者上述的任意合适的组合。
在一些实施方式中,客户端、服务器可以利用诸如http(hypertexttransferprotocol,超文本传输协议)之类的任何当前已知或未来研发的网络协议进行通信,并且可以与任意形式或介质的数字数据通信(例如,通信网络)互连。通信网络的示例包括局域网(“lan”),广域网(“wan”),网际网(例如,互联网)以及端对端网络(例如,adhoc端对端网络),以及任何当前已知或未来研发的网络。
上述计算机可读介质可以是上述计算机设备中所包含的;也可以是单独存在,而未装配入该计算机设备中。
上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被该计算机设备执行时,使得该计算机设备:确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;根据基准页面尺寸、基准窗口尺寸和目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸;根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码,上述程序设计语言包括但不限于面向对象的程序设计语言—诸如java、smalltalk、c ,还包括常规的过程式程序设计语言—诸如“c”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(lan)或广域网(wan)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图,图示了按照本公开各种实施例的方法、装置、计算机设备和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的模块、单元以及子单元可以通过软件的方式实现,也可以通过硬件的方式来实现。其中,模块、单元或者子单元的名称在某种情况下并不构成对该模块、单元或者子单元本身的限定,例如,渲染模块还可以被描述为“根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染的模块”,目标窗口尺寸确定单元还可以被描述为“根据目标页面尺寸和窗口尺寸占比,确定目标窗口尺寸的单元”。
本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如,非限制性地,可以使用的示范类型的硬件逻辑部件包括:现场可编程门阵列(fpga)、专用集成电路(asic)、专用标准产品(assp)、片上系统(soc)、复杂可编程逻辑设备(cpld)等等。
在本公开的上下文中,机器可读介质可以是有形的介质,其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备,或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦除可编程只读存储器(eprom或快闪存储器)、光纤、便捷式紧凑盘只读存储器(cd-rom)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
在一个方面,本公开实施例提供了一种窗口渲染方法,包括:
确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;
根据基准页面尺寸、基准窗口尺寸和目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸;
根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染。
在一些实施例中,根据基准页面尺寸、基准窗口尺寸和目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸,包括:
确定基准窗口尺寸与基准页面尺寸之间的窗口尺寸占比;
根据目标页面尺寸和窗口尺寸占比,确定目标窗口尺寸。
在一些实施例中,确定基准窗口尺寸与基准页面尺寸之间的窗口尺寸占比,包括:
计算基准窗口宽度与基准页面宽度之间的比值,并将比值作为窗口尺寸占比;
相应的,根据目标页面尺寸和窗口尺寸占比,确定目标窗口尺寸,包括:
根据目标页面宽度和窗口尺寸占比,确定目标窗口宽度。
在一些实施例中,计算基准窗口宽度与基准页面宽度之间的比值,包括:
计算基准窗口的设备独立像素数目与基准页面的设备独立像素之间的比值;
或,计算基准窗口的物理像素数目与基准页面的物理像素数目之间的比值。
在一些实施例中,所述根据所述基准页面尺寸、所述基准窗口尺寸和所述目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸,包括:
根据所述基准页面尺寸确定页面rem尺寸,根据所述基准窗口尺寸确定窗口rem尺寸;
根据所述目标页面尺寸、所述页面rem尺寸和所述窗口rem尺寸确定所述目标窗口尺寸。
在一些实施例中,所述根据所述基准页面尺寸确定页面rem尺寸,根据所述基准窗口尺寸确定窗口rem尺寸,包括:
根据基准根元素和所述基准页面尺寸确定所述页面rem尺寸;
根据所述基准根元素和所述基准窗口尺寸确定所述窗口rem尺寸。
在一些实施例中,所述根据所述目标页面尺寸、所述页面rem尺寸和所述窗口rem尺寸确定所述目标窗口尺寸,包括:
根据所述目标页面尺寸和所述页面rem尺寸确定目标根元素;
根据所述目标根元素和所述窗口rem尺寸确定目标窗口尺寸。
在一些实施例中,确定基准窗口尺寸,包括:
确定基准窗口页面的基准窗口页面尺寸,并将基准窗口页面尺寸作为基准窗口尺寸。
在一些实施例中,确定目标页面的目标页面尺寸,包括:
根据终端的操作系统和型号,确定目标页面所在终端的终端屏幕物理像素数目,并将终端屏幕物理像素数目作为目标页面尺寸。
在一些实施例中,在确定基准窗口尺寸与基准页面尺寸之间的窗口尺寸占比之后,还包括:
根据基准根元素和窗口尺寸占比,确定基准窗口尺寸对应的窗口rem尺寸;
相应的,根据目标页面尺寸和窗口尺寸占比,确定目标窗口尺寸,包括:
根据窗口rem尺寸和窗口尺寸占比,确定目标页面尺寸对应的页面rem尺寸;
根据目标页面尺寸和页面rem尺寸,确定目标根元素;
根据目标根元素和窗口rem尺寸,确定目标窗口尺寸。
在另一个方面,本公开实施例还提供了一种窗口渲染装置,包括:
目标页面尺寸确定模块,用于确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;
目标窗口尺寸确定模块,用于根据基准页面尺寸、基准窗口尺寸和目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸;
渲染模块,用于根据目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染。
在另一个方面,本公开实施例还提供了一种移动终端,包括:
一个或多个处理装置;
存储装置,用于存储一个或多个程序;
当一个或多个程序被一个或多个处理装置执行,使得一个或多个处理装置实现如上述示例中任一的窗口渲染方法。
在另一个方面,本公开实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现如上述示例中任一的窗口渲染方法。
以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解,本公开中所涉及的公开范围,并不限于上述技术特征的特定组合而成的技术方案,同时也应涵盖在不脱离上述公开构思的情况下,由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。
此外,虽然采用特定次序描绘了各操作,但是这不应当理解为要求这些操作以所示出的特定次序或以顺序次序执行来执行。在一定环境下,多任务和并行处理可能是有利的。同样地,虽然在上面论述中包含了若干具体实现细节,但是这些不应当被解释为对本公开的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实施例中。相反地,在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实施例中。
尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题,但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反,上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。
1.一种窗口渲染方法,其特征在于,包括:
确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;
根据所述基准页面尺寸、所述基准窗口尺寸和所述目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸;
根据所述目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染。
2.根据权利要求1所述的方法,其特征在于,所述根据所述基准页面尺寸、所述基准窗口尺寸和所述目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸,包括:
确定所述基准窗口尺寸与所述基准页面尺寸之间的窗口尺寸占比;
根据所述目标页面尺寸和所述窗口尺寸占比,确定所述目标窗口尺寸。
3.根据权利要求2所述的方法,其特征在于,所述确定所述基准窗口尺寸与所述基准页面尺寸之间的窗口尺寸占比,包括:
计算基准窗口宽度与基准页面宽度之间的比值,并将所述比值作为所述窗口尺寸占比;
相应的,根据所述目标页面尺寸和所述窗口尺寸占比,确定所述目标窗口尺寸,包括:
根据目标页面宽度和所述窗口尺寸占比,确定目标窗口宽度。
4.根据权利要求3所述的方法,其特征在于,所述计算基准窗口宽度与基准页面宽度之间的比值,包括:
计算所述基准窗口的设备独立像素数目与所述基准页面的设备独立像素之间的比值;
或,计算所述基准窗口的物理像素数目与所述基准页面的物理像素数目之间的比值。
5.根据权利要求1所述的方法,其特征在于,所述根据所述基准页面尺寸、所述基准窗口尺寸和所述目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸,包括:
根据所述基准页面尺寸确定页面rem尺寸,根据所述基准窗口尺寸确定窗口rem尺寸;
根据所述目标页面尺寸、所述页面rem尺寸和所述窗口rem尺寸确定所述目标窗口尺寸。
6.根据权利要求5所述的方法,其特征在于,所述根据所述基准页面尺寸确定页面rem尺寸,根据所述基准窗口尺寸确定窗口rem尺寸,包括:
根据基准根元素和所述基准页面尺寸确定所述页面rem尺寸;
根据所述基准根元素和所述基准窗口尺寸确定所述窗口rem尺寸。
7.根据权利要求6所述的方法,其特征在于,所述根据所述目标页面尺寸、所述页面rem尺寸和所述窗口rem尺寸确定所述目标窗口尺寸,包括:
根据所述目标页面尺寸和所述页面rem尺寸确定目标根元素;
根据所述目标根元素和所述窗口rem尺寸确定目标窗口尺寸。
8.根据权利要求1-7任一项所述的方法,其特征在于,确定基准窗口尺寸,包括:
确定所述基准窗口页面的基准窗口页面尺寸,并将所述基准窗口页面尺寸作为所述基准窗口尺寸。
9.根据权利要求1-7任一项所述的方法,其特征在于,确定目标页面的目标页面尺寸,包括:
根据终端的操作系统和型号,确定所述目标页面所在终端的终端屏幕物理像素数目,并将所述终端屏幕物理像素数目作为所述目标页面尺寸。
10.根据权利要求2-4任一项所述的方法,其特征在于,在所述确定所述基准窗口尺寸与所述基准页面尺寸之间的窗口尺寸占比之后,还包括:
根据基准根元素和所述窗口尺寸占比,确定所述基准窗口尺寸对应的窗口rem尺寸;
相应的,所述根据所述目标页面尺寸和所述窗口尺寸占比,确定所述目标窗口尺寸,包括:
根据所述窗口rem尺寸和所述窗口尺寸占比,确定所述目标页面尺寸对应的页面rem尺寸;
根据所述目标页面尺寸和所述页面rem尺寸,确定目标根元素;
根据所述目标根元素和所述窗口rem尺寸,确定所述目标窗口尺寸。
11.一种窗口渲染装置,其特征在于,包括:
目标页面尺寸确定模块,用于确定基准页面尺寸、基准窗口尺寸和目标页面的目标页面尺寸;
目标窗口尺寸确定模块,用于根据所述基准页面尺寸、所述基准窗口尺寸和所述目标页面尺寸,确定目标页面中的目标窗口的目标窗口尺寸;
渲染模块,用于根据所述目标窗口尺寸和基准窗口对应的基准窗口页面,对目标窗口进行渲染。
12.一种计算机设备,其特征在于,所述计算机设备包括:
一个或多个处理装置;
存储装置,用于存储一个或多个程序;
当所述一个或多个程序被所述一个或多个处理装置执行,使得所述一个或多个处理装置实现如权利要求1-10中任一所述的窗口渲染方法。
13.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该计算机程序被处理器执行时实现如权利要求1-10中任一所述的窗口渲染方法。
技术总结