显示方法及电子设备

本申请要求于2022年04月15日提交中国专利局、申请号为202210395816.3、申请名称为“显示方法及电子设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。

本申请实施例涉及终端技术领域，尤其涉及一种显示方法及电子设备。

随着科学技术的发展，如今的世界已经是“万物智能”的世界。家居设备、手机、平板(Pad)、个人计算机(personal computer，PC)、电视机、汽车中控等越来越多的电子设备都能够运行各种应用程序(application，APP)，通过这些APP为用户提供各种功能或服务。

很多智能化的电子设备都具备显示屏，以作为与用户交互的媒介。但不同的电子设备的显示屏的大小、宽高比、分辨率等不统一，这对APP的开发者带来了挑战。为了确保良好的用户体验，开发者需要根据不同电子设备的屏幕规格，设计不同的用户界面。示例性的，如图1A和图1B所示为音乐APP开发者设计的两种不同的用户界面：在某个型号的手机上的用户界面(如图1A所示)和汽车中控上的用户界面(如图1B所示)。

早期的一种方案为开发者为每种类型的电子设备分别开发与之匹配的APP版本。但随着电子设备的形态越来越多，这一做法会加大开发难度。随之出现了另一种方案：在一个APP内部，预置几套针对不同屏幕规格的界面布局样式，根据运行该APP的电子设备选择与该电子设备适配的界面布局样式。例如：对于用户界面为网络(Web)类的界面，Web类界面上元素的位置、大小等布局信息通常在层叠样式表(cascading style sheets，CSS)样式中定义。CSS可以设定不同界面布局样式对应的屏幕的规格，进而可以实现针对不同的屏幕规格套用不同的布局样式的目的。这种方案在一定程度上减少了开发的APP版本的数量，但是仍要针对不同的屏幕规格预先设计不同的用户界面。由于预先设计出的用户界面的样式是有限的，无法适应新规格的屏幕，且开发人员的开发难度较大。

发明内容

为了解决上述的技术问题，本申请提供了一种显示方法及电子设备。本申请提供的技术方案，能够自适应的显示应用界面，满足不同设备类型的电子设备显示相同应用的需求，降低设计难度，提升用户使用体验。

为了实现上述的技术目的，本申请实施例提供了如下技术方案：

第一方面，提供一种显示方法，该方法包括：电子设备根据待显示的应用界面对应的第一页面数据，生成第一页面。其中，该第一页面数据包括原始元素数据、原始布局数据和原始渲染尺寸。若电子设备的显示屏的尺寸与原始渲染尺寸不匹配，则电子设备按照缩放比例对第一页面的尺寸以及原始元素数据和原始布局数据等比例缩放 后生成第二页面。其中，该缩放比例根据显示屏的尺寸以及原始渲染尺寸确定。电子设备根据显示屏的尺寸、预设页面重排规则以及第二页面包含的第二页面数据生成第三页面数据，并根据该第三页面数据生成第三页面。之后，电子设备在显示屏上显示该第三页面。

示例性的，上述缩放比例为显示屏的宽度和原始渲染尺寸中的宽度的比例。和/或，上述缩放比例为显示屏的高度和原始渲染尺寸中的高度的比例。

示例性的，电子设备的显示屏的尺寸与原始渲染尺寸不匹配，包括：电子设备的显示屏的宽度大于原始渲染尺寸中的宽度。和/或，电子设备的显示屏的高度大于原始渲染尺寸中的高度。

这样，电子设备能够基于一种尺寸的原始用户界面，根据不同电子设备的屏幕规格自适应调整该原始用户界面，进而自适应不同屏幕规格的电子设备，提升用户使用体验。

此外，对于应用开发者而言，在应用开发过程中，能够仅开发适配于一种类型的电子设备显示屏的界面布局，即可满足多种类型的电子设备对于该应用的部署需求，提升了应用开发效率，降低应用开发成本。

在一种可能的设计中，上述原始渲染尺寸的取值为预设值。或者，上述原始渲染尺寸的取值为原始显示屏的尺寸，该原始显示屏的尺寸为开发者在开发应用的过程中，设计应用程序的界面时所基于的显示屏的尺寸。该预设值通常为业界通用渲染尺寸。

在一种可能的设计中，如果上述原始渲染尺寸的取值为预设值，则可通过以下步骤将原始渲染尺寸的取值设置为预设值：在渲染所述第一页面的过程中解析预设代码，得到所述预设值；将所述原始渲染尺寸的取值设置为所述预设值。

示例性的，所述预设代码为脚本语言JavaScript代码。

在一种可能的设计中，电子设备在显示了第三页面后，电子设备的显示屏的尺寸可能发生变化。一种情况是，电子设备的显示屏的尺寸变大，相应的，在电子设备在显示屏上显示上述第三页面之后，所述方法还包括：电子设备确定显示屏的尺寸由第一尺寸变更为第二尺寸；其中，第二尺寸大于第一尺寸。示例性的，电子设备的显示屏为折叠屏。相应的，电子设备确定显示屏的尺寸由第一尺寸变更为第二尺寸，包括：电子设备确定显示屏由折叠状态变更为展开状态；其中，折叠状态下的显示屏的尺寸为所述第一尺寸，展开状态下的显示屏的尺寸为第二尺寸；第三页面为电子设备在显示屏处于折叠状态时显示的页面。之后，电子设备按照放大比例对第三页面的尺寸以及第三页面中包含的第三页面数据进行等比例放大后生成第四页面；其中，该放大比例根据第二尺寸和第一尺寸确定。电子设备根据第二尺寸、预设页面重排规则以及第四页面包含的第四页面数据生成第五页面数据，并根据第五页面数据生成第五页面。最后，电子设备在显示屏上显示该第五页面。

这样，如果电子设备的显示屏变大，例如：由窄屏变换为宽屏，比如折叠屏手机由折叠状态变化为展开状态，则电子设备可基于第三页面进一步调整后得到适用于宽屏的第五页面并显示。

在一种可能的设计中，电子设备在显示了第三页面后，电子设备的显示屏的尺寸可能发生变化。一种情况是，电子设备的显示屏的尺寸变小。那么，在电子设备在显 示屏上显示所述第三页面之后，所述方法还包括：电子设备确定显示屏的尺寸由第一尺寸变更为第二尺寸；其中，第二尺寸小于所述第一尺寸。示例性的，电子设备的显示屏为折叠屏。相应的，电子设备确定所述显示屏的尺寸由第一尺寸变更为第二尺寸，包括：电子设备确定显示屏由展开状态变更为折叠状态；其中，展开状态下的显示屏的尺寸为第一尺寸，折叠状态下的显示屏的尺寸为第二尺寸；第三页面为电子设备在显示屏处于展开状态时显示的页面。之后，电子设备确定与所述第三页面对应的所述第二页面。电子设备按照缩小比例对第二页面以及第二页面数据进行等比例缩小后生成第四页面；其中，所述缩小比例根据所述第二尺寸和所述第一尺寸确定。最后，电子设备在显示屏显示该第四页面。

这样，如果电子设备的显示屏变小，例如：由宽屏变换为窄屏，比如折叠屏手机由展开状态变化为折叠状态，则电子设备可基于第三页面关闭重排，并调整缩放比例后得到适用于窄屏的第五页面并显示。

第二方面，提供一种电子设备。该电子设备包括：处理器、存储器和显示屏，存储器、显示屏与处理器耦合，存储器用于存储计算机程序代码，计算机程序代码包括计算机指令，当处理器从存储器中读取计算机指令，使得电子设备执行：电子设备根据待显示的应用界面对应的第一页面数据，生成第一页面；其中，该第一页面数据包括原始元素数据、原始布局数据和原始渲染尺寸。若电子设备的显示屏的尺寸与原始渲染尺寸不匹配，则电子设备按照缩放比例对第一页面的尺寸以及原始元素数据和原始布局数据等比例缩放后生成第二页面。其中，该缩放比例根据显示屏的尺寸以及原始渲染尺寸确定。之后，电子设备根据显示屏的尺寸、预设页面重排规则以及第二页面包含的第二页面数据生成第三页面数据，并根据该第三页面数据生成第三页面。最后，电子设备在显示屏上显示该第三页面。

在一种可能的设计中，所述原始渲染尺寸的取值为预设值。

在一种可能的设计中，当处理器从存储器中读取计算机指令，使得电子设备还执行：在渲染所述第一页面的过程中解析预设代码，得到所述预设值；将原始渲染尺寸的取值设置为所述预设值。

在一种可能的设计中，所述预设代码为脚本语言JavaScript代码。

在一种可能的设计中，当处理器从存储器中读取计算机指令，使得电子设备还执行：电子设备确定显示屏的尺寸由第一尺寸变更为第二尺寸；其中，该第二尺寸大于第一尺寸。电子设备按照放大比例对第三页面的尺寸以及第三页面中的元素的大小进行等比例放大后生成第四页面；其中，该放大比例根据所述第二尺寸和所述第一尺寸确定。电子设备根据第二尺寸、预设页面重排规则以及第四页面包含的第四页面数据生成第五页面数据，并根据该第五页面数据生成第五页面。之后，电子设备在显示屏上显示该第五页面。

在一种可能的设计中，电子设备的显示屏为折叠屏。相应的，电子设备确定显示屏的尺寸由第一尺寸变更为第二尺寸，包括：电子设备确定显示屏由折叠状态变更为展开状态；其中，所述折叠状态下的所述显示屏的尺寸为所述第一尺寸，所述展开状态下的所述显示屏的尺寸为所述第二尺寸；所述第三页面为所述电子设备在所述显示屏处于折叠状态时显示的页面。

在一种可能的设计中，当处理器从存储器中读取计算机指令，使得电子设备还执行：所述电子设备确定所述显示屏的尺寸由第一尺寸变更为第二尺寸；其中，所述第二尺寸小于所述第一尺寸；电子设备确定与所述第三页面对应的所述第二页面；电子设备按照缩小比例对所述第二页面以及第二页面数据进行等比例缩小后生成第四页面；其中，所述缩小比例根据所述第二尺寸和所述第一尺寸确定。电子设备在显示屏上显示该第四页面。

在一种可能的设计中，所述电子设备的显示屏为折叠屏。所述电子设备确定所述显示屏的尺寸由第一尺寸变更为第二尺寸，包括：所述电子设备确定所述显示屏由展开状态变更为折叠状态；其中，所述展开状态下的显示屏的尺寸为所述第一尺寸，所述折叠状态下的显示屏的尺寸为第二尺寸；所述第三页面为所述电子设备在所述显示屏处于展开状态时显示的页面。

在一种可能的设计中，缩放比例为显示屏的宽度和原始渲染尺寸中的宽度的比例。和/或，缩放比例为显示屏的高度和原始渲染尺寸中的高度的比例。

在一种可能的设计中，电子设备的显示屏的尺寸与原始渲染尺寸不匹配，包括：电子设备的显示屏的宽度大于所述原始渲染尺寸中的宽度。和/或，所述电子设备的显示屏的高度大于所述原始渲染尺寸中的高度。

第二方面以及第二方面中任意一种实现方式所对应的技术效果，可参见上述第一方面及第一方面中任意一种实现方式所对应的技术效果，此处不再赘述。

第三方面，本申请实施例提供一种电子设备，该电子设备具有实现如上述第一方面及其中任一种可能的实现方式中所述的显示方法的功能。该功能可以通过硬件实现，也可以通过硬件执行相应地软件实现。该硬件或软件包括一个或多个与上述功能相对应的模块。

第三方面以及第三方面中任意一种实现方式所对应的技术效果，可参见上述第一方面及第一方面中任意一种实现方式所对应的技术效果，此处不再赘述。

第四方面，提供一种计算机可读存储介质。计算机可读存储介质存储有计算机程序(也可称为指令或代码)，当该计算机程序被电子设备执行时，使得电子设备执行第一方面或第一方面中任意一种实施方式的方法。

第四方面以及第四方面中任意一种实现方式所对应的技术效果，可参见上述第一方面及第一方面中任意一种实现方式所对应的技术效果，此处不再赘述。

第五方面，本申请实施例提供一种计算机程序产品，当计算机程序产品在电子设备上运行时，使得电子设备执行第一方面或第一方面中任意一种实施方式的方法。

第五方面以及第五方面中任意一种实现方式所对应的技术效果，可参见上述第一方面及第一方面中任意一种实现方式所对应的技术效果，此处不再赘述。

第六方面，本申请实施例提供一种电路系统，电路系统包括处理电路，处理电路被配置为执行第一方面或第一方面中任意一种实施方式的方法。

第六方面以及第六方面中任意一种实现方式所对应的技术效果，可参见上述第一方面及第一方面中任意一种实现方式所对应的技术效果，此处不再赘述。

第七方面，本申请实施例提供一种芯片系统，包括至少一个处理器和至少一个接口电路，至少一个接口电路用于执行收发功能，并将指令发送给至少一个处理器，当 至少一个处理器执行指令时，至少一个处理器执行第一方面或第一方面中任意一种实施方式的方法。

第七方面以及第七方面中任意一种实现方式所对应的技术效果，可参见上述第一方面及第一方面中任意一种实现方式所对应的技术效果，此处不再赘述。

第八方面，本申请实施例提供一种电子设备上的图形用户界面系统，其中，该电子设备具有一个或多个存储器、显示屏以及一个或多个处理器，一个或多个处理器用于执行存储在一个或多个存储器中的一个或多个计算机程序，图形用户界面系统包括电子设备执行如上述第一方面及第一方面中任意一种实现方式时显示的图形用户界面。

第八方面以及第八方面中任意一种实现方式所对应的技术效果，可参见上述第一方面及第一方面中任意一种实现方式所对应的技术效果，此处不再赘述。

图1A为现有技术提供的手机上显示的音乐APP的界面示意图；

图1B为现有技术提供的汽车中控上显示的音乐APP的界面示意图；

图2A、图2B、图2C、图2D为采用现有的显示方法在折叠屏手机上显示应用程序的界面时的示意图；

图3A为本申请实施例的一种应用场景示意图；

图3B为本申请实施例的另一种应用场景示意图；

图4为本申请实施例提供的一种电子设备的设备类型的示意图；

图5为本申请实施例提供的电子设备的硬件结构示意图；

图6A为本申请实施例提供的电子设备的软件结构框图示意图；

图6B为本申请实施例提供的一种界面示意图；

图7为本申请实施例提供的一种显示方法的流程示意图；

图8为本申请实施例提供的不同元素的重排规则的示意图；

图9为本申请实施例提供的另一种界面示意图；

图10为本申请实施例提供的另一种显示方法的流程示意图；

图11为本申请实施例提供的又一种界面示意图；

图12为本申请实施例提供的再一种显示方法的流程示意图；

图13为本申请实施例提供的再一种界面示意图；

图14为本申请实施例提供的电子设备的结构示意图。

下面结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。其中，在本申请实施例的描述中，以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在包括例如“一个或多个”这种表达形式，除非其上下文中明确地有相反指示。还应当理解，在本申请以下各实施例中，“至少一个”、“一个或多个”是指一个或两个以上(包含两个)。

在本说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说 明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。术语“连接”包括直接连接和间接连接，除非另外说明。“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。

在本申请实施例中，“示例性地”或者“例如”等词用于表示作例子、例证或说明。本申请实施例中被描述为“示例性地”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性地”或者“例如”等词旨在以具体方式呈现相关概念。

随着电子设备的形态越来越多种多样，不同形态的电子设备的显示屏的大小、宽高、分辨率等不统一，这对APP的开发者带来了挑战。早期的一种方案为开发者为每种类型的电子设备分别开发与之匹配的APP版本。但随着电子设备的形态越来越多，这一做法会加大开发难度。随之出现了另一种方案：在一个APP内部，预置几套针对不同屏幕规格的界面布局样式，根据运行该APP的电子设备选择与该电子设备适配的界面布局样式。这种方案在一定程度上减少了开发的APP版本的数量，但是仍要针对不同的屏幕规格预先设计不同的用户界面。由于预先设计的用户界面的样式是有限的，无法适用新规格的屏幕，且开发人员的开发难度较大。

随着折叠屏手机这一新形态手机的出现，采用预先设计的用户界面在折叠屏手机上显示时，可能会存在以下问题：

示例性的，如图2A所示，当手机由折叠状态展开后，展开后的手机的显示界面整体放大，但是显示的内容变少。如图2B所示，当手机由折叠状态展开后，展开后的手机的显示界面不变，但是由于展开后的屏幕变宽，则展开后的手机的显示界面在靠近屏幕边缘的地方存在空白。如图2C所示，当手机由折叠状态展开后，展开后的手机的显示界面中的元素的尺寸未发生变化，但是中间存在空白。如图2D所示，当手机由展开状态折叠后，折叠后的手机的显示界面中元素的尺寸不变，但是仅能显示部分元素，其余元素被覆盖，无法显示。

之所以出现上述各种问题，主要在于手机的折叠屏的尺寸超出了预先设计的界面布局样式能够自适应的范围，目前的方案无法提供一种通用的可适用于不同屏幕规格的显示屏的用户界面的显示方法。

基于目前的方案存在的上述问题，本申请实施例提供一种显示方法，能够基于一种尺寸的原始用户界面，根据不同电子设备的屏幕规格自适应调整该原始用户界面，进而自适应不同屏幕规格的电子设备，提升用户使用体验。也即，开发者仅需设计一种尺寸的界面布局样式即可，而无需预先设计几套针对不同屏幕规格的界面布局样式，从而降低应用开发难度。

本申请实施例可以应用于各种需要在不同规格的显示屏中显示应用程序的用户界面的应用场景中。具体的，在一些应用场景中，电子设备上安装某个应用程序后，可能会在不同尺寸的显示屏上显示该应用程序的显示界面。作为示例，请参阅图3A，以 应用程序部署在折叠屏的手机上为例，如图3A所示，手机处于如图3A中的左示意图所示的折叠状态，当用户将手机从图3A中的左示意图的状态调整为图3A的右示意图的状态时，也即将手机的折叠屏展开时，需要在展开后的显示屏上显示该应用程序的用户界面，也即用于显示该应用程序的用户界面的显示屏的尺寸发生变化。

作为另一示例，图3B为本申请实施例提供的显示方法的一种应用场景示意图。如图3B所示，当应用程序的某个用户界面从手机端被投屏至电视端时，该应用程序的显示界面由手机变化为电视，也即用于显示该应用程序的用户界面的显示屏的尺寸发生变化。

在另一些应用场景中，同一种应用程序可能会被部署在屏幕规格不同的电子设备上，从而导致一个应用程序的同一个应用界面也需要在不同规格的显示屏上进行显示。

首先，为了便于理解，下面先对本申请实施例可能涉及的相关术语和概念进行介绍。

(1)用户界面

用户界面指的是应用程序在电子设备的屏幕上显示出来的人机交互界面。一个用户界面可以为网络(Web)类的用户界面或原生的用户界面；其中，Web类的用户界面的信息由应用程序所对应的服务器发送给电子设备，原生的用户界面的信息由电子设备直接生成。

(2)元素和元素数据

元素(element)，是一种绘制在显示屏上的用户能够与之交互的一个对象。如元素能够作为人机交互接口，接收用户对于电子设备的操作。其中，元素可以包括文本元素(text element)，按钮(button)，图片元素(image element)，进度条(progress bar)等。

元素数据，包括元素的位置、大小、颜色等数据，电子设备根据元素数据进行元素的绘制，以显示用户可见的元素。

(3)布局和布局数据

布局(layout)，用于表示元素的显示效果。在一些实施例中，布局也可以称之为元素组(ElementGroup)，用于存放其他element和其他ElementGroup的布局容器。布局例如包括相对布局，绝对布局等。相对布局用于表示元素相对于其他元素的显示位置，绝对布局用于表示元素在显示界面中的显示位置。例如，元素A的布局包括元素A的中心像素点与显示屏的中心点重合，尺寸为200像素(pixels)，则元素A的布局为绝对布局。元素B的布局包括元素B的中心像素点位于元素A中心像素点左侧N个像素点位置，元素B的尺寸与元素A相同，则元素B的布局为相对布局。

布局数据，用于表示布局格式和布局策略，布局数据中包含多个元素的元素数据以及元素数据的布局信息。

在一些实施例中，电子设备显示的用户界面(user interface，UI)元素包括Element和ElementGroup。

(4)通过浏览器内核执行渲染操作的过程

在某一用户界面为Web类的用户界面的情况下，通过浏览器内核执行渲染(render)操作的过程指的是根据描述用户界面的数据生成可视化的用户界面的过程，前述描述 用户界面的数据是用严格定义的数据结构或语言对用户界面中的元素进行描述，它包括用户界面中的元素的几何形状、纹理、位置或其他信息等。作为示例，例如当某一用户界面为Web类的用户界面时，描述用户界面的数据具体可以包括超文本标记语言(hyper text markup language，HTML)文件和层叠样式表(cascading style sheets，CSS)样式等，此处不对“描述用户界面的数据”具体包含的内容进行穷举。

其中，用户界面的渲染(render)过程可以包括确定用户界面的元素的样式(style)、确定用户界面的元素的布局(layout)、合成更新(compositing update)、预涂(prepaint)、绘画(paint)或其他步骤等等，此处再一一进行列举。

本申请实施例提供的显示方法，可以应用于电子设备。例如，如图4所示，该电子设备具体可以是手机41、笔记本电脑42、平板电脑43、大屏显示设备44、可穿戴设备(如智能手表，智能手环等)45、车载设备、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本、个人数字助理(personal digital assistant，PDA)、人工智能(artificial intelligence)设备等具有显示功能的电子设备，电子设备安装的操作系统包括但不限于

示例性的，图5示出了电子设备500的一种结构示意图。

电子设备500可以包括处理器510，外部存储器接口520，内部存储器521，通用串行总线(universal serial bus，USB)接口530，充电管理模块540，电源管理模块541，电池542，天线1，天线2，移动通信模块550，无线通信模块560，音频模块570，传感器模块580，按键590，马达591，指示器592，摄像头593，显示屏594，以及用户标识模块(subscriber identification module，SIM)卡接口595等。

可以理解的是，本申请实施例示意的结构并不构成对电子设备500的具体限定。在本申请另一些实施例中，电子设备500可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。

处理器510可以包括一个或多个处理单元，例如：处理器510可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processing unit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。

控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。

处理器510中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器510中的存储器为高速缓冲存储器。该存储器可以保存处理器510刚用过或循环使用的指令或数据。如果处理器510需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器510的等待时间，因而提高了系统的效率。

在一些实施例中，处理器510可以包括一个或多个接口。接口可以包括集成电路 (inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuit sound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purpose input/output，GPIO)接口，用户标识模块(subscriber identity module，SIM)接口，和/或通用串行总线(universal serial bus，USB)接口等。

I2C接口是一种双向同步串行总线，包括一根串行数据线(serial data line，SDA)和一根串行时钟线(derail clock line，SCL)。在一些实施例中，处理器510可以包含多组I2C总线。处理器510可以通过不同的I2C总线接口分别耦合触摸传感器，充电器，闪光灯，摄像头593等。例如：处理器510可以通过I2C接口耦合触摸传感器，使处理器510与触摸传感器通过I2C总线接口通信，实现电子设备500的触摸功能。

MIPI接口可以被用于连接处理器510与显示屏594，摄像头593等外围器件。MIPI接口包括摄像头串行接口(camera serial interface，CSI)，显示屏串行接口(display serial interface，DSI)等。在一些实施例中，处理器510和摄像头593通过CSI接口通信，实现电子设备500的拍摄功能。处理器510和显示屏594通过DSI接口通信，实现电子设备500的显示功能。

USB接口530是符合USB标准规范的接口，具体可以是Mini USB接口，Micro USB接口，USB Type C接口等。USB接口530可以用于连接充电器为电子设备500充电，也可以用于电子设备500与外围设备之间传输数据。也可以用于连接耳机，通过耳机播放音频。该接口还可以用于连接其他电子设备，例如AR设备等。

可以理解的是，本申请实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备500的结构限定。在本申请另一些实施例中，电子设备500也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。

充电管理模块540用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块540可以通过USB接口530接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块540可以通过电子设备500的无线充电线圈接收无线充电输入。充电管理模块540为电池542充电的同时，还可以通过电源管理模块541为电子设备供电。

电源管理模块541用于连接电池542，充电管理模块540与处理器510。电源管理模块541接收电池542和/或充电管理模块540的输入，为处理器510，内部存储器521，显示屏594，摄像头593，和无线通信模块560等供电。电源管理模块541还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。在其他一些实施例中，电源管理模块541也可以设置于处理器510中。在另一些实施例中，电源管理模块541和充电管理模块540也可以设置于同一个器件中。

电子设备500的无线通信功能可以通过天线1，天线2，移动通信模块550，无线通信模块560，调制解调处理器以及基带处理器等实现。

天线1和天线2用于发射和接收电磁波信号。电子设备500中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开 关结合使用。

移动通信模块550可以提供应用在电子设备500上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块550可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块550可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块550还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块550的至少部分功能模块可以被设置于处理器510中。在一些实施例中，移动通信模块550的至少部分功能模块可以与处理器510的至少部分模块被设置在同一个器件中。

调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备输出声音信号，或通过显示屏594显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器510，与移动通信模块550或其他功能模块设置在同一个器件中。

无线通信模块560可以提供应用在电子设备500上的包括无线局域网(wireless local area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块560可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块560经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器510。无线通信模块560还可以从处理器510接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。

在一些实施例中，电子设备500的天线1和移动通信模块550耦合，天线2和无线通信模块560耦合，使得电子设备500可以通过无线通信技术与网络以及其他设备通信。

电子设备500通过GPU，显示屏594，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏594和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器510可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。

显示屏594用于显示图像，视频等。显示屏594包括显示面板。在一些实施例中，电子设备500可以包括1个或N个显示屏594，N为大于1的正整数。显示屏594的形状可以为规则形状或不规则形状。本申请实施例对于显示屏594的数量、形状以及尺寸不做具体限定。

摄像头593用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，电子设备500可以包括1个或N个摄像头 593，N为大于1的正整数。

外部存储器接口520可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备500的存储能力。外部存储卡通过外部存储器接口520与处理器510通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。

内部存储器521可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。内部存储器521可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储电子设备500使用过程中所创建的数据(比如音频数据，电话本等)等。此外，内部存储器521可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。处理器510通过运行存储在内部存储器521的指令，和/或存储在设置于处理器中的存储器的指令，执行电子设备500的各种功能应用以及数据处理。

音频模块570用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块570还可以用于对音频信号编码和解码。在一些实施例中，音频模块570可以设置于处理器510中，或将音频模块570的部分功能模块设置于处理器510中。电子设备500可以通过音频模块570，例如音乐播放，录音等。音频模块570可以包括扬声器，受话器，麦克风，耳机接口，以及应用处理器等实现音频功能。

传感器模块580可以包括压力传感器，陀螺仪传感器，气压传感器，磁传感器，加速度传感器，距离传感器，接近光传感器，指纹传感器，温度传感器，触摸传感器，环境光传感器，骨传导传感器等。

在一些实施例中，电子设备500检测到在显示屏594上点击应用图标的操作后，确认需要显示该应用的界面，则获取对应的原始元素数据、原始布局数据以及原始渲染尺寸。基于获取的这些数据进行渲染后生成第一页面。之后，基于显示屏的尺寸和原始渲染尺寸确定缩放比例，进而基于该缩放比例对第一页面的尺寸和第一页面中的元素大小进行等比例缩放，得到第二页面，再对该第二页面所包含的第二页面数据按照预设的页面重排规则进行重排，得到最终的第三页面数据，并基于该第三页面数据生成并显示应用的界面。

按键590包括开机键，音量键等。按键590可以是机械按键。也可以是触摸式按键。电子设备500可以接收按键输入，产生与电子设备500的用户设置以及功能控制有关的键信号输入。

马达591可以产生振动提示。马达591可以用于来电振动提示，也可以用于触摸振动反馈。例如，作用于不同应用(例如拍照，音频播放等)的触摸操作，可以对应不同的振动反馈效果。作用于显示屏594不同区域的触摸操作，马达591也可对应不同的振动反馈效果。不同的应用场景(例如：时间提醒，接收信息，闹钟，游戏等)也可以对应不同的振动反馈效果。触摸振动反馈效果还可以支持自定义。

指示器592可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。

SIM卡接口595用于连接SIM卡。SIM卡可以通过插入SIM卡接口595，或从SIM 卡接口595拔出，实现和电子设备500的接触和分离。电子设备500可以支持1个或N个SIM卡接口，N为大于1的正整数。

图6A是本申请实施例的电子设备500的软件结构框图。

电子设备500的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本申请实施例以分层架构为例，示例性说明电子设备500的软件结构。其中，分层系统结构可以适用于安卓(Android)

分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，分层系统架构分为四层，从上至下分别为应用程序层，应用程序框架层，系统层，以及内核层。

应用程序层可以包括一系列应用程序包。

如图6A所示，应用程序包可以包括相机，图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息等应用程序。

在一些实施例中，电子设备500中安装的应用程序对应的应用程序包中包含应用的原始数据。其中，原始数据例如包括原始元素数据、原始布局数据以及原始显示屏尺寸。原始显示屏尺寸可以包括原始显示屏的高度值、宽度值等数据。原始数据为开发者在应用程序开发过程中，为应用程序适配的原始显示屏尺寸对应的数据。例如，开发者基于手机开发图库应用，则原始数据包含手机对应的图库的元素数据、布局数据以及手机显示屏尺寸。

示例性的，若电子设备安装的系统为安卓系统，则电子设备各个应用程序的安卓应用程序包(android application package，APK)中配置有原始数据。若电子设备安装的系统为鸿蒙系统，则电子设备各个应用程序的鸿蒙系统能力包(HarmonyOS Ability Package，HAP)中配置有原始数据。

应用程序框架层为应用程序层的应用程序提供应用编程接口(application programming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。

如图6A所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。

窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。

本申请实施例中，窗口管理器还可以用于在显示屏尺寸和原始渲染尺寸不匹配的情况下确定缩放比例，该缩放比例为显示屏尺寸与原始渲染尺寸的比例。其中，该原始渲染尺寸可能为应用的原始数据中包含的原始显示屏尺寸，也可能为将该原始显示屏尺寸修改后得到的预设值。显示屏尺寸和原始渲染尺寸不匹配可以理解为显示屏尺寸和原始渲染尺寸不一致。

本申请实施例中，应用程序框架层还包括页面监控器。该页面监控器可以实时监控页面内容或者样式是否变化，如果页面内容或者样式有变化，例如：原页面内容或者样式是按照某个尺寸设计的，之后显示屏的尺寸变化，则页面内容和尺寸相应的要变化，这种情况下则触发内容或样式重排。

内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据 可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。

视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。

电话管理器用于提供电子设备500的通信功能。例如通话状态的管理(包括接通，挂断等)。

资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。

通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备振动，指示灯闪烁等。

系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。

表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。

媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。

三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。

2D图形引擎是2D绘图的绘图引擎。

本申请实施例中，系统库中还包括样式识别库和样式处理库。其中，样式识别库中存储了不同种类的元素的特征，可基于不同种类的元素的特征识别页面中的不同元素，比如列表、大图、单行、通栏等。样式处理库中存储了不同种类的元素在重排时适用的重排规则，可在页面监控器触发内容或样式重排后，对不同类型的元素采用对应的重排规则进行重排。

内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。

本申请实施例中，当应用程序层的应用程序需要显示界面时，显示驱动获取该应用程序对应的应用程序包，得到应用的原始数据(该原始数据包括原始像素数据、原始布局数据以及原始显示屏尺寸)。之后，基于获取的原始像素数据、原始布局数据以及原始渲染尺寸(原始显示屏尺寸或者将该原始显示屏尺寸修改后得到的预设值。)进行渲染得到第一页面。窗口管理器确定显示屏尺寸和原始渲染尺寸是否匹配，如果不匹配则确定缩放比例，该缩放比例为显示屏尺寸与原始渲染尺寸的比例。然后，显示驱动基于该缩放比例对第一页面的尺寸以及第一页面中包含的元素进行等比例缩放，得到第二页面。页面监控器触发内容或样式重排。最后，样式识别库基于不同种类的元素的特征识别第二页面中的不同元素，比如列表、大图、单行、通栏等。样式处理库对不同类型的元素采用对应的重排规则进行重排，得到第三页面，显示驱动显示该 第三页面。

示例性地，如图6B所示，以电子设备为折叠屏手机为例，当折叠屏手机处于折叠状态时，即该折叠屏手机的显示屏为窄屏时，其显示界面如601所示，当折叠屏手机展开后，即显示屏窄屏变化为宽屏时，采用本申请实施例的方法后，其显示界面如602所示。可以看到，界面602中的元素排列更紧密，不会出现如图2A、图2B、图2C、图2D所示界面存在的问题。

图7为本申请实施例提供的一种显示方法的流程示意图。该方法能够应用于电子设备，如图7所示，该方法可以包括S701-S704：

S701、电子设备根据待显示的应用界面对应的第一页面数据，生成第一页面。

其中，所述第一页面数据包括原始元素数据、原始布局数据和原始渲染尺寸。

在一些实施例中，电子设备在需要显示应用界面时，需要获得该应用界面对应的原始数据，原始数据包括原始元素数据、原始布局数据以及原始显示屏尺寸。应用程序开发过程中，开发者可以设计适配于某一种电子设备的应用界面，该电子设备即为原始设备，原始设备的显示屏尺寸为原始显示屏尺寸，适配于原始显示屏尺寸的应用的元素数据和布局数据为原始元素数据和原始布局数据。

其中，原始显示屏尺寸为开发者在应用开发过程中使用的显示屏尺寸，如基于该原始显示屏尺寸，设计应用界面对应的原始元素数据和原始布局数据。可选的，原始显示屏尺寸为开发工具中预配置的默认尺寸，不同类型的电子设备(如手机、智能手表、平板等)对应于相同或不相同预配置的默认尺寸。比如，开发工具中预配置智能手表对应的默认尺寸为(466 x 466)像素，手机对应的默认尺寸为(2340 x 1080)像素。那么，开发者在通过开发工具开发智能手表应用过程中，对应使用的原始显示屏尺寸即为(466 x 466)像素；在通过开发工具开发手机应用过程中，对应使用的原始显示屏尺寸即为(2340 x 1080)像素。或者，原始显示屏尺寸为开发者自由配置的尺寸。比如，开发者直接预设原始显示屏尺寸为(466 x 466)像素，之后基于(466 x 466)像素的尺寸设计应用界面。

需要说明的是，开发工具的相关内容可以参考现有技术，对此本申请实施例不做限制。此外，开发工具中预配置的默认尺寸对应于电子设备类型，相同类型但不同型号的电子设备对应的预配置的默认尺寸相同。比如，假设预配置的手机对应的默认尺寸为(2340 x 1080)像素，则开发者在开发不同品牌、不同型号的手机时，通过开发工具获取到的原始显示屏尺寸均为(2340 x 1080)像素。对此下文不再进行说明。

在一些实施例中，本申请实施例所述原始渲染尺寸的取值为所述原始显示屏尺寸。示例性的，原始显示屏尺寸为(375 x 1080)像素，则本申请实施例直接将该原始显示屏尺寸作为原始渲染尺寸进行渲染。

在另一些实施例中，考虑到开发者开发应用程序时基于的原始显示屏尺寸不是业界通用的尺寸，可能仅适用某个型号的电子设备，如果基于该原始显示屏尺寸进行渲染，则当适用不同尺寸的屏幕时，则每次都需要调整。因此，本申请实施例中将所述原始渲染尺寸的取值设置为预设值。该预设值通常为业界通用尺寸。换句话说，本申请实施例中可以将原始显示屏尺寸修改为预设值后得到本申请实施例所指的原始渲染尺寸。可选的，该过程可具体实现为：在渲染所述第一页面的过程中解析预设代码， 得到所述预设值；将所述原始渲染尺寸的取值设置为所述预设值。在一种可能的实现方式中，所述预设值为将原始显示屏尺寸的宽度设置为某个特定值(如375像素)，并且等比例改变原始显示屏尺寸的高度的取值。其中，该比例为该特定值和原始显示屏尺寸的宽度的取值的比值。例如，原始显示屏尺寸为(2340 x 1080)像素，则所述预设值为(375x 1731)像素。原始显示屏尺寸为(466 x 466)像素，则所述预设值为(375x 375)像素。又如，预设值仅为修改后的宽度的取值，该取值为预设值，例如375像素，则表示将原始显示屏尺寸的宽度设置为该预设值，并等比例改变原始显示屏尺寸的高度的取值。在另一种可能的实现方式中，所述预设值为将原始显示屏尺寸的高度设置为某个特定值(如375像素)，并等比例改变原始显示屏尺寸的宽度的取值。例如，原始显示屏尺寸为(2340 x 1080)像素，则所述预设值为(813x375)像素。原始显示屏尺寸为(466 x 466)像素，则所述预设值为(375x 375)像素。又如，预设值仅为修改后的高度的取值，该取值为预设值，例如375像素，则表示将原始显示屏尺寸的高度设置为该预设值，并且等比例改变原始显示屏尺寸的宽度的取值。

示例性的，以待显示的应用界面为web界面为例，该web界面对应的第一页面数据以超文本标记语言(hyper text markup language，HTML)文件、层叠样式表(cascading style sheets，CSS)样式和脚本语言(JavaScript)代码等数据描述。电子设备在渲染过程中，读取这些描述该web界面的数据，当读取到JavaScript代码，解析该JavaScript代码，可以得到预设值，然后根据该预设值修改CSS样式中的渲染尺寸的取值，将其修改为所述预设值。之后，在渲染过程中可基于该预设值与原始渲染尺寸的比例对原始元素数据和原始布局数据进行等比例缩放，得到新的元素数据和布局数据后，然后再进行渲染，得到第一页面。

在一些实施例中，待显示的应用界面为Web类的用户界面，当电子设备上需要显示该应用界面时，可以向服务器发送请求信息；服务器响应于接收到的请求信息，向电子设备发送与该应用界面对应的数据包。

在另一些实施例中，待显示的应用界面为原生的用户界面，当电子设备上需要显示该应用界面时，电子设备可以直接生成与该待显示的应用界面对应的数据包。

在一些实施例中，电子设备检测到用户点击应用图标的操作后，启动应用并触发应用界面绘制，也即开始执行该S701。可选的，触发应用界面绘制的操作还可以包括其他触摸操作、语音操作、UI事件等。比如，电子设备检测到用户语音启动应用的操作后，触发应用界面绘制，则获取第一页面数据。又比如，电子设备的前台应用自动切换画面时，触发UI事件，获取第一页面数据，以绘制画面切换后的应用界面。前台应用是电子设备的显示屏当前显示的界面对应的应用。也就是说，电子设备的显示屏当前显示哪个应用的界面，该应用则为前台应用。

若所述电子设备的显示屏的尺寸与所述原始渲染尺寸匹配，则电子设备可直接显示该第一页面，也即执行下述S7021。

若所述电子设备的显示屏的尺寸与所述原始渲染尺寸不匹配，则电子设备需要对第一页面进行调整，也即执行下述S7022、S703和S704。

其中，所述匹配是指电子设备的显示屏的尺寸与原始渲染尺寸一致，例如：电子设备的显示屏的尺寸和原始渲染尺寸均为(375x 1080)像素。或者，如果电子设备在 渲染生成第一页面的过程中，主要是基于某个属性值(例如：宽度值)渲染，而对其余属性值(例如：高度值)没有特定要求的话，所述匹配是指电子设备的显示屏的尺寸在该属性(例如：宽度)的取值与所述原始渲染尺寸在该属性(例如：宽度)的取值相同。相应的，不匹配是指电子设备的显示屏的尺寸与原始渲染尺寸不一致，例如：电子设备的显示屏的尺寸为(2340x 1080)像素，原始渲染尺寸为(375x1080)像素。或者，所述原始渲染尺寸为原始页面的宽度；所述电子设备的显示屏的尺寸与所述原始渲染尺寸不匹配，包括：所述电子设备的显示屏的宽度大于所述原始页面的宽度。或者，所述原始渲染尺寸为原始页面的高度；所述电子设备的显示屏的尺寸与所述原始渲染尺寸不匹配，包括：所述电子设备的显示屏的高度大于所述原始页面的高度。

S7021、电子设备显示第一页面。

S7022、电子设备按照缩放比例对所述第一页面的尺寸以及所述原始元素数据和原始布局数据等比例缩放后生成第二页面。

其中，所述缩放比例根据所述显示屏的尺寸以及所述原始渲染尺寸确定。

在一些实施例中，所述缩放比例为所述显示屏的宽和所述原始渲染尺寸中的宽度的比例。和/或，所述缩放比例为所述显示屏的高和所述原始渲染尺寸中的高度的比例。

其中，缩放比例包括放大比例和缩小比例。比如，原始渲染尺寸的宽度小于电子设备显示屏的宽度，则需要对第一页面数据进行放大处理，以获得适配于较大显示屏尺寸的新的页面数据。那么，确定对应的缩放比例应为放大比例。又比如，原始渲染尺寸的宽度大于电子设备显示屏的宽度，则需要对第一页面数据进行缩小处理，以获得适配于较小显示屏尺寸的新的页面数据。那么，确定对应的缩放比例应为缩小比例。

在确定缩放比例后，根据该缩放比例对第一页面的尺寸以及原始元素数据和原始布局数据等比例缩放包括：如果确定的缩放比例为放大比例，则将第一页面按照该放大比例进行等比例放大，并且将第一页面中的元素数据和原始布局数据也进行等比例放大。例如：缩放比例为放大2倍，第一页面为(375x1080)像素，则将第一页面等比例放大2倍后，可得到(750x2160)像素的第二页面，且该第二页面中的每个元素的大小为第一页面中的对应的元素的大小的2倍，元素之间的行间距也扩大为2倍。同理，如果确定的缩放比例为缩小比例，则将第一页面按照该缩小比例进行等比例缩小，并且将第一页面中的元素的大小也进行等比例缩小。例如：缩放比例为缩小2倍，第一页面为(750x2160)像素，则将第一页面等比例缩小2倍后，可得到(375x1080)像素的第二页面，且该第二页面中的每个元素的大小为第一页面中的对应的元素的大小的0.5倍，元素之间的行间距也缩小为2倍。

S703、电子设备根据所述显示屏的尺寸、预设页面重排规则以及所述第二页面包含的第二页面数据生成第三页面数据，并根据所述第三页面数据生成第三页面。

其中，所述第三页面数据为根据显示屏的尺寸、预设页面重排规则对第二页面中的元素数据和布局数据进行调整重排后得到的新的元素数据和布局数据。

可选的，预设重排规则定义了尺寸变化规则和布局变化规则，该尺寸变化规则包括当第二页面中的布局数据所指示的布局方式变化为第三页面数据所指示的布局方式时，第二页面数据中不同类型的元素的尺寸变化规则。则电子设备需要识别第二页面中不同类型的元素，根据该尺寸变化规则确定第二页面中的各个元素变化后的尺寸。 不同元素的尺寸变化比例可能不同。

例如：第二页面中的元素包括：列表(List)元素、大图元素、具有绝对定位且无序排列的矩形框元素、瀑布流元素或其他元素等。第二页面中还可以存在不再需要更新尺寸的元素，作为示例，例如头部悬浮框元素、底部悬浮框元素或其他元素等等，此处不做穷举。

进一步地，针对不同类型的元素的尺寸变化规则，作为示例，针对列表元素的尺寸变化规则可以包括：将每个列表元素的宽边和高边均缩小为原来的1/n。进而针对单行的多个List元素，使得该多个List元素的最终结构仍然为单行，不同的List元素之间的间隔等宽；针对多行的List元素，使得每行的List元素的容量变为原来的n倍，间隔等宽。

可选地，电子设备还可以对比List元素的高度和前述List元素的父节点的高度，若List元素的父节点的高度与List元素的高度之间的比值超过m倍，则可以重新调整前述List元素的父节点的高度。

针对大图元素的尺寸变化规则可以包括：保持大图元素的宽度不变，将大图元素的高度调整为原来的1/s；或者，将大图元素的高度和宽度均调整为原来的1/s，并在大图元素的左右两边填充上模糊效果的原图或是纯色图。

针对具有绝对定位且无序排列的矩形框元素的尺寸变化规则可以包括：将具有绝对定位且无序排列的多个矩形框元素视为一个大图元素，具体处理方式可以参阅上述对大图元素的处理方式的描述，此处不做赘述。

针对瀑布流元素的变化规则可以包括：将每个瀑布流元素的宽边按照预设比例进行缩小，并提高在当前显示区域的宽边中部署的瀑布流的列数。

如图8所示为本申请实施例所述的不同元素进行重排时重排规则的一种可能的示意图。例如：图8中的(1)为当元素在窄屏上显示时为横向可滑动的2行4列元素((1)中的左图所示)时，在宽屏上可显示为横向可滑动的1行8列元素，且这些元素的大小、位置以及不同元素之间的间隔等可根据显示屏的尺寸得到。同理，图8中的(2)为当元素在窄屏上显示时为横向可滑动的1行4列元素((2)中的左图所示)时，在宽屏上可显示为横向可滑动的1行6列元素，且这些元素的大小、位置以及不同元素之间的间隔等可根据显示屏的尺寸得到。图8中的(3)为当元素在窄屏上显示时为2行2列的4宫格元素((3)中的左图所示)时，在宽屏上可显示为1行4列元素，且这些元素的大小、位置以及不同元素之间的间隔等可根据显示屏的尺寸得到。图8中的(4)为当元素为页签时，该页签元素在窄屏上显示如(4)中的左图所示，当变换到宽屏上时，则可显示为如(4)中的右图所示。元素在窄屏上显示变化为在宽屏上显示时，元素的大小、位置以及间隔等可根据显示屏的尺寸得到。图8中的(5)为当元素为四列瀑布时，该元素在窄屏上显示如(5)中的左图所示，当变换到宽屏上时，则可显示为如(5)中的右图所示。元素在窄屏上显示变换为在宽屏上显示或者在宽屏上显示变换为在窄屏上显示时，元素的大小、位置以及间隔等可根据显示屏的尺寸得到。

S704、电子设备在所述显示屏上显示所述第三页面。

在一些实施例中，电子设备在待显示的应用的界面显示内容中的元素和布局绘制完成后，对绘制的一个或多个图层进行图层合成得到图像帧。之后，电子设备内核层 的显示驱动可接收合成的图像帧，驱动显示屏显示合成的图像帧。显示屏显示图像帧后，对应的显示图像可被人眼感知。

如此，电子设备在需要显示不适配于当前显示屏尺寸的应用界面时，能够在用户无感知的情况下，利用原始渲染尺寸和当前显示屏尺寸的比例关系，自适应的获取到适配于当前显示屏尺寸的界面布局。从而电子设备能够为用户提供更好的应用界面显示效果，提升用户使用体验。

此外，对于应用开发者而言，在应用开发过程中，能够仅开发适配于一种类型的电子设备显示屏的界面布局，即可满足多种类型的电子设备对于该应用的部署需求，提升了应用开发效率，降低应用开发成本。

为了更清楚的说明本申请实施例提供的上述方法，以电子设备为折叠屏手机为例，给出在折叠屏手机上显示应用程序的界面的一种可能的示例。

如图9所示，如果触发显示应用程序的用户界面时，该折叠屏手机处于展开状态，也即宽屏状态，则显示该应用程序的用户界面的过程为：折叠屏手机处于窄屏时，其屏幕宽度为375像素。开发者设计该应用程序时其原始渲染尺寸也为375像素，则折叠屏手机先基于375像素的宽度进行渲染，得到页面901。之后，根据折叠屏手机处于展开状态时宽屏的宽度(750像素)计算得到放大比例为2，则将页面901的宽度以及页面901所包含的元素数据和布局数据进行等比例放大2倍后得到页面902，之后再对页面902上的元素进行重排得到页面903，折叠屏手机在宽屏下显示该页面903即可。

在一些实施例中，对于电子设备的显示屏的尺寸可变化的场景下，例如，电子设备为折叠屏手机，那么在电子设备在显示屏上显示所述第三页面之后，电子设备确定所述显示屏由折叠状态变更为展开状态；其中，所述折叠状态下的显示屏的尺寸为所述第一尺寸，所述展开状态下的显示屏的尺寸为第二尺寸；所述第三页面为所述电子设备在所述显示屏处于折叠状态时显示的页面。

如图10所示，所述方法还包括：

S1001、电子设备确定显示屏的尺寸由第一尺寸变更为第二尺寸。

其中，所述第二尺寸大于所述第一尺寸。

示例性的，所述第二尺寸大于第一尺寸主要是指显示屏的宽度变宽，例如第一尺寸下显示屏的宽度为375像素，第二尺寸下显示屏的宽度为750像素。或者，示例性的，所述第二尺寸大于第一尺寸主要指显示屏的高度变高，例如第一尺寸下显示屏的高度为375像素，第二尺寸下显示屏的高度为750像素。

S1002、电子设备按照放大比例对第三页面的尺寸以及第三页面中包含的第三页面数据进行等比例放大后生成第四页面。

其中，所述放大比例根据所述第二尺寸和所述第一尺寸确定。

如前文所示，该放大比例可以为第二尺寸中的宽度值和第一尺寸中的宽度值的比例，也可以为第二尺寸中的高度值和第一尺寸中的高度值的比例。

该步骤的具体实现与S7022类似，不同的是，S7022中是对第一页面的尺寸以及第一页面中包含的第一页面数据(原始元素数据和原始布局数据)进行等比例缩放。该S1002中是对第三页面的尺寸以及第三页面中包含的第三页面数据(第三页面中包 含的元素数据和布局数据)进行等比例放大。

S1003、电子设备根据所述第二尺寸、预设页面重排规则以及所述第四页面包含的第四页面数据生成第五页面数据，并根据所述第五页面数据生成第五页面。

该步骤的具体实现可参考前文所述S703，此处不再赘述。

S1004、电子设备在所述显示屏上显示所述第五页面。

示例性的，如图11所示如果触发显示应用程序的用户界面时，该折叠屏手机处于折叠状态，也即窄屏，之后用户主动展开该屏幕，进而该折叠屏显示为宽屏，则显示该一个应用程序的用户界面的过程为：折叠屏处于折叠状态，也即窄屏时，显示屏的宽度为375像素，且开发者设计该应用时，其原始显示屏尺寸为375像素。在该情况下，折叠屏手机基于该375像素进行渲染后直接在该窄屏上显示该页面1101。之后如果用户主动展开该屏幕，使得该屏幕显示为宽屏，且该宽屏的宽度为750像素，根据750像素与375像素的比例，可得到放大比例为2，基于该放大比例，折叠屏手机将该页面1101等比例放大2倍，得到页面1102，之后再按照S703所述的方法对该页面1102上的元素进行重排，得到最终的页面1103，并在宽屏上显示该页面1103。

在一些实施例中，在所述电子设备在所述显示屏上显示所述第三页面之后，所述电子设备确定所述显示屏由展开状态变更为折叠状态；其中，所述展开状态下的显示屏的尺寸为所述第一尺寸，所述折叠状态下的显示屏的尺寸为第二尺寸；所述第三页面为所述电子设备在所述显示屏处于展开状态时显示的页面。

如图12所示，所述方法还包括：

S1201、电子设备确定所述显示屏的尺寸由第一尺寸变更为第二尺寸。

其中，所述第二尺寸小于所述第一尺寸。

示例性的，所述第二尺寸小于第一尺寸主要是指显示屏的宽度变窄，例如第一尺寸下显示屏的宽度为750像素，第二尺寸下显示屏的宽度为375像素。或者，示例性的，所述第二尺寸小于第一尺寸主要指显示屏的高度变小，例如第一尺寸下显示屏的高度为750像素，第二尺寸下显示屏的高度为375像素。

S1202、电子设备确定与所述第三页面对应的所述第二页面。

在该步骤中，第三页面为将第二页面重排后得到的页面。在该实施例中，通过得到与该第三页面对应的第二页面，也即重排前的页面，实现“关闭重排”。并在“关闭重排”后调整缩放比例，可得到新的页面，如下述步骤S1203所示。在一种可能的实现方式中，“关闭重排”可通过运行程序代码实现，比如通过设定参数的取值，使得在页面渲染过程中不执行用于实现“重排”这一过程的代码，进而实现“关闭重排”，得到第二页面。在另一种可能的实现方式中，电子设备在执行S701至S704的过程中，保存各个阶段生成的页面，比如第一页面、第二页面、第三页面等，进而直接确定与该第三页面对应的第二页面。

S1203、电子设备按照缩小比例对所述第二页面以及第二页面数据进行等比例缩小后生成第四页面。

其中，所述缩小比例根据所述第二尺寸和所述第一尺寸确定。

如前文所示，该缩小比例可以为第二尺寸中的宽度值和第一尺寸中的宽度值的比例，也可以为第二尺寸中的高度值和第一尺寸中的高度值的比例。

S1204、电子设备在所述显示屏上显示所述第四页面。

如图13所示，如果触发显示应用程序的用户界面时，该折叠屏手机处于展开状态，也即宽屏，之后用户主动折叠该屏幕，进而该折叠屏显示为窄屏，则显示该一个用程序的用户界面的过程为：折叠屏手机处于窄屏时，其屏幕宽度为375像素。开发者设计该应用程序时其原始渲染尺寸也为375像素，则折叠屏手机先基于375像素的宽度进行渲染，得到页面1301。之后，根据折叠屏手机处于展开状态时宽屏的宽度(750像素)计算得到放大比例为2，则将页面1301的宽度以及页面1301所包含的元素数据和布局数据进行等比例放大2倍后得到页面1302，之后再对页面1302上的元素进行重排得到页面1303，折叠屏手机在宽屏下显示该页面1303即可。之后，如果检测到用户折叠显示屏的操作，也即折叠屏手机由展开状态变为折叠状态，显示屏由宽屏变为窄屏，则折叠屏手机“关闭重排”并调整缩放比例为0.5后，得到最终的页面1304，并在窄屏上显示该1304。

以上结合图7-图13详细说明了本申请实施例提供的显示方法。以下结合图14详细说明本申请实施例提供的显示装置。

在一种可能的设计中，图14为本申请实施例提供的电子设备的结构示意图。如图14所示，电子设备1400可以包括：处理单元1401和显示单元1402。电子设备1400可用于实现上述方法实施例中涉及的电子设备的功能。

可选地，处理单元1401，用于支持电子设备1400执行图7中的S701、S7021、S7022以及S703；和/或，支持电子设备1400执行图10中的S1001、S1002以及S1003；和/或，支持电子设备1400执行图12中的S1201、S1202以及S1203。

可选地，显示单元1402，用于支持电子设备1400执行图7中的S704、图10中的S1004以及图12中的S1204。

可选地，图14所示的电子设备1400还可以包括收发单元(图14中未示出)，用于支持电子设备1400检测用于触发显示应用界面的操作；和/或，支持电子设备1400与其他电子设备进行通信。

其中，收发单元可以包括接收单元和发送单元，可以由收发器或收发器相关电路组件实现，可以为收发器或收发模块。电子设备1400中的各个单元的操作和/或功能分别为了实现上述方法实施例中所述的显示方法的相应流程，上述方法实施例涉及的各步骤的所有相关内容均可以援引到对应功能单元的功能描述，为了简洁，在此不再赘述。

可选地，图14所示的电子设备1400还可以包括存储单元(图14中未示出)，该存储单元中存储有程序或指令。当处理单元1401以及显示单元1402执行该程序或指令时，使得图14所示的电子设备1400可以执行上述方法实施例中所述的显示方法。

图14所示的电子设备1400的技术效果可以参考上述方法实施例中所述的显示方法的技术效果，此处不再赘述。

除了以电子设备1400的形式以外，本申请提供的技术方案也可以为电子设备中的功能单元或者芯片，或者与电子设备匹配使用的装置。

本申请实施例还提供一种芯片系统，包括：处理器，所述处理器与存储器耦合，所述存储器用于存储程序或指令，当所述程序或指令被所述处理器执行时，使得该芯 片系统实现上述任一方法实施例中的方法。

可选地，该芯片系统中的处理器可以为一个或多个。该处理器可以通过硬件实现也可以通过软件实现。当通过硬件实现时，该处理器可以是逻辑电路、集成电路等。当通过软件实现时，该处理器可以是一个通用处理器，通过读取存储器中存储的软件代码来实现。

可选地，该芯片系统中的存储器也可以为一个或多个。该存储器可以与处理器集成在一起，也可以和处理器分离设置，本申请实施例并不限定。示例性地，存储器可以是非瞬时性处理器，例如只读存储器ROM，其可以与处理器集成在同一块芯片上，也可以分别设置在不同的芯片上，本申请实施例对存储器的类型，以及存储器与处理器的设置方式不作具体限定。

示例性地，该芯片系统可以是现场可编程门阵列(field programmable gate array，FPGA)，可以是专用集成芯片(application specific integrated circuit，ASIC)，还可以是系统芯片(system on chip，SoC)，还可以是中央处理器(central processor unit，CPU)，还可以是网络处理器(network processor，NP)，还可以是数字信号处理电路(digital signal processor，DSP)，还可以是微控制器(micro controller unit，MCU)，还可以是可编程控制器(programmable logic device，PLD)或其他集成芯片。

应理解，上述方法实施例中的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。结合本申请实施例所公开的方法步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。

本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机程序，当该计算机程序在计算机上上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的显示方法。

本申请实施例还提供一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的显示方法。

另外，本申请实施例还提供一种装置。该装置具体可以是组件或模块，该装置可包括相连的一个或多个处理器和存储器。其中，存储器用于存储计算机程序。当该计算机程序被一个或多个处理器执行时，使得装置执行上述各方法实施例中的显示方法。

其中，本申请实施例提供的装置、计算机可读存储介质、计算机程序产品或芯片均用于执行上文所提供的对应的方法。因此，其所能达到的有益效果可参考上文所提供的对应的方法中的有益效果，此处不再赘述。

结合本申请实施例公开内容所描述的方法或者算法的步骤可以硬件的方式来实现，也可以是由处理器执行软件指令的方式来实现。软件指令可以由相应地软件模块组成，软件模块可以被存放于随机存取存储器(random access memory，RAM)、闪存、只读存储器(read only memory，ROM)、可擦除可编程只读存储器(erasable programmable ROM，EPROM)、电可擦可编程只读存储器(electrically EPROM，EEPROM)、寄存器、硬盘、移动硬盘、只读光盘(CD-ROM)或者本领域熟知的任何其它形式的存储介质中。一种示例性的存储介质耦合至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于专用集成电路(application specific integrated circuit，ASIC) 中。

通过以上的实施方式的描述，本领域技术人员可以清楚地了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明。实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成；即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的。例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式；例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，模块或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

计算机可读存储介质包括但不限于以下的任意一种：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何在本申请揭露的技术范围内的变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。