CN117389672B - 一种页面自适应适配方法、电子设备及计算机可读介质 - Google Patents

Abstract

本发明公开了一种页面自适应适配方法、电子设备及计算机可读介质，涉及计算机技术领域，如下步骤：获取屏幕参数和设计参数；计算整体缩放度和页面容器宽度；基于整体缩放度和页面容器宽度设置页面容器的CSS属性，完成页面与屏幕的适配。本发明可以使页面与屏幕的适配度更高。

Description

一种页面自适应适配方法、电子设备及计算机可读介质

技术领域

本发明涉及计算机技术领域，具体涉及一种页面自适应适配方法、电子设备及计算机可读介质。

背景技术

现有技术中，显示大屏页面的项目所使用的常见布局方式是：中央区域显示地图、3D元素等主视觉元素，两侧展示图表。通常页面会按照固定的尺寸来提供设计稿，如1920px*1080px，而后在保持页面内容与设计稿宽高比一致的前提下等比缩放进行适配。然而这种适配方式，在设计稿与屏幕宽高比不相等时，会产生页面内容两侧留白的问题。

发明内容

本发明旨在一定程度上解决相关技术中的技术问题之一。为此，本发明提供了一种页面自适应适配方法，使页面与屏幕的适配度更高。

为了达到上述目的，本发明采用如下技术方案：

一种页面自适应适配方法，包括如下步骤：

获取屏幕参数和设计参数；

计算整体缩放度和页面容器宽度；

基于整体缩放度和页面容器宽度设置页面容器的CSS属性，完成页面与屏幕的适配。

可选的，所述屏幕参数包括屏幕宽度和屏幕高度；所述设计参数包括设计宽度、设计高度和最大宽度。

可选的，计算整体缩放度包括如下步骤：

根据如下公式计算宽度比和高度比：

其中，rw为宽度比，sw为屏幕宽度，dw为设计宽度，rh为高度比，sh为屏幕高度，dh为设计高度；

取宽度比rw和高度比rh中的较小值作为整体缩放度。

可选的，计算页面容器宽度包括如下步骤：

比较宽度比和高度比；

如果宽度比大于高度比，页面容器宽度为：

cw＝min{sw/scale,mw}

其中，cw为页面容器宽度，scale为整体缩放度，mw为最大宽度；

如果宽度比小于高度比，页面容器宽度为设计宽度。

可选的，基于整体缩放度和页面容器宽度设置页面容器的CSS属性包括：页面缩放度为整体缩放度，页面宽度为页面容器宽度，页面高度为设计高度。

本发明所提供的技术方案，在计算出整体缩放度和页面容器宽度后，基于计算出的整体缩放度和页面容器宽度设置页面容器的CSS属性，以在不同的情况下进行缩放。例如，当设计稿的设计宽度与最大宽度相等时，可按照设计稿的固定宽高比进行页面与屏幕的适配；而当设计稿的设计宽度小于最大宽度时，则基于整体缩放度和计算出的页面容器宽度。如此，页面便能够在设定的宽高比范围内(例如16:9到21:9)动态缩放，完成与屏幕的适配，同时避免页面内容两侧留白。

并且，本发明还提供了一种电子设备，包括：

一个或多个处理器；

存储器，其上存储有一个或多个计算机程序，当所述一个或多个计算机程序被所述一个或多个处理器执行时，所述一个或多个处理器实现前述任意一项所述的页面自适应适配方法。

同时，本发明还提供了一种计算机可读介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述的页面自适应适配方法。

本发明的这些特点和优点将会在下面的具体实施方式以及附图中进行详细的揭露。本发明最佳的实施方式或手段将结合附图来详尽表现，但并非是对本发明技术方案的限制。另外，在每个下文和附图中出现的这些特征、要素和组件是具有多个，并且为了表示方便而标记了不同的符号或数字，但均表示相同或相似构造或功能的部件。

附图说明

下面结合附图对本发明作进一步说明：

图1为本发明实施例的总流程示意图；

图2为本发明实施例中计算页面容器宽度的流程示意图；

图3为本发明所提供的电子设备的示意图；

图4为本发明所提供的计算机可读介质的示意图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。基于实施方式中的实施例，旨在用于解释本发明，而不能理解为对本发明的限制。

在本说明书中引用的“一个实施例”或“实例”或“例子”意指结合实施例本身描述的特定特征、结构或特性可被包括在本专利公开的至少一个实施例中。短语“在一个实施例中”在说明书中的各位置的出现不必都是指同一个实施例。

作为本实施例的第一个方面，本实施例提供了一种页面自适应适配方法，如图1所示，所述页面自适应适配方法包括如下步骤：

步骤S1：获取屏幕参数和设计参数。在这一步骤中，设计参数指设计稿的参数。

步骤S2：计算整体缩放度和页面容器宽度。

步骤S3：基于整体缩放度和页面容器宽度设置页面容器的CSS属性，完成页面与屏幕的适配。

本实施例中，在计算出整体缩放度和页面容器宽度后，基于计算出的整体缩放度和页面容器宽度设置页面容器的CSS属性，在不同的情况下进行缩放，例如，当设计稿的设计宽度与最大宽度相等时，可按照设计稿的固定宽高比进行页面与屏幕的适配；而当设计稿的设计宽度小于最大宽度时，则基于整体缩放度和计算出的页面容器宽度，如此，页面便能够在设定的宽高比范围内(例如16:9到21:9)动态缩放，完成与屏幕的适配，同时避免页面内容两侧留白。

在本公开中，对如何执行步骤S1不做特殊的限定。作为一种可选实施方式，步骤S1中，屏幕参数包括屏幕宽度和屏幕高度；设计参数包括设计宽度、设计高度和最大宽度。

引入设计稿的最大宽度这一参数，是指以不留白的方式进行适配的宽度，它参照的是设计宽度。例如：当设计稿为1920*1080(16:9)，并且要在16:9和21:9的屏幕上兼容显示时，可设置最大宽度为2520(1920/16*21＝2520)，如此一来，页面在16:9至21:9宽高比范围的屏幕上，页面内容均能够填满整个屏幕，避免了存在留白的问题。同时，对于一些宽度远超高度的屏幕，如果将屏幕填满，将使得整个页面的内容过于松散影响观感，因此，通过最大宽度的限制，避免页面被无限放宽，保证了显示效果。

在本公开中，对如何执行步骤S2不做特殊的限定。作为一种可选实施方式，步骤S2中，计算整体缩放度包括如下步骤：

根据如下公式计算宽度比和高度比：

其中，rw为宽度比，sw为屏幕宽度，dw为设计宽度，rh为高度比，sh为屏幕高度，dh为设计高度；

取宽度比rw和高度比rh中的较小值作为整体缩放度。

在这一步骤中，整体缩放度是应用于页面的，它使得页面宽度和高度等比例缩放以适配屏幕宽高。当屏幕的宽度较大时，则计算出的宽度比必然大于高度比，此时选取宽度比rw和高度比rh中较小的高度比rh作为整体缩放度，可以先将屏幕的高度填满，而当屏幕的高度较大时，则计算出的高度比必然大于宽度比，此时仍然选取宽度比rw和高度比rh中较小的宽度比rw作为整体缩放度，则可以先将屏幕的宽度填满。

在本公开中，对如何执行步骤S2不做特殊的限定。作为一种可选实施方式，步骤S2中，计算页面容器宽度包括如下步骤，如图2所示：

比较宽度比和高度比；

如果宽度比大于高度比，页面容器宽度为：

cw＝min{sw/scale,mw}

其中，cw为页面容器宽度，scale为整体缩放度，mw为最大宽度；

如果宽度比小于高度比，页面容器宽度为设计宽度。

在这一步骤中，宽度比大于高度比时，说明屏幕的高度已填满，因此计算sw/scale得到的是缩放之前的页面容器的宽度，使得页面容器缩放后与屏幕等宽。同时，为了保证页面显示的效果，避免页面显示内容过于松散，所以页面的宽度不应当无限放宽，因此，通过最大宽度mw的限制，避免页面被无限放宽，保证了显示效果。而如果宽度比小于高度比，则说明屏幕的宽度已填满，所以此时页面容器宽度即为设计宽度，当设计宽度dw应用缩放时：dw*scale＝dw*rw＝sw。在本公开中，对如何执行步骤S3不做特殊的限定。作为一种可选实施方式，步骤S3中，基于整体缩放度和页面容器宽度设置页面容器的CSS属性，具体包括：页面缩放度为整体缩放度，页面宽度为页面容器宽度，页面高度为设计高度。

与此同时，本实施例还提供了一种电子设备，如图3所示，包括：

一个或多个处理器101；

存储器102，其上存储有一个或多个计算机程序，当所述一个或多个计算机程序被所述一个或多个处理器101执行时，所述一个或多个处理器101实现根据本发明第一个方面所述页面自适应适配方法。

所述电子设备还可以包括一个或多个I/O接口103，连接在所述处理器101与存储器102之间，配置为实现所述处理器101与存储器102的信息交互。

其中，处理器101为具有数据处理能力的器件，其包括但不限于中央处理器101(CPU)等；第一存储器102为具有数据存储能力的器件，其包括但不限于随机存取存储器102(RAM，更具体如SDRAM、DDR等)、只读存储器102(ROM)、带电可擦可编程只读存储器102(EEPROM)、闪存(FLASH)；I/O接口103(读写接口)连接在处理器101与存储器102间，能实现处理器101与存储器102的信息交互，其包括但不限于数据总线104(Bus)等。

在一些实施例中，处理器101、存储器102和I/O接口103通过总线104相互连接，进而与计算设备的其它组件连接。

作为本发明的第三个方面，提供一种计算机可读介质，如图4所示，其上存储有计算机程序，所述计算机程序被处理器执行时实现本公开第一个方面所提供的页面自适应适配方法。

本领域普通技术人员可以理解,实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成。据此，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可实现上述任意一项实施例的方法。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)以及存储器总线动态RAM(RDRAM)等。

以上，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，熟悉该本领域的技术人员应该明白本发明包括但不限于附图和上面具体实施方式中描述的内容。任何不偏离本发明的功能和结构原理的修改都将包括在权利要求书的范围中。

Claims (4)

1.一种页面自适应适配方法，其特征在于，所述页面自适应适配方法包括如下步骤：

获取屏幕参数和设计参数；所述屏幕参数包括屏幕宽度和屏幕高度；所述设计参数包括设计宽度、设计高度和最大宽度；所述最大宽度是以不留白的方式进行适配的宽度，且是根据所述设计宽度以及设计稿支持的屏幕宽高比范围所确定的；

计算整体缩放度和页面容器宽度；

基于整体缩放度和页面容器宽度设置页面容器的CSS属性，完成页面与屏幕的适配；

其中，计算整体缩放度包括如下步骤：

根据如下公式计算宽度比和高度比：

其中，rw为宽度比，sw为屏幕宽度，dw为设计宽度，rh为高度比，sh为屏幕高度，dh为设计高度；

取宽度比rw和高度比rh中的较小值作为整体缩放度；

其中，计算页面容器宽度包括如下步骤：

比较宽度比和高度比；

如果宽度比大于高度比，页面容器宽度为：

cw＝min{sw/scale,mw}

其中，cw为页面容器宽度，scale为整体缩放度，mw为最大宽度；

如果宽度比小于高度比，页面容器宽度为设计宽度。

2.根据权利要求1所述的页面自适应适配方法，其特征在于，基于整体缩放度和页面容器宽度设置页面容器的CSS属性包括：页面缩放度为整体缩放度，页面宽度为页面容器宽度，页面高度为设计高度。

3.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储器，其上存储有一个或多个计算机程序，当所述一个或多个计算机程序被所述一个或多个处理器执行时，所述一个或多个处理器实现根据权利要求1至2中任意一项所述的页面自适应适配方法。

4.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至2中任一项所述的页面自适应适配方法。