CN115291993A - 页面调整方法、装置、计算机系统及可读存储介质 - Google Patents

Abstract

本公开提供了一种页面调整方法、装置、计算机系统及可读存储介质，可用于物联网、电子技术领域或其他领域。其中，该方法包括：获取初始设计页面的页面度量信息和当前设备屏幕的屏幕度量信息；根据页面度量信息和屏幕度量信息，确定初始设计页面和当前设备屏幕之间的基准比例信息；以及根据页面展示属性信息和基准比例信息，将初始设计页面调整为适配当前设备屏幕的目标页面。

Description

页面调整方法、装置、计算机系统及可读存储介质

技术领域

本公开涉及物联网、电子技术领域，更具体地，涉及一种页面调整方法、装置、计算机系统及可读存储介质。

背景技术

在移动端应用开发流程中，通常由UI(User Interface，用户界面)设计人员将一套带有尺寸标注的设计稿交给移动端开发人员，移动端开发人员根据设计稿上的尺寸进行页面组件布局以及处理逻辑代码的编写工作，使得设计稿能够适配移动端屏幕尺寸。

在实现本公开构思的过程中，发明人发现相关技术中至少存在如下问题：不同移动端设备的屏幕尺寸不同，页面与屏幕适配困难。

发明内容

有鉴于此，本公开提供了一种页面调整方法、装置、计算机系统及可读存储介质。

本公开的一个方面提供了一种页面调整方法，包括：获取初始设计页面的页面度量信息和当前设备屏幕的屏幕度量信息；根据所述页面度量信息和所述屏幕度量信息，确定所述初始设计页面和所述当前设备屏幕之间的基准比例信息；以及根据页面展示属性信息和所述基准比例信息，将所述初始设计页面调整为适配所述当前设备屏幕的目标页面。

本公开的另一个方面提供了一种页面调整装置，包括：第一获取模块，用于获取初始设计页面的页面度量信息和当前设备屏幕的屏幕度量信息；确定模块，用于根据所述页面度量信息和所述屏幕度量信息，确定所述初始设计页面和所述当前设备屏幕之间的基准比例信息；以及调整模块，用于根据页面展示属性信息和所述基准比例信息，将所述初始设计页面调整为适配所述当前设备屏幕的目标页面。

本公开的另一方面提供了一种计算机系统，包括：一个或多个处理器；存储器，用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现本公开所述的页面调整方法。

本公开的另一方面提供了一种计算机可读存储介质，其上存储有计算机可执行指令，所述指令在被执行时用于实现本公开所述的页面调整方法。

本公开的另一方面提供了一种计算机程序产品，所述计算机程序产品包括计算机可执行指令，所述指令在被执行时用于实现本公开所述的页面调整方法。

根据本公开的实施例，通过采用了根据页面度量信息和屏幕度量信息，确定初始设计页面和当前设备屏幕之间的基准比例信息，以及根据页面展示属性信息和基准比例信息，将初始设计页面调整为适配当前设备屏幕的目标页面的技术手段，由于只需要根据页面展示属性信息和基准比例信息，便可自动完成屏幕适配，所以至少部分地克服了不同终端设备的屏幕尺寸不同导致的页面与屏幕适配困难的技术问题，减少了屏幕适配的工作量，提高了开发效率。

附图说明

通过以下参照附图对本公开实施例的描述，本公开的上述以及其他目的、特征和优点将更为清楚，在附图中：

图1示意性示出了根据本公开实施例的可以应用页面调整方法的示例性系统架构；

图2示意性示出了根据本公开实施例的页面调整方法的流程图；

图3示意性示出了根据本公开实施例的页面调整方法应用于安卓类设备和苹果类设备时的流程图；

图4A示意性示出了根据本公开实施例的初始设计页面在适配第一设备屏幕时的展示效果图；

图4B示意性示出了根据本公开实施例的初始设计页面在适配第二设备屏幕时的展示效果图；

图5示意性示出了根据本公开的实施例的页面调整装置的框图；以及

图6示意性示出了根据本公开实施例的适于实现页面调整方法的计算机系统的框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。在使用类似于“A、B或C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B或C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。

移动端开发人员基于文字流式、控件弹性、图片等比缩放等准则进行页面视图的开发。为达到页面视图与移动端设备屏幕适配的效果，在安卓平台采用的开发方案包括：编写脚本将页面视图的长度转换成适配各种设备屏幕的分辨率的长度。修改安卓控件的DisplayMetrics属性的density值，从而修改控件的长宽像素值。在苹果平台采用的开发方案包括：采用自动布局的方式进行画面布局，通过设定控件的宽度、高度，与其他的控件的相对位置等进行控件布局。适配方案主要是使用UI图尺寸×屏幕比例的方式设置控件的长、宽约束，从而达到在小屏幕上缩小，在大屏幕上放大的效果。

发明人在实现本公开构思的过程中发现，编写脚本的方式需要在脚本中穷举所有机型的分辨率，该方案难以覆盖市面上的所有机型的分辨率。修改安卓控件的density值的方式会出现系统刷新时desity值被还原的情况。自动布局的方式需要在所有设置约束的地方都乘以屏幕比例系数，代码繁琐而且增加了开发人员的工作量。也即，上述方案存在机型覆盖率低、不稳定、开发量大等缺点。此外，由于安卓系统开源定制化的原因，安卓手机的碎片化问题更加严重。

本公开的实施例提供了一种页面调整方法、装置、计算机系统及可读存储介质。该方法包括：获取初始设计页面的页面度量信息和当前设备屏幕的屏幕度量信息。根据页面度量信息和屏幕度量信息，确定初始设计页面和当前设备屏幕之间的基准比例信息。根据页面展示属性信息和基准比例信息，将初始设计页面调整为适配当前设备屏幕的目标页面。

图1示意性示出了根据本公开实施例的可以应用页面调整方法的示例性系统架构100。需要注意的是，图1所示仅为可以应用本公开实施例的系统架构的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、系统、环境或场景。

如图1所示，根据该实施例的系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线和/或无线通信链路等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端和/或社交平台软件等(仅为示例)。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对用户利用终端设备101、102、103所浏览的网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的用户请求等数据进行分析等处理，并将处理结果(例如根据用户请求获取或生成的网页、信息、或数据等)反馈给终端设备。

需要说明的是，本公开实施例所提供的页面调整方法一般可以由服务器105执行。相应地，本公开实施例所提供的页面调整装置一般可以设置于服务器105中。本公开实施例所提供的页面调整方法也可以由不同于服务器105且能够与终端设备101、102、103和/或服务器105通信的服务器或服务器集群执行。相应地，本公开实施例所提供的页面调整装置也可以设置于不同于服务器105且能够与终端设备101、102、103和/或服务器105通信的服务器或服务器集群中。或者，本公开实施例所提供的页面调整方法也可以由终端设备101、102、或103执行，或者也可以由不同于终端设备101、102、或103的其他终端设备执行。相应地，本公开实施例所提供的页面调整装置也可以设置于终端设备101、102、或103中，或设置于不同于终端设备101、102、或103的其他终端设备中。

例如，初始设计页面的页面度量信息和当前设备屏幕的屏幕度量信息可以原本存储在终端设备101、102、或103中的任意一个(例如，终端设备101，但不限于此)之中，或者存储在外部存储设备上并可以导入到终端设备101中。然后，终端设备101可以在本地执行本公开实施例所提供的页面调整方法，或者将页面度量信息和屏幕度量信息发送到其他终端设备、服务器、或服务器集群，并由接收该页面度量信息和屏幕度量信息的其他终端设备、服务器、或服务器集群来执行本公开实施例所提供的页面调整方法。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

需要说明的是，本公开页面调整方法、页面调整装置、计算机系统、计算机可读存储介质和计算机程序产品可用于物联网、电子技术领域，也可用于除物联网和电子技术领域之外的任意领域，本公开应用页面调整方法、页面调整装置、计算机系统、计算机可读存储介质和计算机程序产品的应用领域不做限定。

图2示意性示出了根据本公开实施例的页面调整方法的流程图。

如图2所示，该方法包括操作S201～S203。

在操作S201，获取初始设计页面的页面度量信息和当前设备屏幕的屏幕度量信息。

根据本公开的实施例，初始设计页面可以表征移动端开发人员根据UI设计人员提供的设计稿设计的页面。页面度量信息可以包括初始设计页面的以分辨率为单位的宽度信息、高度信息等其中至少一种信息。当前设备可以包括电脑、平板、手机及具有显示屏的其他电子设备等其中至少一种设备。屏幕度量信息可以包括当前设备屏幕的设备分辨率信息、逻辑分辨率信息等其中至少一种信息。设备分辨率信息、逻辑分辨率信息均可包括以分辨率为单位的高度信息、宽度信息等其中至少一种信息。

例如，可以根据设计稿对应的尺寸信息，确定初始设计页面的页面设计稿宽度信息designResolutionWidth和页面设计稿高度信息designResolutionHeight等，得到页面度量信息。可以基于系统API(Application Programming Interface，应用程序接口)获取当前设备的屏幕宽度信息screenWidth和屏幕高度信息screenHeight等，得到屏幕度量信息。

需要说明的是，获得的页面度量信息和屏幕度量信息等相关参数信息，可以保存在全局变量中，后续适配过程中可以直接使用。

在操作S202，根据页面度量信息和屏幕度量信息，确定初始设计页面和当前设备屏幕之间的基准比例信息。

根据本公开的实施例，基准比例信息可以表征当前设备屏幕与初始设计页面的适配比例系数。可以根据屏幕高度信息screenHeight和页面高度信息designResolutionHeight，确定基准比例信息alpha。例如，可以将屏幕高度信息screenHeight和页面高度信息designResolutionHeight的比值确定为基准比例信息，即alpha＝screenHeight/designResolutionHeight。在某些实施例中，也可以根据屏幕宽度信息screenWidth和页面宽度信息designResolutionWidth，确定基准比例信息。例如，可以将屏幕宽度信息screenWidth和页面宽度信息designResolutionWidth的比值确定为基准比例信息。

在操作S203，根据页面展示属性信息和基准比例信息，将初始设计页面调整为适配当前设备屏幕的目标页面。

根据本公开的实施例，页面展示属性信息可以包括表征初始设计页面中的各页面组件的展示尺寸、初始设计页面中的各页面组件的展示比例、初始设计页面和当前设备屏幕的适配比例、初始设计页面中各页面组件的相对位置关系等其中至少一个属性的属性信息。初始设计页面中的各页面组件可以包括页面视图组件、页面中文本视图组件、页面中图像视图组件及页面中其他组件等其中至少一种组件。

根据本公开的实施例，在根据获取到的页面度量信息和屏幕度量信息计算得到基准比例信息之后，可以结合基准比例信息和页面展示属性信息，对初始设计页面进行调整，以使得调整后的页面与当前设备屏幕相适配。调整方式例如可以包括：根据基准比例信息，对初始设计页面的页面尺寸进行调整。根据基准比例信息，对初始设计页面的展示比例进行调整。根据基准比例信息，对初始设计页面和当前设备的适配比例进行调整。根据基准比例信息，对初始设计页面中各页面组件的相对位置关系进行调整等。调整方式可不限于此。

通过本公开的上述实施例，由于在进行屏幕适配的过程中，开发人员可以只需指定相关页面展示属性信息，便可自动完成屏幕适配，有效减少了屏幕适配相关的工作量，提高了开发效率。

下面结合具体实施例，对图2所示的方法做进一步说明。

根据本公开的实施例，初始设计页面可以包括至少一个第一页面组件。在执行上述页面调整方法之前，可以根据如下方法获取页面展示属性信息：针对每个第一页面组件，获取第一页面组件对应的页面配置信息。根据页面配置信息，获取与第一页面组件相关的页面展示属性信息。

根据本公开的实施例，第一页面组件可以表征上述初始设计页面中的各页面组件中的任意一个页面组件。根据设计稿设计得到的初始设计页面中的每个第一页面组件可以对应有页面配置信息，该页面配置信息可以通过配置相关属性的内容控制该第一页面组件的展示效果，展示效果可以包括展示尺寸、排布位置等其中至少一种效果。基于此，可以根据每个第一页面组件对应的页面配置信息，获得与第一页面组件相关的页面展示属性信息，从而可通过配置该页面展示属性信息，调整页面展示方式。

通过本公开的上述实施例，可以从页面组件的层面，获得页面展示属性信息，实现通过对页面组件层面的页面展示属性信息进行调整，得到适配当前设备屏幕的页面。通过该种方式，可以至少部分的缓解系统刷新时相关属性信息被还原的情况的发生，并可有效提高开发效率。

根据本公开的实施例，在某些设备中，表征屏幕高度的屏幕度量信息还可以包括屏幕顶部刘海高度信息fringeHeight、屏幕底部安全区域高度信息bottomSafeHeight和屏幕实际高度信息trueHeight。上述操作S202可以包括：根据屏幕顶部刘海高度信息、屏幕底部安全区域高度信息和屏幕实际高度信息中的至少一个信息，确定屏幕可用高度信息。根据屏幕可用高度信息和页面设计稿高度信息，确定基准比例信息。

根据本公开的实施例，屏幕顶部刘海高度信息中的屏幕顶部刘海可以表征某些电子设备上方的包括摄像头、扬声器、麦克风、光感应器等零部件的区域。屏幕可用高度信息可以表征屏幕中实际能够填充页面的部分屏幕的高度的信息。可以根据屏幕实际高度信息trueHeight直接确定屏幕可用高度信息availableHeight，如，availableHeight＝trueHeight。也可以根据屏幕顶部刘海高度信息fringeHeight和屏幕实际高度信息trueHeight确定屏幕可用高度信息availableHeight，如，availableHeight＝trueHeight-fringeHeight。也可以根据屏幕底部安全区域高度信息bottomSafeHeight和屏幕实际高度信息trueHeight确定屏幕可用高度信息availableHeight，如，availableHeight＝trueHeight-bottomSafeHeight。也可以根据屏幕顶部刘海高度信息fringeHeight、屏幕底部安全区域高度信息bottomSafeHeight和屏幕实际高度信息trueHeight确定屏幕可用高度信息availableHeight，如，availableHeight＝trueHeight-bottomSafeHeight-fringeHeight。在此基础上，基准比例信息alpha＝availableHeight/designResolutionHeight。

通过本公开的上述实施例，可以针对各设备屏幕的实际使用情况，确定各种情况下的屏幕可用高度信息，结合页面设计稿高度信息，可以实现在同一设备的多种屏幕使用场景下的页面适配。

根据本公开的实施例，页面展示属性信息可以包括展示度量信息。展示度量信息可以表征初始设计页面与当前设备屏幕的适配比例信息。上述操作S203可以包括：将基准比例信息转换为像素级基准比例信息。将像素级基准比例信息赋值给展示度量信息，得到与初始设计页面相关的适配当前设备屏幕的目标展示度量信息。根据目标展示度量信息，将初始设计页面调整为适配当前设备屏幕的目标页面。

根据本公开的实施例，展示度量信息可以表征页面配置信息中表征页面与屏幕的适配比例的像素级信息。在基于前述方法计算得到基准比例信息alpha之后，可以根据基准比例信息对应的英寸单位与设备屏幕需使用的像素单位的转换关系，即1英寸＝72pt，将基准比例信息alpha转换为像素级基准比例信息density，即可以得到density＝alpha×72。

例如，基于安卓类设备上为使用者封装的处理适配工具类，可以定义入口函数，该入口函数可以首先基于上述方法计算得到density。然后，基于该入口函数可以执行将density赋值给当前应用的DisplayMetrics属性，以及将density赋值给当前应用的所有组件的DisplayMetrics属性的过程，实现适配当前设备屏幕的页面配置。

通过本公开的上述实施例，通过将页面配置信息中的展示度量信息的值配置为像素级基准比例信息，可以实现初始设计页面以适配当前设备屏幕的目标页面的方式在当前设备屏幕中展示，使得开发人员只需要指定展示度量信息这一参数，屏幕适配便可自动完成，减少了屏幕适配相关的工作量，提高了开发效率。

根据本公开的实施例，初始设计页面中可以包括第二页面组件和第三页面组件。页面展示属性信息可以包括表征第二页面组件和第三页面组件之间的相对位置关系的第一约束值信息。上述操作S203还可以包括：根据基准比例信息，对初始设计页面对应的页面组件配置方法中定义的第一约束值信息进行更新，得到第一更新后约束值信息。根据包括第一更新后约束值信息的页面组件配置方法，将初始设计页面调整为适配当前设备屏幕的目标页面。

根据本公开的实施例，第二页面组件和第三页面组件可以表征上述初始设计页面中的各页面组件中的任意一个页面组件。页面组件配置方法可以用于定义页面中每两个页面组件之间的位置限制关系。例如，页面组件配置方法中可以定义两个页面组件之间的偏移量信息等。页面组件配置方法中定义的该偏移量信息可以表征上述第一约束值。

例如，在苹果系统应用开发过程中，可以为苹果类设备中已创建的NSLayoutConstraint类添加静态方法constraintWithItem。静态方法constraintWithItem中可以通过定义视图item、属性attribute、关系relationship、乘因子multiplier、常量constant等信息定义两个页面组件之间的约束关系。通过在该静态方法constraintWithItem中实现约束值加倍，可以实现页面与当前设备屏幕的适配。该适配过程的实现方法可以包括：确定静态方法constraintWithItem中预定义的常量constant的初始值value。计算newValue＝value×alpha。根据包括constant＝newValue的静态方法constraintWithItem，配置适配当前设备屏幕的目标页面。

根据本公开的实施例，初始设计页面中可以包括文本视图组件。页面展示属性信息可以包括表征文本视图组件的字体大小的第二约束值信息。上述操作S203还可以包括：根据基准比例信息，对初始设计页面对应的视图组件配置方法中定义的第二约束值信息进行更新，得到第二更新后约束值信息。根据包括第二更新后约束值信息的视图组件配置方法，将初始设计页面调整为适配当前设备屏幕的目标页面。

根据本公开的实施例，视图组件配置方法可以用于定义文本字符的字体大小。视图组件配置方法中定义的表征字体大小的属性信息可以表征上述第二约束值。

例如，在苹果系统应用开发过程中，可以为苹果类设备中已创建的字符显示相关的视图控件类UILabel、UITextView等添加成员方法setFont。成员方法setFont中可以文本的字体大小。在该setFont方法中可以实现对第二约束值的加倍处理，从而可以实现页面中文本信息以与当前设备屏幕适配的方式展示。对第二约束值进行加倍处理的方法例如可以包括：确定setFont方法中预定义的字体大小size。计算newSize＝size×alpha。根据字体大小为newSize的setFont方法，配置适配当前设备屏幕的文本展示效果。

需要说明的是，可以在苹果类设备中进行如上所述的针对第一约束值和第二约束值的加倍处理的过程，实现初始设计页面在苹果类设备屏幕中的谁配。在该适配过程的基础上，开发人员可以按照UI设计稿上的数值正常编写代码。

通过本公开的上述实施例，通过对页面配置信息中表征页面展示效果的第一约束值和第二约束值其中至少一个约束值进行加倍处理，可以实现初始设计页面以适配当前设备屏幕的目标页面的方式在当前设备屏幕中展示，使得开发人员只需要指定第一约束值和第二约束值等参数，屏幕适配便可自动完成，减少了屏幕适配相关的工作量，提高了开发效率。

图3示意性示出了根据本公开实施例的页面调整方法应用于安卓类设备和苹果类设备时的流程图。

如图3所示，该方法包括操作S301～S310。

在操作S301，通过系统API获得屏幕高度信息，计算屏幕可用高度信息。

在操作S302，计算初始设计页面和当前设备屏幕之间的基准比例信息alpha。

在操作S303，判断设备是否为安卓类设备？若是，则执行操作S304～S306；若否，则执行操作S307～S310。

在操作S304，density＝alpha×72。

在操作S305，将density值赋值给当前应用的DisplayMetrics。

在操作S306，将density值赋值给当前应用的所有页面组件的DisplayMetrics。

在操作S307，创建NSLayoutConstraint的静态方法constraintWithItem，constraintWithItem方法中定义有表征第二面组件和第三页面组件之间的相对位置关系的第一约束值constant＝value。

在操作S308，进行约束值加倍处理：newValue＝value×alpha。

在操作S309，创建视图控件类UILabel、UITextView的成员方法setFont，setFont方法中定义有表征字体大小的第二约束值size。

在操作S310，进行约束值加倍处理：newSize＝size×alpha。

需要说明的是，上述将像素级基准比例信息赋值给展示度量信息、对第一约束值信息进行加倍和对第二约束值信息进行加倍等其中任意两种方法或全部三种方法也可以结合使用，应用于同一待适配设备中，实现页面与设备屏幕的适配。

图4A示意性示出了根据本公开实施例的初始设计页面在适配第一设备屏幕时的展示效果图。

图4B示意性示出了根据本公开实施例的初始设计页面在适配第二设备屏幕时的展示效果图。

参见图4A～4B所示，可以基于上述页面调整方法对包括文本组件的页面视图进行调整，实现如411→421的展示效果的变换，对包括多个页面组件的页面视图进行调整，实现如412→422的展示效果的变换，以及对包括图像组件的页面视图进行调整，实现如413→423的展示效果的变换。

通过本公开的上述实施例，为移动端开发人员提供了一种通用、稳定、开发量极低的页面与屏幕的适配方案，通过将UI设计稿上标注的尺寸按照实际屏幕尺寸比例关系，自动转换为实际屏幕尺寸的方式进行机型适配，可以容易的实现文字流式、控件弹性、图像等比缩放的页面调整标准，实现页面的自动化适配与调整。

图5示意性示出了根据本公开的实施例的页面调整装置的框图。

如图5所示，页面调整装置500包括第一获取模块510、确定模块520和调整模块530。

第一获取模块510，用于获取初始设计页面的页面度量信息和当前设备屏幕的屏幕度量信息。

确定模块520，用于根据页面度量信息和屏幕度量信息，确定初始设计页面和当前设备屏幕之间的基准比例信息。

调整模块530，用于根据页面展示属性信息和基准比例信息，将初始设计页面调整为适配当前设备屏幕的目标页面。

根据本公开的实施例，初始设计页面包括至少一个第一页面组件；页面调整装置还包括第二获取模块和第三获取模块。

第二获取模块，用于针对每个第一页面组件，获取第一页面组件对应的页面配置信息。

第三获取模块，用于根据页面配置信息，获取与第一页面组件相关的页面展示属性信息。

根据本公开的实施例，页面展示属性信息包括展示度量信息，展示度量信息表征初始设计页面与当前设备屏幕的适配比例信息。调整模块包括转换单元、获得单元和第一调整单元。

转换单元，用于将基准比例信息转换为像素级基准比例信息。

获得单元，用于将像素级基准比例信息赋值给展示度量信息，得到与初始设计页面相关的适配当前设备屏幕的目标展示度量信息。

第一调整单元，用于根据目标展示度量信息，将初始设计页面调整为适配当前设备屏幕的目标页面。

根据本公开的实施例，初始设计页面中包括第二页面组件和第三页面组件，页面展示属性信息包括表征第二页面组件和第三页面组件之间的相对位置关系的第一约束值信息。调整模块包括第一更新单元和第二调整单元。

第一更新单元，用于根据基准比例信息，对初始设计页面对应的页面组件配置方法中定义的第一约束值信息进行更新，得到第一更新后约束值信息。

第二调整单元，用于根据包括第一更新后约束值信息的页面组件配置方法，将初始设计页面调整为适配当前设备屏幕的目标页面。

根据本公开的实施例，初始设计页面中包括文本视图组件，页面展示属性信息包括表征文本视图组件的字体大小的第二约束值信息。调整模块包括第二更新单元和第三调整单元。

第二更新单元，用于根据基准比例信息，对初始设计页面对应的视图组件配置方法中定义的第二约束值信息进行更新，得到第二更新后约束值信息。

第三调整单元，用于根据包括第二更新后约束值信息的视图组件配置方法，将初始设计页面调整为适配当前设备屏幕的目标页面。

根据本公开的实施例，页面度量信息包括页面设计稿高度信息，屏幕度量信息包括屏幕顶部刘海高度信息、屏幕底部安全区域高度信息和屏幕实际高度信息。确定模块包括第一确定单元和第二确定单元。

第一确定单元，用于根据屏幕顶部刘海高度信息、屏幕底部安全区域高度和屏幕实际高度信息中的至少一个信息，确定屏幕可用高度信息。

第二确定单元，用于根据屏幕可用高度信息和页面设计稿高度信息，确定基准比例信息。

根据本公开的实施例的模块、单元中的任意多个、或其中任意多个的至少部分功能可以在一个模块中实现。根据本公开实施例的模块、单元中的任意一个或多个可以被拆分成多个模块来实现。根据本公开实施例的模块、单元中的任意一个或多个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式的硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，根据本公开实施例的模块、单元中的一个或多个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

例如，第一获取模块510、确定模块520和调整模块530中的任意多个可以合并在一个模块/单元中实现，或者其中的任意一个模块/单元可以被拆分成多个模块/单元。或者，这些模块/单元中的一个或多个模块/单元的至少部分功能可以与其他模块/单元的至少部分功能相结合，并在一个模块/单元中实现。根据本公开的实施例，第一获取模块510、确定模块520和调整模块530中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，第一获取模块510、确定模块520和调整模块530中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

需要说明的是，本公开的实施例中页面调整装置部分与本公开的实施例中页面调整方法部分是相对应的，页面调整装置部分的描述具体参考页面调整方法部分，在此不再赘述。

图6示意性示出了根据本公开实施例的适于实现页面调整方法的计算机系统的框图。图6示出的计算机系统仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图6所示，根据本公开实施例的计算机系统600包括处理器601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。处理器601例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))，等等。处理器601还可以包括用于缓存用途的板载存储器。处理器601可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 603中，存储有系统600操作所需的各种程序和数据。处理器601、ROM 602以及RAM 603通过总线604彼此相连。处理器601通过执行ROM 602和/或RAM 603中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 602和RAM 603以外的一个或多个存储器中。处理器601也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，系统600还可以包括输入/输出(I/O)接口605，输入/输出(I/O)接口605也连接至总线604。系统600还可以包括连接至I/O接口605的以下部件中的一项或多项：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至I/O接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。

根据本公开的实施例，根据本公开实施例的方法流程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读存储介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被处理器601执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质。例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 602和/或RAM603和/或ROM 602和RAM 603以外的一个或多个存储器。

本公开的实施例还包括一种计算机程序产品，其包括计算机程序，该计算机程序包含用于执行本公开实施例所提供的方法的程序代码，当计算机程序产品在电子设备上运行时，该程序代码用于使电子设备实现本公开实施例所提供的页面调整方法。

在该计算机程序被处理器601执行时，执行本公开实施例的系统/装置中限定的上述功能。根据本公开的实施例，上文描述的系统、装置、模块、单元等可以通过计算机程序模块来实现。

在一种实施例中，该计算机程序可以依托于光存储器件、磁存储器件等有形存储介质。在另一种实施例中，该计算机程序也可以在网络介质上以信号的形式进行传输、分发，并通过通信部分609被下载和安装，和/或从可拆卸介质611被安装。该计算机程序包含的程序代码可以用任何适当的网络介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。

根据本公开的实施例，可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例提供的计算机程序的程序代码，具体地，可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。程序设计语言包括但不限于诸如Java，C++，python，“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (10)

1.一种页面调整方法，包括：

获取初始设计页面的页面度量信息和当前设备屏幕的屏幕度量信息；

根据所述页面度量信息和所述屏幕度量信息，确定所述初始设计页面和所述当前设备屏幕之间的基准比例信息；以及

根据页面展示属性信息和所述基准比例信息，将所述初始设计页面调整为适配所述当前设备屏幕的目标页面。

2.根据权利要求1所述的方法，其中，所述初始设计页面包括至少一个第一页面组件；所述方法还包括：

针对每个所述第一页面组件，获取所述第一页面组件对应的页面配置信息；以及

根据所述页面配置信息，获取与所述第一页面组件相关的页面展示属性信息。

3.根据权利要求1所述的方法，其中，所述页面展示属性信息包括展示度量信息，所述展示度量信息表征所述初始设计页面与所述当前设备屏幕的适配比例信息；所述根据页面展示属性信息和所述基准比例信息，将所述初始设计页面调整为适配所述当前设备屏幕的目标页面包括：

将所述基准比例信息转换为像素级基准比例信息；

将所述像素级基准比例信息赋值给所述展示度量信息，得到与所述初始设计页面相关的适配所述当前设备屏幕的目标展示度量信息；以及

根据所述目标展示度量信息，将所述初始设计页面调整为适配所述当前设备屏幕的目标页面。

4.根据权利要求1所述的方法，其中，所述初始设计页面中包括第二页面组件和第三页面组件，所述页面展示属性信息包括表征所述第二页面组件和所述第三页面组件之间的相对位置关系的第一约束值信息；所述根据页面展示属性信息和所述基准比例信息，将所述初始设计页面调整为适配所述当前设备屏幕的目标页面包括：

根据所述基准比例信息，对所述初始设计页面对应的页面组件配置方法中定义的所述第一约束值信息进行更新，得到第一更新后约束值信息；以及

根据包括所述第一更新后约束值信息的页面组件配置方法，将所述初始设计页面调整为适配所述当前设备屏幕的目标页面。

5.根据权利要求1或4所述的方法，其中，所述初始设计页面中包括文本视图组件，所述页面展示属性信息包括表征所述文本视图组件的字体大小的第二约束值信息；所述根据页面展示属性信息和所述基准比例信息，将所述初始设计页面调整为适配所述当前设备屏幕的目标页面包括：

根据所述基准比例信息，对所述初始设计页面对应的视图组件配置方法中定义的所述第二约束值信息进行更新，得到第二更新后约束值信息；以及

根据包括所述第二更新后约束值信息的视图组件配置方法，将所述初始设计页面调整为适配所述当前设备屏幕的目标页面。

6.根据权利要求1所述的方法，其中，所述页面度量信息包括页面设计稿高度信息，所述屏幕度量信息包括屏幕顶部刘海高度信息、屏幕底部安全区域高度信息和屏幕实际高度信息；所述根据所述页面度量信息和所述屏幕度量信息，确定所述初始设计页面和所述当前设备屏幕之间的基准比例信息包括：

根据所述屏幕顶部刘海高度信息、所述屏幕底部安全区域高度和所述屏幕实际高度信息中的至少一个信息，确定屏幕可用高度信息；以及

根据所述屏幕可用高度信息和所述页面设计稿高度信息，确定所述基准比例信息。

7.一种页面调整装置，包括：

第一获取模块，用于获取初始设计页面的页面度量信息和当前设备屏幕的屏幕度量信息；

确定模块，用于根据所述页面度量信息和所述屏幕度量信息，确定所述初始设计页面和所述当前设备屏幕之间的基准比例信息；以及

调整模块，用于根据页面展示属性信息和所述基准比例信息，将所述初始设计页面调整为适配所述当前设备屏幕的目标页面。

8.一种计算机系统，包括：

一个或多个处理器；

存储器，用于存储一个或多个程序，

其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现权利要求1至6中任一项所述的方法。

9.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器实现权利要求1至6中任一项所述的方法。

10.一种计算机程序产品，包括计算机可执行指令，所述指令在被执行时用于实现权利要求1至6中任一项所述的方法。

Images