CN113849254A - 页面布局的自适应调整方法及计算设备 - Google Patents

Abstract

本发明公开了一种页面布局的自适应调整方法及计算设备。该方法包括：获取依据预设尺寸进行页面布局的布局参考数据；根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子；将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的布局调整数据；根据所述布局调整数据进行页面布局处理。根据本发明提供的方案，无需设计人员根据不同设备屏幕的尺寸的不同分别与之匹配的设计稿，仅需设计人员涉及一套通用的设计稿即可，减少了人效成本；不同设备上显示的内容保持一致，保证了使用不同设备时界面观感一致性，能够完整还原页面布局设计思路，改善了显示效果。

Description

页面布局的自适应调整方法及计算设备

技术领域

本发明涉及移动应用技术领域，具体涉及一种页面布局的自适应调整方 法及计算设备。

背景技术

页面布局是指对页面的文字、图形或表格进行排布和设计，是设计应用 程序界面最主要的任务之一，应用程序的好与不好，很大部分取决于页面布 局的合理性。同时，市面上终端设备的型号不一，对应的设备屏幕的显示尺 寸有大有小，如何进行页面布局设计，能够适配不同设备屏幕尺寸是一个需 要解决的问题。

现有技术中，一种解决方法是由设计人员根据不同设备屏幕的尺寸的不 同，分别需要设计与之匹配的布局配置数据，输出对应的一套设计稿，以达 到设备显示的最优化。但，带来的弊端就是随着设备屏幕尺寸的差异性越来 越大，异性屏越来越多，设计师的工作量数倍增加，技术人员配置的内容成 倍增加，调整UI效果的工作量也是很大。

另一种解决方法是，仅设计一套设计稿，该套设计稿应用于不同的设备 屏幕时，达到的显示效果是不同的设备显示的文字数量可能会有差异，或者 换行位置不一致。以书城页面为例，当将书城页面的设计稿应用于手机时， 受限于手机屏幕尺寸，显示的各本书籍的书籍介绍的文字数量较少；当将同 样的书城页面的设计稿应用于平板电脑时，由于平板电脑屏幕尺寸较大，显 示的各本书籍的书籍介绍的文字数量较多。这种差异性造成了使用不同设备 时界面带来的观感不一致性，无法保证设计稿中页面布局设计思路得以完整呈现，影响了用户的体验。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分 地解决上述问题的页面布局的自适应调整方法及计算设备。

根据本发明的一个方面，提供了一种页面布局的自适应调整方法，用于 针对不同设备屏幕尺寸调整页面布局，所述方法包括：

获取依据预设尺寸进行页面布局的布局参考数据；

根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子；

将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组 件计算并输出的布局调整数据；

根据所述布局调整数据进行页面布局处理。

根据本发明的另一方面，提供了一种计算设备，包括：处理器、存储器、 通信接口和通信总线，处理器、存储器和通信接口通过通信总线完成相互间 的通信；

存储器用于存放至少一可执行指令，可执行指令使所述处理器针对不同 设备屏幕尺寸调整页面布局，具体执行以下操作：

获取依据预设尺寸进行页面布局的布局参考数据；

根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子；

将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组 件计算并输出的布局调整数据；

根据所述布局调整数据进行页面布局处理。

根据本发明的又一方面，提供了一种计算机存储介质，存储介质中存储 有至少一可执行指令，可执行指令使处理器执行如上述页面布局的自适应调 整对应的操作。

根据本发明提供的方案，无需设计人员根据不同设备屏幕的尺寸的不同 分别与之匹配的设计稿，仅需设计人员涉及一套通用的设计稿即可，根据该 通用设计稿提供的布局配置数据作为布局参考数据，对布局参考数据进行适 配调整处理，得到更适配当前设备屏幕尺寸的布局调整数据，减少了人效成 本；而且，由于上述适配调整基于缩放因子进行等比例调整，所以不同设备 上显示的内容保持一致，保证了使用不同设备时界面观感一致性，能够完整 还原页面布局设计思路，改善了显示效果。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技 术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它 目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本 领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的， 而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示 相同的部件。在附图中：

图1示出了根据本发明一个实施例的页面布局的自适应调整方法的流程 示意图；

图2示出了根据本发明另一个实施例的方法的流程示意图；

图3示出了本发明实施例中手机中呈现应用页面的示意图；

图4示出了本发明实施例中平板电脑中呈现应用页面的示意图；

图5示出了本发明实施例中手机中呈现书籍列表页面的示意图；

图6示出了本发明实施例中平板电脑中呈现书籍列表页面的示意图；

图7示出了根据本发明一个实施例的计算设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示 了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不 应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地 理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。

图1示出了根据本发明一个实施例的页面布局的自适应调整方法的流程 示意图。本方法用于针对不同设备屏幕尺寸调整页面布局，所调整的页面具 体为应用程序界面，可应用于手机、平板电脑等终端设备。如图1所示，该 方法包括以下步骤：

步骤101，获取依据预设尺寸进行页面布局的布局参考数据。

本实施例所采取的方法无需设计人员根据不同设备屏幕的尺寸的不同， 分别与之匹配的设计稿，仅需设计人员设计一套通用的设计稿即可。较为优 选地，该通用设计稿具体为一份版面尺寸为预设尺寸、具有高保真效果的页 面布局设计稿，例如设计一份预设尺寸为1920*1080的设计稿。从该设计稿 中获取布局配置数据作为布局参考数据。具体地，从设计稿中可获取页面中 各个UI元素的布局参考数据，布局参考数据可以为：文字坐标、字体大小、 图片坐标、图片尺寸等有关UI元素布局位置和大小的数据。

步骤102，根据预设尺寸和当前设备屏幕尺寸，计算缩放因子。

在应用启动后，获取启动应用的当前终端设备的屏幕尺寸。具体地，可 获取当前终端设备的设备硬件信息，如：设备型号，根据设备硬件信息查询 得到当前设备屏幕尺寸。根据上述设计稿对应的预设尺寸和当前设备屏幕尺 寸，计算缩放因子。可选地，缩放因子D可依据预设尺寸的宽度W1和当前 设备屏幕尺寸的宽度W2来计算，参见如下公式：

D＝W2/W1

步骤103，将布局参考数据和缩放因子输入到计算组件中，得到由计算组 件计算并输出的布局调整数据。

本方法通过预先创建的计算组件来实现计算处理。该计算组件内提供一 套数学方法，利用缩放因子对所有的输入数据做乘法，得到适配当前设备屏 幕尺寸的最佳布局配置数据，作为布局调整数据。本方法中，计算组件所实 现的计算处理是基于缩放因子进行等比例计算，因此输出的布局调整数据相 对于布局参考数据来说，达到等比例调整的技术效果。

步骤104，根据布局调整数据进行页面布局处理。

作为一种实施方式，本方法的执行主体为服务端，具体地，在应用客户 端启动后，服务端获取启动应用的当前设备的屏幕尺寸，根据上述方法得到 布局调整数据，根据布局调整数据对页面进行布局处理后，反馈给应用客户 端进行绘制呈现。

作为另一种实施方式，本方法的执行主体为客户端，具体地，在应用客 户端启动后，客户端接收服务端反馈的未经调整的页面，在客户端本地根据 上述方法得到布局调整数据，根据布局调整数据对页面进行布局处理后，然 后进行绘制呈现。

本发明上述实施例提供的方案，无需设计人员根据不同设备屏幕的尺寸 的不同分别与之匹配的设计稿，仅需设计人员涉及一套通用的设计稿即可， 根据该通用设计稿提供的布局配置数据作为布局参考数据，对布局参考数据 进行适配调整处理，得到更适配当前设备屏幕尺寸的布局调整数据，减少了 人效成本；同时，由于上述适配调整基于缩放因子进行等比例调整，所以不 同设备上显示的内容保持一致，保证了使用不同设备时界面观感一致性，能 够完整还原页面布局设计思路，改善了显示效果。

图2示出了根据本发明另一个实施例的方法的流程示意图。如图2所示， 该方法包括以下步骤：

步骤201，获取依据预设尺寸进行页面布局的布局参考数据。

本实施例仅需设计人员设计一套通用的设计稿，该设计稿具体为一份版 面尺寸为预设尺寸、具有高保真效果的页面布局设计稿，例如设计一份预设 尺寸为1920*1080的设计稿。从该设计稿中获取布局配置数据作为布局参考 数据。具体地，从设计稿中可获取页面中各个UI元素的布局参考数据，布局 参考数据可以为：文字坐标、字体大小、图片坐标、图片尺寸等有关UI元素 布局位置和尺寸的数据。

步骤202，获取当前设备的设备型号信息，根据设备型号信息，确定当前 设备屏幕的一屏所能展示的页面份数。

在应用启动后，获取当前设备的设备型号信息。具体地，可获取当前终 端设备的设备硬件信息，如：设备型号，根据设备型号信息确定当前设备屏 幕的一屏所能展示的页面份数。

以手机和平板电脑为例，由于平板电脑的屏幕尺寸较大，手机屏幕尺寸 较小，如果当前设备为平板电脑，则确定当前设备屏幕的一屏所能展示的页 面份数为2份，即一屏展示左右两份页面；如果当前设备为手机，则确定当 前设备屏幕的一屏所能展示的页面份数为1份，即一屏展示1份页面。

图3示出了本发明实施例中手机中呈现应用页面的示意图，图4示出了 本发明实施例中平板电脑中呈现应用页面的示意图。图3中当前设备屏幕的 一屏所展示的页面为1份，图4中当前设备屏幕的一屏所能展示的页面为2 份，分别为左右两份。

应当理解的是，关于一屏展示单份页面或多份页面不仅限于根据手机和 平板电脑进行区分，对于某些屏幕尺寸够大的手机，也可以支持一屏展示多 份页面。进一步，页面份数可依据当前设备屏幕尺寸而确定。

步骤203，根据预设尺寸、当前设备屏幕尺寸以及页面份数，计算缩放因 子。

根据上述设计稿对应的预设尺寸、当前设备屏幕尺寸以及页面份数，计 算缩放因子。可选地，缩放因子D可依据预设尺寸的宽度W1、当前设备屏 幕尺寸的宽度W2以及页面份数N来计算，参见如下公式：

D＝W2/(N*W1)

步骤204，将布局参考数据和缩放因子输入到计算组件中，得到由计算组 件计算并输出的布局调整数据。

本方法通过预先创建的计算组件来实现计算处理。该计算组件内提供一 套数学方法，利用缩放因子对所有的输入数据做乘法，得到适配当前设备屏 幕尺寸的最佳布局配置数据，作为布局调整数据。本方法中，计算组件所实 现的计算处理是基于缩放因子进行等比例计算，因此输出的布局调整数据相 对于布局参考数据来说，达到等比例调整的技术效果。

作为可选的一种实施方式，本实施例可以以UI元素为单位执行计算处理。 具体地，页面包含至少一个第一UI元素，每个第一UI元素具有对应的布局 参考数据；将各个第一UI元素的布局参考数据和缩放因子输入到计算组件中， 得到由计算组件计算并输出的各个第一UI元素的布局调整数据。在该实施方 式中，将每个UI元素的布局参考数据作为输入数据，利用缩放因子对输入数 据做乘法，得到每个UI元素的布局调整数据。其中布局参考数据和布局调整 数据至少包含：UI元素的坐标数据和尺寸数据，通过将UI元素的坐标数据和 尺寸数据输入到计算组件中，计算得到等比例调整后的UI元素的坐标数据和 尺寸数据。

如图3所示，该页面具体为书城页面，书城页面的设计思路是以列表形 式展示书籍信息，其中的UI元素包括：书封31、书籍名称32、书籍介绍33， 书封31为图片，书籍名称32和书籍介绍33为文字。利用上述实施方式，可 以分别将设计稿中预设的书封31的图片坐标和图片尺寸以及缩放因子输入到 计算组件中，得到调整后的图片坐标和图片尺寸，作为书封31的布局调整数 据；将设计稿中预设的书籍名称32的文字坐标和字体大小以及缩放因子输入 到计算组件中，得到调整后的文字坐标和字体大小，作为书籍名称32的布局 调整数据；将设计稿中预设的书籍介绍33的文字坐标和字体大小以及缩放因 子输入到计算组件中，得到调整后的文字坐标和字体大小，作为书籍介绍33 的布局调整数据，从而得到适配手机屏幕尺寸的各个UI元素的布局调整数据。

同理，针对图4，依照上述方式得到适配平板电脑屏幕尺寸的各个UI元 素的布局调整数据。

作为可选的另一种实施方式，本实施例还可以以区块为单位执行计算处 理。具体地，页面包含位于各个区块内的至少一个第二UI元素，每个第二 UI元素具有对应的布局相对参考数据，每个区块具有对应的布局参考数据； 以区块为单位，将属于同一区块的各个第二UI元素的布局相对参考数据和缩 放因子输入到计算组件中，得到由计算组件计算并输出的属于同一区块的各 个第二UI元素的布局相对调整数据；将各个区块的布局参考数据和缩放因子 输入到计算组件中，得到由计算组件计算并输出的各个区块的布局调整数据。

其中，布局相对数据(包括：布局相对参考数据和布局相对调整数据) 是位于区块内的UI元素相对于区块的布局数据，以图3为例，书封31、书籍 名称32、书籍介绍33属于同一区块30，书封31、书籍名称32、书籍介绍33 的布局相对数据是相对于区块的布局数据。例如，书封31的图片坐标为图片 相对坐标，是相对于区块坐标而言。

利用以区块为单位的上述处理方式，可以分别将设计稿中预设的区块30 内的书封31、书籍名称32、书籍介绍33的相对坐标和尺寸(对于图片，尺 寸为图片尺寸；对于文字，尺寸为字体大小)以及缩放因子输入到计算组件 中，得到调整后的相对坐标和尺寸，作为各个UI元素的布局相对调整数据； 将设计稿中预设的区块30的区块坐标和区块尺寸以及缩放因子输入到计算组 件中，得到调整后的区块坐标和区块尺寸，作为区块的布局调整数据。

若页面中包含多个区块，可以按照相同的处理方式进行计算处理。

进一步，若页面中存在至少两个区块，该至少两个区块内的至少一个第 二UI元素的布局相对参考数据相同，表明至少两个区块的设计样式一致。以 图3为例，书城页面中每个区块对应一本书籍，呈现为列表形式的页面，各 个区块内的设计样式一致。针对这种情况，本方法还包括：在得到由计算组 件计算并输出的至少两个区块中任一区块的各个第二UI元素的布局相对调整 数据之后，对于至少两个区块中的其它区块，复用该区块的各个第二UI元素 的布局相对调整数据。也即，在得到区块30内各个UI元素的布局相对调整 数据之后，无需再计算其它区块内的UI元素的布局相对调整数据，直接复用 区块30内各个UI元素的布局相对调整数据即可。通过这种处理方式，可以 大大减少计算组件的计算量，提升计算效率。

步骤205，根据布局调整数据进行页面布局处理。

根据各个第一UI元素的布局调整数据进行页面布局处理。对于存在区块 的页面，则根据各个区块的布局调整数据以及属于同一区块的各个第二UI元 素的布局相对调整数据进行页面布局处理。

进一步，针对当前设备屏幕一屏展示多份页面的情况，在进行页面布局 处理时，需要对除了第一份页面以外的其它页面的UI元素进行平移处理。以 图4为例，左边份页面为第一份页面，直接根据布局调整数据进行页面布局 处理即可；右边份页面布局时需要进行平移处理，使其平移至屏幕右半部。

图5示出了本发明实施例中手机中呈现书籍列表页面的示意图，图6示 出了本发明实施例中平板电脑中呈现书籍列表页面的示意图。图5中当前设 备屏幕的一屏所展示的书籍列表为1列，图6中当前设备屏幕的一屏所能展 示的书籍列表为2列，分别为左右两列。

如图5和图6所示，这两个书籍列表页面中相同的书籍有：中药学(本 科)、中草药的美丽传说、脊柱运动与运动力学100个…、按摩推拿学、中 医基础理论，通过对比发现，在不同设备中相同书籍对应的区块内显示的内 容保持一致，例如，中药学(本科)这本书籍的书籍介绍UI元素显示的文字 均是“中药学是研究中药的基本理论和常用中药的性能、功效、临床应用规 律等知识的一门…”，且换行位置也相同，也即，即使设备屏幕尺寸有大有小，但相同书籍区块内所露出的文字内容数量、图片等相一致，等保证了使 用不同设备时界面观感一致性。

可选地，本发明实施例提供的方法还可适用于手机或平板电脑横屏时页 面布局的自适应调整。为了能够完整还原页面布局设计思路，当监测到当前 设备处于横屏状态时，根据上述流程确定的布局调整数据进行页面布局，使 得页面(一份或多份)呈现在横屏的居中位置，两侧进行留白处理，以保证 设备横竖屏界面观感的一致性，完整还原页面布局设计思路。

进一步，在步骤205之前，本实施例提供的方法还包括：针对任一第一 UI元素，判断该第一UI元素是否为非矢量元素；若是，则对该第一UI元素 的布局调整数据进行取整处理，而后利用取整处理后的布局调整数据进行页 面布局处理。若否，则直接使用计算组件输出的布局调整数据进行页面布局 处理。或者，针对任一第二UI元素，判断该第二UI元素是否为非矢量元素； 若是，则对该第二UI元素的布局相对调整数据进行取整处理，并对该第二 UI元素所属的区块的布局调整数据进行取整处理，而后利用取整处理后的布 局调整数据进行页面布局处理。若否，则直接使用计算组件输出的布局调整 数据进行页面布局处理。

在计算机图形学中，矢量元素是用点、直线或多边形等基于数学方程的 几何图元表示，保存的是线条和图块的信息；矢量元素和非矢量元素的区别 在于，矢量元素与分辨率和大小无关，无论放大、缩小或旋转都不会失真； 而非矢量元素会出现失真。在上述方法中，计算组件计算并输出的布局调整 数据有可能为小数，如果UI元素是非矢量元素，则依据小数进行布局处理会 造成UI元素出现失真，导致UI元素呈现不清晰，为了解决该问题，本实施 例在得到各个UI元素的布局调整数据之后，判断UI元素是否为非矢量元素， 若是，则对该UI元素的布局调整数据进行取整处理。其中取整处理可以为对 小数部分做四舍五入处理或者舍尾处理，保证非矢量UI元素的布局调整数据 为整数。另外，若区块内的UI元素为非矢量元素，则还需对区块的布局调整 数据进行取整处理。

本发明上述实施例提供的方案，无需设计人员根据不同设备屏幕的尺寸 的不同分别与之匹配的设计稿，仅需设计人员涉及一套通用的设计稿即可， 根据该通用设计稿提供的布局配置数据作为布局参考数据，对布局参考数据 进行适配调整处理，得到更适配当前设备屏幕尺寸的布局调整数据，减少了 人效成本；同时，由于上述适配调整基于缩放因子进行等比例调整，所以不 同设备上显示的内容保持一致，保证了使用不同设备时界面观感一致性，能 够完整还原页面布局设计思路，改善了显示效果。进一步，若当前设备的屏幕尺寸足够大，本实施例还支持一屏展示N份页面，即默认展示N份设计稿 内容，在计算缩放因子时，利用屏幕宽度的1/N比上设计稿的预设宽度得到 缩放因子，在还原页面布局设计思路的基础上，尽可能一屏展示更多的内容。 再进一步，在以区块为单位的计算处理过程中，通过复用具有相同设计样式 的区块内UI元素的布局调整数据，可以大大减少计算组件的计算量，提升了 计算效率。对于页面中存在非矢量元素的情况，能够保证非矢量元素的清晰 呈现。

本发明实施例还提供了一种非易失性计算机存储介质，计算机存储介质 存储有至少一可执行指令，该计算机可执行指令可执行上述任意方法实施例 中的页面布局的自适应调整方法，用于针对不同设备屏幕尺寸调整页面布局。

可执行指令具体可以用于使得处理器执行以下操作：

获取依据预设尺寸进行页面布局的布局参考数据；

根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子；

将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组 件计算并输出的布局调整数据；

根据所述布局调整数据进行页面布局处理。

在一种可选的实施方式中，所述可执行指令进一步使所述处理器执行以 下操作：

获取当前设备的设备型号信息；

根据所述设备型号信息，确定当前设备屏幕的一屏所能展示的页面份数；

根据所述预设尺寸、当前设备屏幕尺寸以及所述页面份数，计算缩放因 子。

在一种可选的实施方式中，所述页面包含至少一个第一UI元素，每个第 一UI元素具有对应的布局参考数据；所述可执行指令进一步使所述处理器执 行以下操作：

将各个第一UI元素的布局参考数据和所述缩放因子输入到计算组件中， 得到由所述计算组件计算并输出的各个第一UI元素的布局调整数据。

在一种可选的实施方式中，所述页面包含位于各个区块内的至少一个第 二UI元素，每个第二UI元素具有对应的布局相对参考数据，每个区块具有 对应的布局参考数据；所述可执行指令进一步使所述处理器执行以下操作：

以区块为单位，将属于同一区块的各个第二UI元素的布局相对参考数据 和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的属于 同一区块的各个第二UI元素的布局相对调整数据；

将各个区块的布局参考数据和所述缩放因子输入到计算组件中，得到由 所述计算组件计算并输出的各个区块的布局调整数据；

根据各个区块的布局调整数据以及属于同一区块的各个第二UI元素的布 局相对调整数据进行页面布局处理。

在一种可选的实施方式中，所述页面中存在至少两个区块，该至少两个 区块内的至少一个第二UI元素的布局相对参考数据相同；所述可执行指令进 一步使所述处理器执行以下操作：

在得到由所述计算组件计算并输出的所述至少两个区块中任一区块的各 个第二UI元素的布局相对调整数据之后，对于所述至少两个区块中的其它区 块，复用该区块的各个第二UI元素的布局相对调整数据。

在一种可选的实施方式中，所述可执行指令进一步使所述处理器执行以 下操作：

针对任一第一UI元素，判断该第一UI元素是否为非矢量元素；

若是，则对该第一UI元素的布局调整数据进行取整处理。

在一种可选的实施方式中，所述可执行指令进一步使所述处理器执行以 下操作：

针对任一第二UI元素，判断该第二UI元素是否为非矢量元素；

若是，则对该第二UI元素的布局相对调整数据进行取整处理，并对该第 二UI元素所属的区块的布局调整数据进行取整处理。

图7示出了根据本发明一个实施例的计算设备的结构示意图，本发明具 体实施例并不对计算设备的具体实现做限定。

如图7所示，该计算设备可以包括：处理器(processor)502、通信接口(Communications Interface)504、存储器(memory)506、以及通信总线508。

其中：处理器502、通信接口504、以及存储器506通过通信总线508完 成相互间的通信。

通信接口504，用于与其它设备比如客户端或其它服务器等的网元通信。

处理器502，用于执行程序510，具体可以执行上述页面布局的自适应调 整方法实施例中的相关步骤。

具体地，程序510可以包括程序代码，该程序代码包括计算机操作指令。

处理器502可能是中央处理器CPU，或者是特定集成电路ASIC (ApplicationSpecific Integrated Circuit)，或者是被配置成实施本发明实施例 的一个或多个集成电路。计算设备包括的一个或多个处理器，可以是同一类 型的处理器，如一个或多个CPU；也可以是不同类型的处理器，如一个或多 个CPU以及一个或多个ASIC。

存储器506，用于存放程序510。存储器506可能包含高速RAM存储器， 也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存 储器。

程序具体可以用于使得处理器执行以下操作：

获取依据预设尺寸进行页面布局的布局参考数据；

根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子；

将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组 件计算并输出的布局调整数据；

根据所述布局调整数据进行页面布局处理。

在一种可选的实施方式中，程序进一步使所述处理器执行以下操作：

获取当前设备的设备型号信息；

根据所述设备型号信息，确定当前设备屏幕的一屏所能展示的页面份数；

根据所述预设尺寸、当前设备屏幕尺寸以及所述页面份数，计算缩放因 子。

在一种可选的实施方式中，所述页面包含至少一个第一UI元素，每个第 一UI元素具有对应的布局参考数据；程序进一步使所述处理器执行以下操作：

将各个第一UI元素的布局参考数据和所述缩放因子输入到计算组件中， 得到由所述计算组件计算并输出的各个第一UI元素的布局调整数据。

在一种可选的实施方式中，所述页面包含位于各个区块内的至少一个第 二UI元素，每个第二UI元素具有对应的布局相对参考数据，每个区块具有 对应的布局参考数据；程序进一步使所述处理器执行以下操作：

以区块为单位，将属于同一区块的各个第二UI元素的布局相对参考数据 和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的属于 同一区块的各个第二UI元素的布局相对调整数据；

将各个区块的布局参考数据和所述缩放因子输入到计算组件中，得到由 所述计算组件计算并输出的各个区块的布局调整数据；

根据各个区块的布局调整数据以及属于同一区块的各个第二UI元素的布 局相对调整数据进行页面布局处理。

在一种可选的实施方式中，所述页面中存在至少两个区块，该至少两个 区块内的至少一个第二UI元素的布局相对参考数据相同；程序进一步使所述 处理器执行以下操作：

在得到由所述计算组件计算并输出的所述至少两个区块中任一区块的各 个第二UI元素的布局相对调整数据之后，对于所述至少两个区块中的其它区 块，复用该区块的各个第二UI元素的布局相对调整数据。

在一种可选的实施方式中，程序进一步使所述处理器执行以下操作：

针对任一第一UI元素，判断该第一UI元素是否为非矢量元素；

若是，则对该第一UI元素的布局调整数据进行取整处理。

在一种可选的实施方式中，程序进一步使所述处理器执行以下操作：

针对任一第二UI元素，判断该第二UI元素是否为非矢量元素；

若是，则对该第二UI元素的布局相对调整数据进行取整处理，并对该第 二UI元素所属的区块的布局调整数据进行取整处理。

在此提供的算法或显示不与任何特定计算机、虚拟系统或者其它设备固 有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述， 构造这类系统所要求的结构是显而易见的。此外，本发明实施例也不针对任 何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明 的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本 发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未 详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本发明并帮助理解各个发明方面中的一个 或多个，在上面对本发明的示例性实施例的描述中，本发明实施例的各个特 征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将 该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权 利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书 所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此， 遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个 权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自 适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以 把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可 以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者 单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴 随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或 者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴 随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相 似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此的一些实施例包括其它实 施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意 味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要 求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理 器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当 理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本 发明实施例的一些或者全部部件的一些或者全部功能。本发明还可以实现为 用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如， 计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算 机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从 因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制， 并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实 施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要 求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件 之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括 有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干 装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具 体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单 词解释为名称。上述实施例中的步骤，除有特殊说明外，不应理解为对执行 顺序的限定。

本发明公开了：

A1.一种页面布局的自适应调整方法，用于针对不同设备屏幕尺寸调整 页面布局，所述方法包括：

获取依据预设尺寸进行页面布局的布局参考数据；

根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子；

将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组 件计算并输出的布局调整数据；

根据所述布局调整数据进行页面布局处理。

A2.根据A1所述的方法，在所述根据所述预设尺寸和当前设备屏幕尺 寸，计算缩放因子之前，所述方法还包括：

获取当前设备的设备型号信息；

根据所述设备型号信息，确定当前设备屏幕的一屏所能展示的页面份数；

所述根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子进一步包括： 根据所述预设尺寸、当前设备屏幕尺寸以及所述页面份数，计算缩放因子。

A3.根据A1或A2所述的方法，所述页面包含至少一个第一UI元素， 每个第一UI元素具有对应的布局参考数据；

所述将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计 算组件计算并输出的布局调整数据进一步包括：

将各个第一UI元素的布局参考数据和所述缩放因子输入到计算组件中， 得到由所述计算组件计算并输出的各个第一UI元素的布局调整数据。

A4.根据A1或A2或A3所述的方法，所述页面包含位于各个区块内的 至少一个第二UI元素，每个第二UI元素具有对应的布局相对参考数据，每 个区块具有对应的布局参考数据；

所述将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计 算组件计算并输出的布局调整数据进一步包括：

以区块为单位，将属于同一区块的各个第二UI元素的布局相对参考数据 和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的属于 同一区块的各个第二UI元素的布局相对调整数据；

将各个区块的布局参考数据和所述缩放因子输入到计算组件中，得到由 所述计算组件计算并输出的各个区块的布局调整数据；

所述根据所述布局调整数据进行页面布局处理进一步包括：

根据各个区块的布局调整数据以及属于同一区块的各个第二UI元素的布 局相对调整数据进行页面布局处理。

A5.根据A4所述的方法，所述页面中存在至少两个区块，该至少两个 区块内的至少一个第二UI元素的布局相对参考数据相同；

所述方法还包括：在得到由所述计算组件计算并输出的所述至少两个区 块中任一区块的各个第二UI元素的布局相对调整数据之后，对于所述至少两 个区块中的其它区块，复用该区块的各个第二UI元素的布局相对调整数据。

A6.根据A3所述的方法，在所述根据所述布局调整数据进行页面布局 处理之前，所述方法还包括：

针对任一第一UI元素，判断该第一UI元素是否为非矢量元素；

若是，则对该第一UI元素的布局调整数据进行取整处理。

A7.根据A4所述的方法，在所述根据所述布局调整数据进行页面布局 处理之前，所述方法还包括：

针对任一第二UI元素，判断该第二UI元素是否为非矢量元素；

若是，则对该第二UI元素的布局相对调整数据进行取整处理，并对该第 二UI元素所属的区块的布局调整数据进行取整处理。

B8.一种计算设备，包括：处理器、存储器、通信接口和通信总线，所 述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器 针对不同设备屏幕尺寸调整页面布局，具体执行以下操作：

获取依据预设尺寸进行页面布局的布局参考数据；

根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子；

将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组 件计算并输出的布局调整数据；

根据所述布局调整数据进行页面布局处理。

B9.根据B8所述的计算设备，所述可执行指令进一步使所述处理器执行 以下操作：

获取当前设备的设备型号信息；

根据所述设备型号信息，确定当前设备屏幕的一屏所能展示的页面份数；

根据所述预设尺寸、当前设备屏幕尺寸以及所述页面份数，计算缩放因 子。

B10.根据B8或B9所述的计算设备，所述页面包含至少一个第一UI元 素，每个第一UI元素具有对应的布局参考数据；所述可执行指令进一步使所 述处理器执行以下操作：

将各个第一UI元素的布局参考数据和所述缩放因子输入到计算组件中， 得到由所述计算组件计算并输出的各个第一UI元素的布局调整数据。

B11.根据B8或B9或B10所述的计算设备，所述页面包含位于各个区 块内的至少一个第二UI元素，每个第二UI元素具有对应的布局相对参考数 据，每个区块具有对应的布局参考数据；所述可执行指令进一步使所述处理 器执行以下操作：

以区块为单位，将属于同一区块的各个第二UI元素的布局相对参考数据 和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的属于 同一区块的各个第二UI元素的布局相对调整数据；

将各个区块的布局参考数据和所述缩放因子输入到计算组件中，得到由 所述计算组件计算并输出的各个区块的布局调整数据；

根据各个区块的布局调整数据以及属于同一区块的各个第二UI元素的布 局相对调整数据进行页面布局处理。

B12.根据B11所述的计算设备，所述页面中存在至少两个区块，该至少 两个区块内的至少一个第二UI元素的布局相对参考数据相同；所述可执行指 令进一步使所述处理器执行以下操作：

在得到由所述计算组件计算并输出的所述至少两个区块中任一区块的各 个第二UI元素的布局相对调整数据之后，对于所述至少两个区块中的其它区 块，复用该区块的各个第二UI元素的布局相对调整数据。

B13.根据B10所述的计算设备，所述可执行指令进一步使所述处理器执 行以下操作：

针对任一第一UI元素，判断该第一UI元素是否为非矢量元素；

若是，则对该第一UI元素的布局调整数据进行取整处理。

B14.根据B11所述的计算设备，所述可执行指令进一步使所述处理器执 行以下操作：

针对任一第二UI元素，判断该第二UI元素是否为非矢量元素；

若是，则对该第二UI元素的布局相对调整数据进行取整处理，并对该第 二UI元素所属的区块的布局调整数据进行取整处理。

C15.一种计算机存储介质，所述存储介质中存储有至少一可执行指令， 所述可执行指令使处理器执行如A1-A7中任一项所述的页面布局的自适应调 整方法对应的操作。

Claims (10)

1.一种页面布局的自适应调整方法，用于针对不同设备屏幕尺寸调整页面布局，所述方法包括：

获取依据预设尺寸进行页面布局的布局参考数据；

根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子；

将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的布局调整数据；

根据所述布局调整数据进行页面布局处理。

2.根据权利要求1所述的方法，在所述根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子之前，所述方法还包括：

获取当前设备的设备型号信息；

根据所述设备型号信息，确定当前设备屏幕的一屏所能展示的页面份数；

所述根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子进一步包括：根据所述预设尺寸、当前设备屏幕尺寸以及所述页面份数，计算缩放因子。

3.根据权利要求1或2所述的方法，所述页面包含至少一个第一UI元素，每个第一UI元素具有对应的布局参考数据；

所述将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的布局调整数据进一步包括：

将各个第一UI元素的布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的各个第一UI元素的布局调整数据。

4.根据权利要求1或2或3所述的方法，所述页面包含位于各个区块内的至少一个第二UI元素，每个第二UI元素具有对应的布局相对参考数据，每个区块具有对应的布局参考数据；

所述将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的布局调整数据进一步包括：

以区块为单位，将属于同一区块的各个第二UI元素的布局相对参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的属于同一区块的各个第二UI元素的布局相对调整数据；

将各个区块的布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的各个区块的布局调整数据；

所述根据所述布局调整数据进行页面布局处理进一步包括：

根据各个区块的布局调整数据以及属于同一区块的各个第二UI元素的布局相对调整数据进行页面布局处理。

5.根据权利要求4所述的方法，所述页面中存在至少两个区块，该至少两个区块内的至少一个第二UI元素的布局相对参考数据相同；

所述方法还包括：在得到由所述计算组件计算并输出的所述至少两个区块中任一区块的各个第二UI元素的布局相对调整数据之后，对于所述至少两个区块中的其它区块，复用该区块的各个第二UI元素的布局相对调整数据。

6.根据权利要求3所述的方法，在所述根据所述布局调整数据进行页面布局处理之前，所述方法还包括：

针对任一第一UI元素，判断该第一UI元素是否为非矢量元素；

若是，则对该第一UI元素的布局调整数据进行取整处理。

7.根据权利要求4所述的方法，在所述根据所述布局调整数据进行页面布局处理之前，所述方法还包括：

针对任一第二UI元素，判断该第二UI元素是否为非矢量元素；

若是，则对该第二UI元素的布局相对调整数据进行取整处理，并对该第二UI元素所属的区块的布局调整数据进行取整处理。

8.一种计算设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器针对不同设备屏幕尺寸调整页面布局，具体执行以下操作：

获取依据预设尺寸进行页面布局的布局参考数据；

根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子；

将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的布局调整数据；

根据所述布局调整数据进行页面布局处理。

9.根据权利要求8所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：

获取当前设备的设备型号信息；

根据所述设备型号信息，确定当前设备屏幕的一屏所能展示的页面份数；

根据所述预设尺寸、当前设备屏幕尺寸以及所述页面份数，计算缩放因子。

10.一种计算机存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行如权利要求1-7中任一项所述的页面布局的自适应调整方法对应的操作。

Images