CN115794276A - 显示页面组件适配方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种显示页面组件适配方法、装置、计算机设备、存储介质和计算机程序产品。所述方法包括：获取封装至容器组件内的页面组件的设计参数；动态获取显示窗口的尺寸参数；根据所述设计参数以及所述尺寸参数，确定参数比值；基于所述参数比值，获取页面组件的缩放倍数；根据所述缩放倍数对所述容器组件进行缩放，以使所述页面组件与所述显示窗口适配。采用本方法能够避免出现显示错乱的情况。

Description

显示页面组件适配方法、装置、计算机设备和存储介质

技术领域

本申请涉及适配技术领域，特别是涉及一种显示页面组件适配方法、装置、计算机设备、存储介质和计算机程序产品。

背景技术

数据可视化在当下信息时代已经成为炙手可热的话题，使得许多大屏web应用上在网页端出现。

web大屏应用指的是为适用大屏幕展示的web应用，其主要应用于大数据页面、销售额度、性能检测等领域。以往，对不同屏幕都特别定制一套固定尺寸的大屏，即针对不同尺寸的显示页面都需要定制一套固定尺寸的大屏，这种方式虽然可以实现大屏显示，但是由于显示页面与大屏尺寸固定，意味着针对不同尺寸的显示页面场景下需要设置多个不同的大屏，这显然会造成资源的浪费、且不灵活。

针对传统技术中显示页面组件固定适配的方式存在不灵活的缺陷，目前已有学者提出采用vw(Viewport Width，视口宽度)和vh(Viewport Height，视口高度)适配方案去兼容不同尺寸显示页面，但是这种方法容易出现显示错乱的情况。

发明内容

基于此，有必要针对上述技术问题，提供一种可以有效避免出现显示错乱的显示页面组件适配方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

第一方面，本申请提供了一种显示页面组件适配方法。所述方法包括：

获取封装至容器组件内的页面组件的设计参数；

动态获取显示窗口的尺寸参数；

根据所述设计参数以及所述尺寸参数，确定参数比值；

基于所述参数比值，获取页面组件的缩放倍数；

根据所述缩放倍数对所述容器组件进行缩放，以使所述页面组件与所述显示窗口适配。

在其中一个实施例中，所述动态获取显示窗口的尺寸参数包括：

侦听显示窗口大小调整事件；

根据所述显示窗口大小调整事件，动态获取显示窗口的尺寸参数。

在其中一个实施例中，所述获取封装至容器组件内的页面组件的设计参数，之前包括：

调用初始容器组件包裹页面组件，得到容器组件；

将所述容器组件封装成插件；

在显示页面的入口文件中引入所述插件；

当侦测到显示页面组件适配时，通过引入的所述插件调用所述容器组件。

在其中一个实施例中，所述根据所述设计参数以及所述尺寸参数，确定参数比值包括：

提取所述设计参数中携带的设计高度以及设计宽度、并提取所述尺寸参数中携带的窗口高度以及窗口宽度；

根据所述窗口高度与所述设计高度，确定高度比值；

根据所述窗口宽度与所述设计宽度，确定宽度比值。

在其中一个实施例中，所述基于所述参数比值，获取页面组件的缩放倍数包括：

识别所述高度比值以及所述宽度比值中的较小比值；

根据所述较小比值，确定页面组件的缩放倍数。

在其中一个实施例中，根据所述缩放倍数对所述容器组件进行缩放，以使页面组件与显示窗口适配之后，还包括：

调用预设样式插件，对所述页面组件进行调整。

第二方面，本申请还提供了一种显示页面组件适配装置。所述装置包括：

设计参数获取模块，用于获取封装至容器组件内的页面组件的设计参数；

尺寸参数获取模块，用于动态获取显示窗口的尺寸参数；

参数比值确定模块，用于根据所述设计参数以及所述尺寸参数，确定参数比值；

缩放倍数获取模块，用于基于所述参数比值，获取页面组件的缩放倍数；

显示页面组件适配模块，用于根据所述缩放倍数对所述容器组件进行缩放，以进行显示页面组件适配。

第三方面，本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

获取封装至容器组件内的页面组件的设计参数；

动态获取显示窗口的尺寸参数；

根据所述设计参数以及所述尺寸参数，确定参数比值；

基于所述参数比值，获取页面组件的缩放倍数；

根据所述缩放倍数对所述容器组件进行缩放，以使所述页面组件与所述显示窗口适配。

第四方面，本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

获取封装至容器组件内的页面组件的设计参数；

动态获取显示窗口的尺寸参数；

根据所述设计参数以及所述尺寸参数，确定参数比值；

基于所述参数比值，获取页面组件的缩放倍数；

根据所述缩放倍数对所述容器组件进行缩放，以使所述页面组件与所述显示窗口适配。

第五方面，本申请还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

获取封装至容器组件内的页面组件的设计参数；

动态获取显示窗口的尺寸参数；

根据所述设计参数以及所述尺寸参数，确定参数比值；

基于所述参数比值，获取页面组件的缩放倍数；

根据所述缩放倍数对所述容器组件进行缩放，以使所述页面组件与所述显示窗口适配。

上述显示页面组件适配方法、装置、计算机设备、存储介质和计算机程序产品，通过获取封装至容器组件内的页面组件的设计参数以及显示窗口的尺寸参数，确定参数比值，然后基于参数比值，获取页面组件的缩放倍数，最后，根据缩放倍数对容器组件进行缩放，以进行显示页面组件适配。本方案中，可以根据页面组件的设计参数以及显示窗口的尺寸参数确定缩放倍数，再根据缩放倍数对容器组件进行缩放，从而对设置于容器组件内的页面组件进行整体缩放，避免出现显示错乱的情况。

附图说明

图1为一个实施例中显示页面组件适配方法的应用环境图；

图2为一个实施例中显示页面组件适配方法的流程示意图；

图3为另一个实施例中显示页面组件适配方法的流程示意图；

图4为一个实施例中显示页面组件适配装置的结构框图；

图5为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请实施例提供的显示页面组件适配方法，可以应用于如图1所示的应用环境中。其中，终端102获取用户输入的设计参数，然后根据显示窗口的尺寸参数及设计参数，确定参数比值，基于参数比值，获取页面组件的缩放倍数，根据缩放倍数对容器组件进行缩放，以使页面组件与显示窗口适配。其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑。

在一个实施例中，如图2所示，提供了一种显示页面组件适配方法，以该方法应用于图1中的终端102为例进行说明，包括以下步骤：

S100，获取封装至容器组件内的页面组件的设计参数。

其中，容器组件是指对数据和方法的简单封装，用来将页面组件包裹，通过对容器组件缩放，对页面组件进行整体缩放；页面组件是构建前端独立页面的组件，包含视窗、文本框、按钮、下拉式菜单等页面元素，可以表示为大屏应用；设计参数是前端应用的网页图形的高度和宽度。

具体地，将前端应用的网页图形设计出来，可以通过界面设计工具或者其它方式进行网页图形设计，然后，将网页图形的高度和宽度输入到终端，由容器组件接收网页图形的高度和宽度。

S200，动态获取显示窗口的尺寸参数。

其中，显示窗口可以是浏览器窗口；尺寸参数是显示窗口的高度和宽度，可以是浏览器窗口的高度和宽度。

具体地，可以通过浏览器的内置属性得到浏览器窗口的高度和宽度，通过建立监听显示窗口大小事件，利用window对象获取浏览器窗口的高度和宽度。

S300，根据设计参数以及尺寸参数，确定参数比值。

其中，参数比值是设计参数与尺寸参数相比所得的值。

具体地，通过尺寸参数的高度与设计参数的高度相比，得到高度比值；通过尺寸参数的宽度与设计参数的宽度相比，得到宽度比值。

S400，基于参数比值，获取页面组件的缩放倍数。

其中，缩放倍数是尺寸参数的高度与设计参数的高度比值以及尺寸参数的宽度与设计参数的宽度比值相比，二者中较小的值即为缩放倍数。

具体地，基于尺寸参数的高度与设计参数的高度比值、尺寸参数的宽度与设计参数的宽度比值，取二者中相对较小的比值。

S500，根据缩放倍数对容器组件进行缩放，以使页面组件与显示窗口适配。

具体地，根据尺寸参数的高度与设计参数的高度比值、尺寸参数的宽度与设计参数的宽度比值，获取缩放倍数；根据缩放倍数对容器组件进行缩放，通过对容器组件的缩放，从而控制对页面组件进行整体缩放，使得网页页面大小与游览器窗口大小相适配。

上述显示页面组件适配方法中，通过获取封装至容器组件内的页面组件的设计参数以及显示窗口的尺寸参数，确定参数比值，基于参数比值，获取页面组件的缩放倍数，根据缩放倍数对容器组件进行缩放，以进行显示页面组件适配，能设置于容器组件内的页面组件进行整体缩放，以避免出现显示错乱的情况。

在一个实施例中，动态获取显示窗口的尺寸参数包括：

侦听显示窗口大小调整事件；根据显示窗口大小调整事件，动态获取显示窗口的尺寸参数。

其中，侦听显示窗口大小调整事件可以实时监测显示窗口大小变化，只要显示窗口大小发生像素变化，就会触发此事件。

具体地，当显示窗口大小发生像素变化，触发显示窗口大小调整事件，当触发时就调用处理函数，window对象会获取显示窗口的高度和宽度。

侦听显示窗口大小调整事件的建立如下：

window.addEventListener('resize',()＝>{setScale()})

本实施例中，通过侦听显示窗口大小调整事件；根据显示窗口大小调整事件，动态获取显示窗口的尺寸参数，能实时根据窗口大小动态调整页面尺寸。

在一个实施例中，获取封装至容器组件内的页面组件的设计参数，之前包括：

调用初始容器组件包裹页面组件，得到容器组件；将容器组件封装成插件；在显示页面的入口文件中引入插件；当侦测到显示页面组件适配时，通过引入的插件调用容器组件。

其中，插件是一种遵循一定规范的应用程序接口编写出来的程序，可以通过将容器组件打包成插件的形式来调用。

具体地，调用初始容器组件包裹页面组件，调用方式如下：

<container-component width＝“1920px”height＝”800px”>

<app/>

</container-component>。

将容器组件打包成插件的方式，在显示页面的入口文件main.js中引入插件，容器组件只需要接收页面组件的设计参数的高度和宽度。

本实施例中，通过调用初始容器组件包裹页面组件，得到容器组件，将容器组件封装成插件，在显示页面的入口文件中引入插件，当侦测到显示页面组件适配时，通过引入的插件调用容器组件，能提高容器组件中代码的复用性和可扩展性。

在一个实施例中，如图3所示，S300包括：

S320，提取设计参数中携带的设计高度以及设计宽度、并提取尺寸参数中携带的窗口高度以及窗口宽度。

S340，根据窗口高度与设计高度，确定高度比值。

S360，根据窗口宽度与设计宽度，确定宽度比值。

具体地，设置容器组件container-component大小：

获取屏幕尺寸并计算缩放比例：

其中，window.innerHeight表示窗口高度，window.innerWidth表示窗口宽度，this.height表示设计高度，this.width表示设计宽度。

本实施例中，通过提取设计参数中携带的设计高度以及设计宽度、并提取尺寸参数中携带的窗口高度以及窗口宽度，然后，根据窗口高度与设计高度，确定高度比值，根据窗口宽度与设计宽度，确定宽度比值，能便于后续获取容器组件的缩放倍数。

在一个实施例中，基于参数比值，获取页面组件的缩放倍数包括：

识别高度比值以及宽度比值中的较小比值；根据较小比值，确定页面组件的缩放倍数。

具体地，获取setScale函数中return返回值，返回值是高度比值以及宽度比值中的较小比值，以返回值作为页面组件的缩放倍数。

本实施例中，通过识别高度比值以及宽度比值中的较小比值，根据较小比值，确定页面组件的缩放倍数，能根据缩放倍数对容器组件进行缩放，从而对页面组件进行整体缩放。

在一个实施例中，调用预设样式插件，根据缩放倍数对容器组件进行缩放，以使页面组件与显示窗口适配之后，还包括：

调用预设样式插件，对页面组件进行调整。

具体地，通过js调用css的transform属性对container-Components组件中包裹的页面组件居中调整。

本实施例中，通过调用预设样式插件，对页面组件进行调整，能是实时根据页面组件的缩放，对页面组件进行居中调整。

为详细说明本申请显示页面组件适配方法的技术方案及其效果，下面将采用具体应用实例展开描述。整个显示页面组件适配方法包括以下步骤：

1、创建一个容器组件(container-Components)，该容器内用来存放大屏web的页面组件

2、设置该组件的长宽与设计稿的比例为1:1，并使用绝对像素px作为单位。

3、容器组件初始化后，获取屏幕的可用区域宽度(innerWidth)与可用区域高度(innerHeight)，并分别计算出他们与设计稿的宽度与高度比，取两者较小的高度并输比值结果A。

4、得到上述结果后，对整个组件进行放大A倍，最终整个应用实现了适用不同屏幕的适配。

5、最终将该组件封装成插件，以组件的形式引用，该组件只需要配置好设计稿的长宽即可，大屏应用作为该组件的内部元素(innerHTML)。

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的显示页面组件适配方法的适配装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个适配装置实施例中的具体限定可以参见上文中对于显示页面组件适配方法的限定，在此不再赘述。

在一个实施例中，如图4所示，提供了一种显示页面组件适配装置，包括：设计参数获取模块100、尺寸参数获取模块200、参数比值确定模块300、缩放倍数获取模块400和显示页面组件适配模块500，其中：

设计参数获取模块100，用于获取封装至容器组件内的页面组件的设计参数；

尺寸参数获取模块200，用于动态获取显示窗口的尺寸参数；

参数比值确定模块300，用于根据设计参数以及尺寸参数，确定参数比值；

缩放倍数获取模块400，用于基于参数比值，获取页面组件的缩放倍数；

显示页面组件适配模块500，用于根据缩放倍数对容器组件进行缩放，以进行显示页面组件适配。

在一个实施例中，尺寸参数获取模块200还用于侦听显示窗口大小调整事件；根据显示窗口大小调整事件，动态获取显示窗口的尺寸参数。

在一个实施例中，参数比值确定模块300还用于提取设计参数中携带的设计高度以及设计宽度、并提取尺寸参数中携带的窗口高度以及窗口宽度；根据窗口高度与设计高度，确定高度比值；根据窗口宽度与设计宽度，确定宽度比值。

在一个实施例中，参数比值确定模块300还用于识别高度比值以及宽度比值中的较小比值；根据较小比值，确定页面组件的缩放倍数。

上述显示页面组件适配装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图5所示。该计算机设备包括通过***总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作***和计算机程序。该内存储器为非易失性存储介质中的操作***和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种显示页面组件适配方法方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图5中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：

获取封装至容器组件内的页面组件的设计参数；动态获取显示窗口的尺寸参数；根据设计参数以及尺寸参数，确定参数比值；基于参数比值，获取页面组件的缩放倍数；根据缩放倍数对容器组件进行缩放，以使页面组件与显示窗口适配。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

侦听显示窗口大小调整事件；根据显示窗口大小调整事件，动态获取显示窗口的尺寸参数。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

调用初始容器组件包裹页面组件，得到容器组件；将容器组件封装成插件；在显示页面的入口文件中引入插件；当侦测到显示页面组件适配时，通过引入的插件调用容器组件。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

提取设计参数中携带的设计高度以及设计宽度、并提取尺寸参数中携带的窗口高度以及窗口宽度；根据窗口高度与设计高度，确定高度比值；根据窗口宽度与设计宽度，确定宽度比值。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

识别高度比值以及宽度比值中的较小比值；根据较小比值，确定页面组件的缩放倍数。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

调用预设样式插件，对页面组件进行调整。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

获取封装至容器组件内的页面组件的设计参数；动态获取显示窗口的尺寸参数；根据设计参数以及尺寸参数，确定参数比值；基于参数比值，获取页面组件的缩放倍数；根据缩放倍数对容器组件进行缩放，以使页面组件与显示窗口适配。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

侦听显示窗口大小调整事件；根据显示窗口大小调整事件，动态获取显示窗口的尺寸参数。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

调用初始容器组件包裹页面组件，得到容器组件；将容器组件封装成插件；在显示页面的入口文件中引入插件；当侦测到显示页面组件适配时，通过引入的插件调用容器组件。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

提取设计参数中携带的设计高度以及设计宽度、并提取尺寸参数中携带的窗口高度以及窗口宽度；根据窗口高度与设计高度，确定高度比值；根据窗口宽度与设计宽度，确定宽度比值。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

识别高度比值以及宽度比值中的较小比值；根据较小比值，确定页面组件的缩放倍数。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

调用预设样式插件，对页面组件进行调整。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

获取封装至容器组件内的页面组件的设计参数；动态获取显示窗口的尺寸参数；根据设计参数以及尺寸参数，确定参数比值；基于参数比值，获取页面组件的缩放倍数；根据缩放倍数对容器组件进行缩放，以使页面组件与显示窗口适配。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

侦听显示窗口大小调整事件；根据显示窗口大小调整事件，动态获取显示窗口的尺寸参数。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

调用初始容器组件包裹页面组件，得到容器组件；将容器组件封装成插件；在显示页面的入口文件中引入插件；当侦测到显示页面组件适配时，通过引入的插件调用容器组件。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

提取设计参数中携带的设计高度以及设计宽度、并提取尺寸参数中携带的窗口高度以及窗口宽度；根据窗口高度与设计高度，确定高度比值；根据窗口宽度与设计宽度，确定宽度比值。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

识别高度比值以及宽度比值中的较小比值；根据较小比值，确定页面组件的缩放倍数。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

调用预设样式插件，对页面组件进行调整。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (10)

1.一种显示页面组件适配方法，其特征在于，所述方法包括：

获取封装至容器组件内的页面组件的设计参数；

动态获取显示窗口的尺寸参数；

根据所述设计参数以及所述尺寸参数，确定参数比值；

基于所述参数比值，获取页面组件的缩放倍数；

根据所述缩放倍数对所述容器组件进行缩放，以使所述页面组件与所述显示窗口适配。

2.根据权利要求1所述的方法，其特征在于，所述动态获取显示窗口的尺寸参数包括：

侦听显示窗口大小调整事件；

根据所述显示窗口大小调整事件，动态获取显示窗口的尺寸参数。

3.根据权利要求1所述的方法，其特征在于，所述获取封装至容器组件内的页面组件的设计参数，之前包括：

调用初始容器组件包裹页面组件，得到容器组件；

将所述容器组件封装成插件；

在显示页面的入口文件中引入所述插件；

当侦测到显示页面组件适配时，通过引入的所述插件调用所述容器组件。

4.根据权利要求1所述的方法，其特征在于，所述根据所述设计参数以及所述尺寸参数，确定参数比值包括：

提取所述设计参数中携带的设计高度以及设计宽度、并提取所述尺寸参数中携带的窗口高度以及窗口宽度；

根据所述窗口高度与所述设计高度，确定高度比值；

根据所述窗口宽度与所述设计宽度，确定宽度比值。

5.根据权利要求4所述的方法，其特征在于，所述基于所述参数比值，获取页面组件的缩放倍数包括：

识别所述高度比值以及所述宽度比值中的较小比值；

根据所述较小比值，确定页面组件的缩放倍数。

6.根据权利要求1所述的方法，其特征在于，所述根据所述缩放倍数对所述容器组件进行缩放，以使页面组件与显示窗口适配之后，还包括：

调用预设样式插件，对所述页面组件进行调整。

7.一种显示页面组件适配装置，其特征在于，所述装置包括：

设计参数获取模块，用于获取封装至容器组件内的页面组件的设计参数；

尺寸参数获取模块，用于动态获取显示窗口的尺寸参数；

参数比值确定模块，用于根据所述设计参数以及所述尺寸参数，确定参数比值；

缩放倍数获取模块，用于基于所述参数比值，获取页面组件的缩放倍数；

显示页面组件适配模块，用于根据所述缩放倍数对所述容器组件进行缩放，以进行显示页面组件适配。

8.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述的方法的步骤。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。

10.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。

Images