页面适配方法、装置、计算机设备及存储介质与流程

专利2022-05-09  74


本申请涉及计算机技术领域,具体涉及一种页面适配方法、装置、计算机设备及存储介质。



背景技术:

随着科技的发展,各种类型的电子设备越来越多,并且不同电子设备上的屏幕分辨率也各不相同。电子设备中的浏览器需要将web服务器中的文件解析并渲染成可视化的页面,那么为了使页面适配不同屏幕分辨率的电子设备,前端工程师往往需要根据一张页面针对不同的电子设备开发对应的版本,以使得页面内容可以完整、清晰地展示。

随着前端技术的模块化和工程化,各种相应的框架和方案也逐渐成熟,包括vue、react等框架都提供了组件化能力和脚手架工程,提高了模块化能力进而提高了开发效率。前端工程师根据页面设计稿开发出对应的页面后,通过调用接口获取数据填充到页面上,联调完成通过测试后,将前端代码打包部署发布到web服务器。

目前常见的页面适配方案包括栅格布局和媒体查询。栅格布局,是一种自适应布局,由栅格容器和栅格项目组成,能够根据不同的屏幕分辨率自动伸缩容器的尺寸,但该方式对于历史项目来说,需要修改原有代码,侵入性较大,且会增加额外的工作量,具有一定的改造成本。媒体查询,可通过获取到当前页面的视窗大小,根据当前视窗大小来应用相应的样式表,从而实现在不同分辨率下使页面内容自动适配,但该方式需要在页面开发时增加额外的javascript代码,如果需要适配较多不同屏幕分辨率的电子设备,前端工程师需要针对不同的电子设备和不同的屏幕分辨率增加对应的javascript代码,不仅工作量增多,后续的维护成本也会相应增加。



技术实现要素:

第一方面,本申请实施例提供了一种页面适配方法,可通过浏览器运行,可以根据不同的屏幕分辨率自动缩放并调整页面中的内容,以实现页面在不同分辨率的设备上的自动适配。

该页面分辨率适配方法可在不同设备上依据显示页面的窗口相较页面原始尺寸的变化情况,自动设置根元素适配尺寸,且依据根元素适配尺寸和根元素及子元素的相对尺寸设置子元素适配尺寸,在简化了适配流程的同时保证了页面的显示效果。且本申请实施例是选取当前窗口尺寸和页面原始尺寸中宽高变化较小的对应的缩放比作为变化情况的依据,以期达到防止过度拉伸导致显示页面中元素显示效果不佳的效果。

具体的,该方法包括:

获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号;

根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比,其中所述当前窗口尺寸包括窗口宽度和窗口高度,所述页面原始尺寸包括页面宽度和页面高度;

基于所述宽度变化比和所述高度变化比确定元素缩放比,根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号。

在一些实施例中,在“根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比”前,还包括步骤:判断所述当前窗口尺寸是否匹配所述页面原始尺寸,若不匹配则继续执行后续计算宽度变化比和高度变化比的步骤。也就是说,如果所述当前窗口尺寸恰好匹配所述页面原始尺寸,可以按照所述页面原始尺寸直接重新渲染所述页面。

另外,在所述页面第一次适配并渲染完毕后,若再次改变了所述当前窗口尺寸,仍然是需要根据改变后所述当前窗口尺寸和所述页面原始尺寸再次调整所述页面中的元素尺寸。因此,包括:在“获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号”前,包括步骤:监听显示页面的当前窗口尺寸是否改变,若改变则继续执行后续的获取步骤。也就是说,本申请实施例可在页面调整过程中可以不断及时地进行适配。具体的,“监听显示页面的当前窗口尺寸是否改变”的方法为:监听所述页面是否触发resize事件,若触发,则判定所述当前窗口尺寸发生改变,且若所述当前窗口尺寸和所述页面原始尺寸不同时,判断为不匹配。

其中,所述宽度变化比为:所述窗口宽度与所述页面宽度的差与所述页面宽度的比值的绝对值;所述高度变化比为:所述窗口高度与所述页面高度的差与所述页面高度的比值的绝对值。页面中的内容即为页面中的元素,为了防止过度拉伸所述页面中的元素从而导致元素变形或模糊的问题出现,在本申请实施例中,若所述宽度变化比大于所述高度变化比,所述窗口高度与所述页面高度的比值作为元素缩放比,否则所述窗口宽度与所述页面宽度的比值作为所述元素缩放比。然后根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号,可以尽量保证缩放后的元素显示清晰和完整。

页面中的元素包括根元素和子元素,在对页面中的所述根元素和所述子元素进行缩放后,需要对页面进行渲染。此时,本申请实施例可采用的手段包括:浏览器将页面文件转换为页面树,将叠层样式表转换为样式树,并将两者结合生成渲染树。所述浏览器再根据渲染树通过layout过程计算信息,包括所述根元素及其子元素的尺寸和位置,最后使用paint方法渲染所述页面。当然,这不作为渲染唯一的限制手段。

第二方面,基于相同的构思,本申请实施例还提供了一种页面适配装置,该装置包括:

获取模块,用于获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号;

适配模块,连接于所述获取模块,用于根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比,其中所述当前窗口尺寸包括窗口宽度和窗口高度,所述页面原始尺寸包括页面宽度和页面高度;

处理模块,连接于所述适配模块,用于基于所述宽度变化比和所述高度变化比确定元素缩放比,根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号。

第三方面,本申请实施例提出了一种计算机设备,所述计算机设备包括一个或多个处理器和一个或多个存储器,所述一个或多个存储器中存储有至少一条程序代码,所述至少一条程序代码由所述一个或多个处理器加载并执行以实现如上所述的页面适配方法所执行的操作。

第四方面,本申请实施例提出了一种存储介质,所述存储介质中存储有计算机程序,其中,所述计算机程序被设置为运行时执行如上所述的页面适配方法。

本申请实施例提出的一种页面适配方法、装置、计算机设备及存储介质,根据所述页面原始尺寸和所述当前窗口尺寸计算出宽度变化比和高度变化比,选择宽度和高度中变化较小的宽度缩放比或高度缩放比作为元素缩放比,使所述根元素的第一字号按照元素缩放比缩放为根元素的第二字号,进而根据所述根元素的第二字号调整页面中所有元素的尺寸,以实现自动适配不同屏幕分辨率的电子设备。

此外,本申请实施例实时监听所述当前窗口尺寸是否改变,根据改变后所述窗口的尺寸再次修改根元素的第一字号,进而缩放所述页面中所有元素的尺寸,使所述页面中的元素重新适配所述窗口的尺寸。

值得一提的是,本申请实施例相较传统的栅格布局方法而言,不需要改变历史项目中的数据,本申请实施例仅仅根据页面在当前窗口尺寸和页面原始尺寸的缩放比,通过调整根元素的第一字号来达到页面在不同设备或者不同窗口下的自动适配,具有侵入性小的效果。相较传统的媒体查询方法而言,不需要更改相应的样式表,进而也不需要额外设置javascript代码,可极大程度地减少开发人员的开发强度。且本申请实施例采用的适配方法可作为浏览器组件中加载在不同浏览器中自动执行,适配装置可以位于本地文件系统,也可以是位于远程服务器(如cdn),提高本申请实施例的适配性。

附图说明

图1是根据本申请实施例的页面适配方法流程图;

图2是根据本申请另一实施例的页面适配方法流程图;

图3根据本申请实施例的页面适配装置的应用系统架构图;

图4是根据本申请实施例的页面适配装置结构框图;

图5是根据本申请实施例的电子装置的硬件结构示意图;

图6是根据本申请实施例提供的渲染流程示意图。

具体实施方式

下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员所获得的所有其他实施例,都属于本申请保护的范围。

需要说明的是:在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中,其方法所包括的步骤可以比本说明书所描述的更多或更少。此外,本说明书中所描述的单个步骤,在其他实施例中可能被分解为多个步骤进行描述;而本说明书中所描述的多个步骤,在其他实施例中也可能被合并为单个步骤进行描述。

以一个原始尺寸为3840×1080的web页面为例,其宽高比为32:9,该web页面中包含顶部标题和四个容器,每个容器中分别展示了不同的图表,若用户希望在屏幕分辨率为2560×1440的电子设备上能够正常浏览所有文字效果及图表,此时本申请实施例可利用以上页面适配方法实现该效果。其中,页面原始尺寸为3840×1080,显示页面的当前窗口的分辨率为2560×1440,本申请实施例意欲说明的是,以上仅作为示例说明本申请实施例的构思原理,本申请实施例提供的页面适配方法的适用场景不限于以上。

为此,本实施例提供了一种页面适配方法,通过浏览器运行,可以根据不同的屏幕分辨率以及当前窗口尺寸自动缩放并调整页面中的内容。web页面为本实施例中的页面,其中,该web页面包含的顶部标题和四个容器及其中展示的图表为本实施例中页面的内容,即对应页面的元素。页面的元素又包括根元素和子元素,其中,页面中的根元素为html元素,子元素包括但不限于div、p、image等元素,具体的,子元素均位于根元素中,且顶部标题和四个容器均位于子元素中。具体而言,参照图1,图1是根据本申请实施例的页面适配方法流程图。

如图1所示,该方法包括以下步骤:

步骤s1:获取显示页面的当前窗口尺寸、页面原始尺寸及页面中的根元素的第一字号;

步骤s2:根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比,其中所述当前窗口尺寸包括窗口宽度和窗口高度,所述页面原始尺寸包括页面宽度和页面高度;

步骤s3:基于所述宽度变化比和所述高度变化比确定元素缩放比,根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号。

在本实施例中,根元素的第一字号为html元素中的默认字号,html元素中的默认字号即为在不对html元素另外设置字号的情况下,直接按照默认字号渲染文字。而子元素中可能包含各种容器、图表、文字等,那么子元素的尺寸即对应表示为容器的尺寸、图表的尺寸、文字的字号等。

另外,在一些实施例中,在步骤s2之前额外包括步骤:判断当前窗口尺寸是否匹配页面原始尺寸,若不匹配则继续执行后续计算宽度变化比和高度变化比的s2步骤。

本申请实施例提供的页面适配方法可加载在对应的适配装置中,适配装置可以是个浏览器组件,加载之后将会在浏览器端自动执行,也就使得本申请实施例可适配不同的设备以及不同的浏览器。

具体的,适配装置可以位于本地文件系统,也可以是位于远程服务器(如cdn);web页面可以采用引入一个script标签,并将该script标签的src属性设置为该适配装置具体位置的方式来加载适配装置;在本实施例中的适配装置为存放在浏览器本地文件系统的js文件,当然,js组件只是实现适配装置一种技术手段而非限制性要求;完全可以使用其他浏览器脚本技术(如coffeescript、dart、typescript等)实现适配装置。

在步骤s2中包括还步骤:获取页面的参数以及配置项,依据参数获取当前窗口尺寸及页面原始尺寸,并依据配置项获取根元素的第一字号。此时,用户可在适用的设备或浏览器界面自定义地输入参数以及配置项等信息。

依据配置项和参数可使得适配装置确定具体的适配方案,

具体的,在本申请实施例的一示例中,可在适配装置定义一个方法来接收web页面传递过来的参数及配置项并进行合并。通过以上的操作可使得适配装置获取页面中的根元素的第一字号、根元素与子元素的相对尺寸。

具体的,参数内至少记载当前窗口尺寸及页面原始尺寸,配置项中至少记载根元素的第一字号,还可以记载根元素与子元素的相对尺寸,通过配置项和参数进行页面中元素尺寸的批量转换,将页面中的所有元素转换为最终的适配尺寸。

具体的,在本申请实施例的步骤s2中,宽度变化比为当前窗口宽度与原始页面宽度的差值与原始页面宽度的比值的绝对值,高度变化比为当前窗口高度与原始页面高度的差值与原始页面高度的比值的绝对值。

在本申请实施例的实施例中,当前窗口尺寸为2560×1440,其中,窗口宽度为2560,窗口高度为1440。页面原始尺寸为3840×1080,其中,页面宽度为3840,页面高度为1080,对应的,可计算比宽度变化比为:(2560-3840)/3840=-0.33,取绝对值得到宽度变化比为0.33;高度变化比为:(1440-1080)/1080=0.33,此时,宽比变化比不大于高度变化比。

为了防止过度拉伸页面中的元素,从而导致元素变形或模糊,应选择宽度变化比和高度变化比中较小的对应的缩放比作为元素缩放比去缩放页面中的元素,可以尽量保证缩放后的元素显示清晰和完整。此时,宽度变化比与高度变化比相等,因此可以选择其中任一个对应的缩放比作为元素缩放比,因此,本申请实施例选择按照宽度缩放比来缩放根元素的第一字号。在另一些实施例中,若宽度变化比大于高度变化比,选择按照高度缩放比作为元素缩放比。具体的宽度缩放比为窗口宽度与页面宽度的比值,高度缩放比为窗口高度与页面高度的比值。然后用根元素的第一字号乘以元素缩放比得到根元素的第二字号。

具体的,在本申请实施例的步骤s3中,在“根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号”后,包括:获取所述根元素的第一字号与子元素的相对尺寸,以所述根元素的第二字号为基准,根据所述相对尺寸计算所述子元素的适配尺寸。这样的方式可极大程度地提高了适配的效率,即,不需要针对每个元素都进行复杂适配调整,仅根据子元素和根元素之间的关系进行调整即可。

且为了保证页面显示内容的完整性,在本申请实施例深度遍历页面,得到页面中的根元素的第一字号、根元素的第一字号与子元素的相对尺寸,将根元素第一字号缩放得到根元素的第二字号,并以根元素的第二字号为基准值,根据根元素的第一字号与子元素的相对尺寸重新计算子元素的适配尺寸。

另外,在该步骤中,第一字号与子元素的相对尺寸是通过遍历页面中的所有元素计算得到的,可以在遍历完成后将该相对尺寸缓存在浏览器中,以便于页面再次适配时直接调用,不用再重新遍历页面中的所有元素去计算。

如图2所示,图2展示了另一实施例的适配方法的流程图,在步骤s3之后额外包括步骤s4:基于所述根元素的第二字号和所述子元素的适配尺寸渲染页面。

具体的,如图6所示,在渲染步骤中,浏览器将页面文件转换为页面树,将叠层样式表转换为样式树,并将两者结合生成渲染树。所述浏览器再根据渲染树通过layout过程计算信息,包括所述根元素及其子元素的尺寸和位置,最后使用paint方法渲染页面。

在页面第一次适配并渲染完毕后,若再次改变了显示页面的窗口的尺寸,仍然是需要根据改变后窗口的尺寸和页面的原始尺寸再次调整页面中的元素的尺寸。因此,在步骤s1前,包括步骤:监听显示该页面的窗口的尺寸是否改变,若改变,继续执行后续步骤。其中,“监听显示该页面的窗口的尺寸是否改变”的方法为:监听页面是否触发resize事件,若触发,判定窗口的尺寸改变。

基于相同的构思,本实施例还提供了一种页面适配装置,是一种浏览器组件,通过浏览器运行。参考图3,图3根据本申请实施例的页面适配装置的应用系统架构图。如图3所示,浏览器将需要的参数和配置项发送给该装置,例如参数内至少记载当前窗口尺寸及页面原始尺寸,配置项中至少记载根元素的第一字号,还可以记载根元素与子元素的相对尺寸,通过配置项和参数进行页面中元素尺寸的批量转换,将页面中的所有元素转换为最终的适配尺寸,为页面中的元素选择最佳的缩放比例并生成渲染方案返回给浏览器。

参考图4,图4是根据本申请实施例的页面适配装置结构框图。

如图4所示,该页面适配装置,适用上述提及的页面适配进行页面的适配操作,包括:

获取模块32,用于获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号;

适配模块33,连接于所述获取模块,用于根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比,其中所述当前窗口尺寸包括窗口宽度和窗口高度,所述页面原始尺寸包括页面宽度和页面高度;

处理模块34,连接于所述适配模块,用于基于所述宽度变化比和所述高度变化比确定元素缩放比,根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号。

在一些实施例中,该页面适配装置额外包括:获取单元,用于获取并判断窗口尺寸是否匹配页面原始尺寸,若不匹配则自动进行本申请实施例的适配方法。

当然,在一些实施例中还包括渲染单元,用于基于根元素适配尺寸和子元素适配尺寸渲染页面。

该适配装置可以位于本地文件系统,也可以位于远程服务器。web页面可以通过引入一个script标签,并将script标签的src属性设置为该装置的具体位置来加载该装置。在本实施例中,该装置为存放在浏览器本地文件系统的javascript文件,具体的引入方式为:

<scriptsrc="js/adapter.js"></script>

其中,javascript组件只是实现该适配装置的一种技术手段而非限制性要求,完全可以使用其他浏览器脚本技术如coffeescript、dart、typescript等实现加载该装置。

关于该页面适配装置的其他内容介绍参见上述页面适配方法的内容介绍,在此不进行过多的展示说明。

如图5所示,本实施例还提供了一种电子装置,包括存储器304和处理器302,该存储器304中存储有计算机程序,该处理器302被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

具体地,上述处理器302可以包括中央处理器(cpu),或者特定集成电路(application-specificintegratedcircuit,简称为asic),或者可以被配置成实施本申请实施例的一个或多个集成电路。

其中,存储器304可以包括用于数据或指令的大容量存储器304。举例来说而非限制,存储器304可包括硬盘驱动器(harddiskdrive,简称为hdd)、软盘驱动器、固态驱动器(solidstatedrive,简称为ssd)、闪存、光盘、磁光盘、磁带或通用串行总线(universalserialbus,简称为usb)驱动器或者两个或更多个以上这些的组合。在合适的情况下,存储器304可包括可移除或不可移除(或固定)的介质。在合适的情况下,存储器304可在数据处理装置的内部或外部。在特定实施例中,存储器304是非易失性(non-volatile)存储器。在特定实施例中,存储器304包括只读存储器(read-onlymemory,简称为rom)和随机存取存储器(randomaccessmemory,简称为ram)。在合适的情况下,该rom可以是掩模编程的rom、可编程rom(programmableread-onlymemory,简称为prom)、可擦除prom(erasableprogrammableread-onlymemory,简称为eprom)、电可擦除prom(electricallyerasableprogrammableread-onlymemory,简称为eeprom)、电可改写rom(electricallyalterableread-onlymemory,简称为earom)或闪存(flash)或者两个或更多个以上这些的组合。在合适的情况下,该ram可以是静态随机存取存储器(staticrandom-accessmemory,简称为sram)或动态随机存取存储器(dynamicrandomaccessmemory,简称为dram),其中,dram可以是快速页模式动态随机存取存储器304(fastpagemodedynamicrandomaccessmemory,简称为fpmdram)、扩展数据输出动态随机存取存储器(extendeddateoutdynamicrandomaccessmemory,简称为edodram)、同步动态随机存取内存(synchronousdynamicrandom-accessmemory,简称sdram)等。

存储器304可以用来存储或者缓存需要处理和/或通信使用的各种数据文件,以及处理器302所执行的可能的计算机程序指令。

处理器302通过读取并执行存储器304中存储的计算机程序指令,以实现上述实施例中的任意孤寡老人的行为分析方法或孤寡老人的行为分析方法。

可选地,上述电子装置还可以包括传输设备306以及输入输出设备308,其中,该传输设备306和上述处理器302连接,该输入输出设备308和上述处理器302连接。

在本实施例中,上述处理器302可以被设置为通过计算机程序执行以下步骤:

获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号;

根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比,其中所述当前窗口尺寸包括窗口宽度和窗口高度,所述页面原始尺寸包括页面宽度和页面高度;

基于所述宽度变化比和所述高度变化比确定元素缩放比,根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号。

传输设备306可以用来经由一个网络接收或者发送数据。上述的网络具体实例可包括电子装置的通信供应商提供的有线或无线网络。在一个实例中,传输设备包括一个网络适配器(networkinterfacecontroller,简称为nic),其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中,传输设备306可以为射频(radiofrequency,简称为rf)模块,其用于通过无线方式与互联网进行通讯。

输入输出设备308用于输入或输出信息。例如,上述输入输出设备可以是显示屏、鼠标、键盘或其他设备。在本实施例中,输入设备用于输入采集得到的信息,输入的信息可以是数据、表格、图像、实时视频,输出的信息可以是通过业务系统展示的文本、图表以及告警信息等等。

上述具体实施方式,并不构成对本申请保护范围的限制。本领域技术人员应该明白的是,取决于设计要求和其他因素,可以发生各种各样的修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等,均应包含在本申请保护范围之内。


技术特征:

1.一种页面适配方法,其特征在于,包括:

获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号;

根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比,其中所述当前窗口尺寸包括窗口宽度和窗口高度,所述页面原始尺寸包括页面宽度和页面高度;

基于所述宽度变化比和所述高度变化比确定元素缩放比,根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号。

2.根据权利要求1所述的页面适配方法,其特征在于,包括:在“根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比”前,包括步骤:判断所述当前窗口尺寸是否匹配所述页面原始尺寸,若不匹配则继续执行后续计算宽度变化比和高度变化比的步骤。

3.根据权利要求1所述的页面适配方法,其特征在于,包括:在“获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号”前,包括步骤:监听显示页面的当前窗口尺寸是否改变,若改变则继续执行后续的获取步骤。

4.根据权利要求1所述的页面适配方法,其特征在于,所述宽度变化比为:所述窗口宽度与所述页面宽度的差与所述页面宽度的比值的绝对值;所述高度变化比为:所述窗口高度与所述页面高度的差与所述页面高度的比值的绝对值。

5.根据权利要求1所述的页面适配方法,其特征在于,“基于所述宽度变化比和所述高度变化比确定元素缩放比”包括:若所述宽度变化比大于所述高度变化比,所述窗口高度与所述页面高度的比值作为元素缩放比,否则所述窗口宽度与所述页面宽度的比值作为所述元素缩放比。

6.根据权利要求1所述的页面适配方法,其特征在于,在“根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号”后,包括:获取所述根元素的第一字号与子元素的相对尺寸,以所述根元素的第二字号为基准,根据所述相对尺寸计算所述子元素的适配尺寸。

7.根据权利要求6所述的页面适配方法,其特征在于,在“根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号”后,包括步骤:基于所述根元素的第二字号和所述子元素的适配尺寸渲染页面。

8.页面适配装置,其特征在于,包括:

获取模块,用于获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号;

适配模块,连接于所述获取模块,用于根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比,其中所述当前窗口尺寸包括窗口宽度和窗口高度,所述页面原始尺寸包括页面宽度和页面高度;

处理模块,连接于所述适配模块,用于基于所述宽度变化比和所述高度变化比确定元素缩放比,根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号。

9.一种计算机设备,其特征在于,所述计算机设备包括一个或多个处理器和一个或多个存储器,所述一个或多个存储器中存储有至少一条程序代码,所述至少一条程序代码由所述一个或多个处理器加载并执行以实现如权利要求1-7任一项所述的页面适配方法所执行的操作。

10.一种存储介质,其特征在于,所述存储介质中存储有计算机程序,其中,所述计算机程序被设置为运行时执行如权利要求1-7任一项所述的页面适配方法。

技术总结
本申请提出一种页面适配方法、装置、计算机设备及存储介质,该方法包括:获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号;根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比,其中所述当前窗口尺寸包括窗口宽度和窗口高度,所述页面原始尺寸包括页面宽度和页面高度;基于所述宽度变化比和所述高度变化比确定元素缩放比,根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号。该方法可使页面中的元素按照根元素的第一字号的变化自动缩放以适配不同屏幕分辨率的电子设备,并根据当前窗口尺寸的变化及时调整根元素的第一字号,进而调整页面中所有元素的尺寸。

技术研发人员:李圣权;沈自强;杨彬
受保护的技术使用者:城云科技(中国)有限公司
技术研发日:2021.07.05
技术公布日:2021.08.03

转载请注明原文地址:https://doc.8miu.com/read-9818.html

最新回复(0)