页面布局调整方法、装置与流程

1.本技术属于通信技术领域，具体涉及一种页面布局调整方法、装置。


背景技术：

2.随着电子设备的不断发展，电子设备的尺寸越来越多样化，显示方式也越来越多，例如：多屏显示、大屏显示、分屏显示等。然而，电子设备在不同的屏幕显示方式下展示信息时，通常会显示相同的页面布局，例如:电子设备从竖屏显示状态转换为分屏显示状态时，因为页面布局不变，只能显示原来页面内容中的部分内容，需要用户手动滑动显示未能显示的内容。如此，现有技术在适配不同屏幕尺寸下的页面显示的灵活性较差。


技术实现要素：

3.本技术实施例的目的是提供一种页面布局调整方法、装置，能够解决现有技术在适配不同屏幕尺寸下的页面显示的灵活性较差的问题。
4.为了解决上述技术问题，本技术是这样实现的：
5.第一方面，本技术实施例提供了一种页面布局调整方法，该页面布局调整方法包括：在显示目标应用页面的情况下，获取目标信息，目标信息用于指示目标应用页面的尺寸的变化情况；从预设响应式用户界面集合中确定与目标信息对应的目标页面布局模型；基于目标页面布局模型，调整目标应用页面的页面布局。
6.第二方面，本技术实施例提供了一种页面布局调整装置，该页面布局调整装置包括：获取模块、确定模块和调整模块。获取模块，用于在显示目标应用页面的情况下，获取目标信息，目标信息用于指示目标应用页面的尺寸的变化情况。确定模块，用于从预设响应式用户界面集合中确定与目标信息对应的目标页面布局模型。调整模块，用于基于确定模块确定的目标页面布局模型，调整目标应用页面的页面布局。
7.第三方面，本技术实施例提供了一种电子设备，该电子设备包括处理器和存储器，所述存储器存储可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如第一方面所述的方法的步骤。
8.第四方面，本技术实施例提供了一种可读存储介质，所述可读存储介质上存储程序或指令，所述程序或指令被处理器执行时实现如第一方面所述的方法的步骤。
9.第五方面，本技术实施例提供了一种芯片，所述芯片包括处理器和通信接口，所述通信接口和所述处理器耦合，所述处理器用于运行程序或指令，实现如第一方面所述的方法。
10.第六方面，本技术实施例提供一种计算机程序产品，该程序产品被存储在存储介质中，该程序产品被至少一个处理器执行以实现如第一方面所述的方法。
11.在本技术实施例中，电子设备可以根据目标信息(即指示目标应用页面的尺寸的变化情况)，从预设响应式用户界面集合中确定与目标信息对应的目标页面布局模型，并基于目标页面布局模型，调整目标应用页面的页面布局。由于电子设备调整目标应用页面的
页面布局所采用的页面布局模型，是从预设响应式用户界面集合中确定的与目标信息对应的页面布局模型，即该页面布局模型是针对目标应用页面的尺寸发生变化后，根据目标应用页面的尺寸变化情况确定的页面布局模型，因此，采用该页面布局模型调整目标应用页面的页面布局，能够适配目标应用页面的变化情况，从而实现针对页面的不同显示状态进行不同的ui显示，提高了电子设备在不同屏幕尺寸下的页面显示的灵活性。
附图说明
12.图1是本技术实施例提供的一种页面布局调整方法的示意图；
13.图2是本技术实施例提供的一种预设响应式用户界面集合的示意图；
14.图3是本技术实施例提供的一种手机的界面的实例示意图之一；
15.图4是本技术实施例提供的一种手机的界面的实例示意图之二；
16.图5是本技术实施例提供的一种手机的界面的实例示意图之三；
17.图6是本技术实施例提供的一种页面布局调整装置的结构示意图；
18.图7是本技术实施例提供的一种电子设备的硬件结构示意图之一；
19.图8是本技术实施例提供的一种电子设备的硬件结构示意图之二。
具体实施方式
20.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
21.本技术的说明书和权利要求书中的术语“第一”、“第二”等是用于区别类似的对象，而不用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便本技术的实施例能够以除了在这里图示或描述的那些以外的顺序实施，且“第一”、“第二”等所区分的对象通常为一类，并不限定对象的个数，例如第一对象可以是一个，也可以是多个。此外，说明书以及权利要求中“和/或”表示所连接对象的至少其中之一，字符“/”，一般表示前后关联对象是一种“或”的关系。
22.下面结合附图，通过具体的实施例及其应用场景对本技术实施例提供的页面布局调整方法进行详细地说明。
23.本技术实施例中的页面布局调整方法可以应用于在不同屏幕尺寸下显示目标页面的场景。
24.随着电子设备的迅猛发展，大屏手机、pad、折叠屏手机、车机大屏等大尺寸设备也发展迅猛。但随着设备尺寸越来越多样化，同一个应用的页面在不同屏幕尺寸下显示时，页面布局并不会发生改变，例如：电子设备从竖屏显示状态转换为分屏显示状态时，屏幕尺寸对应缩小，但是由于页面布局不变，只能显示原来页面内容中的部分内容，需要用户手动滑动显示未能显示的内容。因此，现有技术在适配不同屏幕尺寸下的页面显示的灵活性较差。随着各类终端的个性化、差异化设计，现有技术下的页面的显示布局设计主要面临如下几个方面的问题：1、随着多屏、大屏等设备的出现，各个应用程序面临着接入速度慢，接入复杂度高，模块之间耦合度过高等问题，并且随着接入模块的增加，以上问题更为突出；2、针
对不同屏幕的布局设计更新迭代较快，但快速迭代的成本很高，极其耗费人力，极其影响适配效率；3、不同的设备的布局涉及到多个终端兼容性的问题，导致兼容性极差，布局极不稳定；4、很多时候会权衡布局的设计和复杂度，导致最终的设计结果会为了复杂度做出一定的牺牲，无法为用户提供特定场景下最佳的显示方案。
25.本技术实施例的方案是采用响应式布局的设计方案，通过响应式用户界面(user interface，ui)，实现ui一次适配、多设备多场景运行，提高了应用页面的开发适配效率和体验性：1、制定了通用的响应式ui公共规范，保证了多个应用在多个终端和不同场景下交互的一致性；2、帮助应用在适配不同的设备尺寸时，通过通用的状态管理自动适配ui；3、通过软件开发工具包(software development kit，sdk)的形式满足多个应用的共性需求，具备复用性，减少应用重复开发；4、将ui显示的部分权限提供给用户，由用户个性化的去实现布局的最终显示效果。
26.在本技术实施例提供的方案中，电子设备可以根据目标信息(即指示目标应用页面的尺寸的变化情况)，从预设响应式用户界面集合中确定与目标信息对应的目标页面布局模型，并基于目标页面布局模型，调整目标应用页面的页面布局。由于电子设备调整目标应用页面的页面布局所采用的页面布局模型，是从预设响应式用户界面集合中确定的与目标信息对应的页面布局模型，即该页面布局模型是针对目标应用页面的尺寸发生变化后，根据目标应用页面的尺寸变化情况确定的页面布局模型，因此，采用该页面布局模型调整目标应用页面的页面布局，能够适配目标应用页面的变化情况，从而实现针对页面的不同显示状态进行不同的ui显示，提高了电子设备在不同屏幕尺寸下的页面显示的灵活性。
27.本技术实施例提供一种页面布局调整方法，图1示出了本技术实施例提供的一种页面布局调整方法的流程图，该方法可以应用于电子设备。如图1所示，本技术实施例提供的页面布局调整方法可以包括下述的步骤201至步骤203。
28.步骤201、在显示目标应用页面的情况下，电子设备获取目标信息。
29.本技术实施例中，上述目标信息用于指示目标应用页面的尺寸的变化情况。
30.可选地，本技术实施例中，上述目标应用页面可以为电子设备中的一个应用程序的界面，例如文档类应用程序的界面、视频类应用程序的界面。
31.可选地，本技术实施例中，上述目标信息可以为以下任一项：屏幕分屏调节、页面尺寸调整、屏幕状态转换。
32.可选地，本技术实施例中，屏幕分屏调节可以分为3级调节，分屏位置为屏幕宽度或高度的1/3，1/2或2/3处，也可以通过用户设置定义不同的调节级别。
33.可选地，本技术实施例中，上述屏幕状态转换可以为以下任一项：横屏状态转化为竖屏状态、竖屏状态转化为横屏状态、横屏状态转化为悬浮小窗状态、悬浮小窗状态转化为横屏状态、竖屏状态转化为悬浮小窗状态、悬浮小窗状态转化为竖屏状态。
34.可选地，本技术实施例中，上述目标应用页面的尺寸的变化情况可以为以下任一项：目标应用页面的尺寸缩小，目标应用页面的尺寸扩大、目标应用页面的尺寸横向扩大，纵向缩小、目标页面的尺寸横向缩小，纵向扩大。
35.步骤202、电子设备从预设响应式用户界面集合中确定与目标信息对应的目标页面布局模型。
36.需要说明的是，上述预设响应式用户界面集合可以理解为：针对各个尺寸或各个
应用场景的用户界面。由应用提供数据和页面布局，其中页面布局由响应式ui提供，业务结合自身需求选择不同的ui，当页面发生状态变化后会动态修改的布局、展示状态、尺寸等，重新渲染当前页面，真正的实现一套布局，多尺寸终端适配的方案。
37.示例性地，如图2所示，响应式用户界面由响应式sdk得到，响应式sdk包括响应式状态变化和预设响应式用户界面集合对应的容器布局，容器布局包括响应式组件和响应式布局。其中，响应式状态变化由屏幕信息得到的，例如：横竖屏变化、折叠屏变化、分屏变化、小屏变化等，容器布局由容器布局规则、业务数据(页面对应的应用数据)、页面布局等得到，容器布局规则可以包括布局尺寸、视图层级、控件组合、布局样式等规则，业务数据可以包括数据映射、数据过滤，页面布局可以包括页面填充、页面替换。
38.可选地，本技术实施例中，上述步骤202具体可以通过下述的步骤202a实现。
39.步骤202a、在目标应用页面的尺寸从第一尺寸变化为第二尺寸的情况下，电子设备将预设响应式用户界面集合中与第二尺寸对应的页面布局模型，确定为目标页面布局模型。
40.可选地，本技术实施例中，上述第一尺寸变化为第二尺寸可以为以下任一项：第一尺寸大于第二尺寸，或者第一尺寸小于第二尺寸。
41.示例性地，上述目标应用页面的第一尺寸可以为：分屏位置为屏幕高度的1/2处的尺寸，上述目标应用页面的第二尺寸可以为：分屏位置为屏幕高度的1/3处的尺寸，此时，第一尺寸大于第二尺寸。
42.又示例性地，或者，上述目标应用页面的第一尺寸可以为：竖屏状态下显示的悬浮小窗口的尺寸，上述目标应用页面的第二尺寸可以为：竖屏状态下显示的全屏窗口(即对悬浮小窗口进行点击输入后显示的窗口)的尺寸，此时，第一尺寸小于第二尺寸。
43.本技术实施例中，在目标应用页面的尺寸发生变化时，电子设备可以将预设响应式用户界面集合中与变化后的尺寸对应的页面布局模型，确定为目标页面布局模型，即不同的尺寸有对应的目标页面布局模型，从而提高了电子设备在不同屏幕尺寸下的页面显示的灵活性。
44.步骤203、电子设备基于目标页面布局模型，调整目标应用页面的页面布局。
45.上述步骤203具体可以通过下述的步骤203a1和步骤203a2实现。
46.步骤203a1、电子设备基于目标页面布局模型，调整目标应用页面的第一显示参数。
47.本技术实施例中，上述第一显示参数包括以下至少一项：目标应用页面中的页面元素的显示布局信息、显示状态信息、显示尺寸信息、显示位置信息。
48.可选地，本技术实施例中，上述目标应用页面中的页面元素包括以下至少一项：侧边导航栏、分栏列表、底部导航栏、索引栏、标题栏、子页签、工具栏、模态页面、对话框、列表、网格、子标题、设置页面、搜索场景。
49.可选地，本技术实施例中，上述目标应用页面中的页面元素的显示状态信息可以为以下任一项：页面元素显示、页面元素隐藏。
50.可选地，本技术实施例中，上述目标应用页面中的页面元素的显示位置信息可以为以下任一项：目标应用页面的底部、目标应用页面的侧边、目标应用页面的顶部。
51.步骤203a2、电子设备基于第一显示参数，重新配置目标应用页面的参数。
52.本技术实施例中，电子设备可以基于目标信息，确定一个与目标信息对应的页面布局模型，以通过页面布局模型灵活地调整目标应用页面的第一显示参数，以实现对目标应用页面的页面布局的调整，提高了电子设备在不同屏幕尺寸下的页面显示的灵活性。
53.可选地，本技术实施例中，上述步骤203具体可以通过下述的步骤203b实现。
54.步骤203b、在目标应用页面的页面元素包含第一类型页面元素的情况下，电子设备基于目标页面布局模型，隐藏目标应用页面中的第一类型页面元素，或者，显示目标应用页面中处于隐藏状态的第一类型页面元素。
55.可选地，本技术实施例中，上述第一类型页面元素可以为以下任一项:侧边导航栏、分栏列表、底部导航栏等。
56.可选地，本技术实施例中，上述第一类型页面元素可隐藏或显示；在横屏状态下，第一类型页面元素根据上一次用户的操作，自动隐藏或显示，在竖屏状态下，第一类型页面元素处于默认隐藏状态。
57.可选地，本技术实施例中，上述第一类型页面元素具有容器属性，可容纳标题栏、列表、按钮、卡片等控件。
58.可选地，本技术实施例中，上述第一类型页面元素区域可以上下或左右滑动查看，不会带动右侧内容窗口变化。
59.可选地，本技术实施例中，上述右侧内容为第一类型页面元素层级对应的具体内容。
60.可选地，本技术实施例中，上述第一类型页面元素区域的列表项切换由用户进行选择，同时支持列表项的切换，此时右侧的内容随之切换。
61.可选地，本技术实施例中，操作频繁的第一类型页面元素区域列表项在首屏展示。
62.可选地，本技术实施例中，上述第一类型页面元素层级通常不会超过2级，可通过分类标题展开形式进入下一层级；右侧内容区域进入到下一层级，点击和屏幕侧边滑动可唤起第一类型页面元素；
63.可选地，本技术实施例中，上述第一类型页面元素如果是显示状态，系统导航的返回操作，先影响右侧内容，右侧内容会逐层回到上一级页面，回到右侧最顶层时，继续返回，则退出目标应用；如果第一类型页面元素是隐藏状态，系统返回优先对右侧内容区域进行返回操作，返回到右侧内容区域最顶层时，继续返回，则退出目标应用。
64.可选地，本技术实施例中，如果第一类型页面元素采用的是模态悬浮形式显示，那么系统导航返回先触发收起第一类型页面元素动作。
65.示例性地，以电子设备为手机为例进行说明。如图3中的(a)所示，手机处于横屏状态，手机显示目标应用页面(例如：文档页面10)，该目标应用页面中包含第一类型页面元素(例如：侧边栏元素11)；如图3中的(b)所示，在用户将手机从横屏状态调整为竖屏状态的情况下，手机可以隐藏该目标应用界面中的侧边栏元素11。
66.本技术实施例中，第一类型页面元素可以根据屏幕的状态隐藏或显示，在横屏状态下，由于屏幕横向尺寸大，显示第一类型页面元素不影响页面内容显示，因此第一类型页面元素可以根据上一次用户的操作，即用户的操作习惯，自动隐藏或显示；在竖屏状态下，由于屏幕横向尺寸小，显示第一类型页面元素会影响页面内容显示，因此第一类型页面元素处于默认隐藏状态，从而使得电子设备在不同屏幕尺寸下的页面显示更加灵活。
67.可选地，本技术实施例中，上述步骤203具体可以通过下述的步骤203c实现。
68.步骤203c、在目标应用页面的页面元素包含第二类型页面元素的情况下，电子设备基于目标页面布局模型，调整目标应用页面的第二显示参数。
69.本技术实施例中，上述第二显示参数包括以下至少一项：目标应用页面中的页面元素的行间距、目标应用页面中的页面元素的显示尺寸、目标应用页面中的页面元素的显示数量。
70.可选地，本技术实施例中，上述第二类型页面元素可以为以下任一项:索引栏、标题栏、子页签、工具栏、对话框、列表等。
71.可选地，本技术实施例中，可以调整目标应用页面中的第二类型页面元素的行间距缩小或增大，以适应当前屏幕尺寸的显示。
72.可选地，本技术实施例中，目标应用页面中的第二类型页面元素的显示数量可以精简显示。该精简显示为显示部分页面元素，剩余部分页面元素可以滑动显示。
73.可选地，本技术实施例中，在屏幕处于分屏状态下，且分屏位置为屏幕高度的1/2处时，如果无法完整显示第二类型页面元素，则缩小目标应用页面中的第二类型页面元素的行间距，具体缩小数值根据视觉规范确定。
74.可选地，本技术实施例中，在屏幕处于分屏状态下，且分屏位置为屏幕高度的1/3处时，如果无法完整显示第二类型页面元素，则精简显示第二类型页面元素。
75.可选地，本技术实施例中，在横屏显示状态下，如果也无法完整显示第二类型页面元素，同样精简显示。
76.示例性地，如图4中的(a)所示，手机处于竖屏状态，手机在屏幕上显示目标应用页面(例如：联系人页面12)，该联系人页面12中包括第二类型页面元素(例如：索引栏元素13)；如图4中的(b)所示，在手机进行分屏操作(例如：分屏位置为屏幕高度的1/3处)后，手机可以在1/3分屏中精简显示联系人页面12中包含的索引栏元素13，索引栏元素13仅显示部分字母，仅保留“a
·d·g·j·m·q·
t
·
z”。
77.本技术实施例中，电子设备可以根据不同的屏幕尺寸，动态调整目标应用页面中的页面元素，使得页面中的页面元素更加适合当前屏幕尺寸的显示，从而用户能够便捷地对目标应用页面进行操作，提高了电子设备在不同屏幕尺寸下的页面显示的灵活性。
78.本技术实施例提供一种页面布局调整方法，电子设备可以根据目标信息(即指示目标应用页面的尺寸的变化情况)，从预设响应式用户界面集合中确定与目标信息对应的目标页面布局模型，并基于目标页面布局模型，调整目标应用页面的页面布局。由于电子设备调整目标应用页面的页面布局所采用的页面布局模型，是从预设响应式用户界面集合中确定的与目标信息对应的页面布局模型，即该页面布局模型是针对目标应用页面的尺寸发生变化后，根据目标应用页面的尺寸变化情况确定的页面布局模型，因此，采用该页面布局模型调整目标应用页面的页面布局，能够适配目标应用页面的变化情况，从而实现针对页面的不同显示状态进行不同的ui显示，提高了电子设备在不同屏幕尺寸下的页面显示的灵活性。
79.可以理解，本技术实施例提供一种电子设备通过不同的状态管理快速进行不同的ui显示的方案，适用于任何屏幕尺寸的电子设备。电子设备可以根据用户的操作行为，并将对应的行为转换为预设的数据格式和页面布局模型(页面布局由响应式ui提供)，并结合当
前显示的应用页面的业务需求选择不同的ui，当页面发生状态变化后，电子设备可以动态修改页面的布局、展示状态、尺寸等参数，重新渲染当前应用页面。
80.可选地，本技术实施例中，在上述步骤203之后，本技术实施例提供的页面布局调整方法还包括下述的步骤301和步骤302。
81.步骤301、电子设备接收用户对第一类型页面元素的第一输入。
82.可选地，本技术实施例中，上述第一输入为对第一类型页面元素区域中的列表项的新增输入、删除输入、修改输入等。
83.步骤302、电子设备响应于第一输入，采用与第一输入对应的编辑方式，编辑第一类型页面元素。
84.可选地，本技术实施例中，编辑方式可以包括以下至少一项：删除方式、尺寸调整方式、裁切方式。
85.可选地，本技术实施例中，对于固定重要的第一类型页面元素区域列表项，在编辑状态中可置灰不予编辑。
86.本技术实施例中，用户可以对第一类型页面元素进行输入，然后电子设备采用与第一输入对应的编辑方式，对第一类型页面元素进行编辑处理，从而可以根据用户的需求灵活地调整第一类型页面元素，提高了电子设备在不同屏幕尺寸下的页面显示的灵活性。
87.可选地，本技术实施例中，在上述步骤203之后，本技术实施例提供的页面布局调整方法还包括下述的步骤401和步骤402。
88.步骤401、电子设备接收用户对第一屏幕区域的第二输入。
89.本技术实施例中，上述第一屏幕区域为显示目标应用页面的屏幕区域。
90.可选地，本技术实施例中，上述第二输入为用户对屏幕的拖拽输入。
91.可选地，本技术实施例中，上述拖拽输入可以为以下任一项：将1/2分屏拖拽为1/3分屏的输入；将大屏拖拽为小屏的输入；将小屏拖拽为大屏的输入。
92.步骤402、电子设备响应于第二输入，调整第一屏幕区域的尺寸，并根据调整后的第一屏幕区域的尺寸，调整目标应用页面的页面尺寸。
93.可选地，本技术实施例中，分屏状态下，控件大小保持不变，横向宽度自适应分屏比例，(例如字号、图标大小始终不变)侧边栏导航、分栏列表宽度等始终和全屏保持一致，底部导航布局由左右布局变为上下布局。
94.可选地，本技术实施例中，分屏状态下，且分屏位置为屏幕宽度或高度的1/2处，1/3处时，目标应用页面的布局样式变为手机布局。
95.可选地，本技术实施例中，上述手机布局不显示侧边栏导航、分栏列表、模态弹窗等。
96.可选地，本技术实施例中，分屏状态下且分屏位置为屏幕高度的1/2处时，可以横向拉伸。此处的拉伸大小受用户拖拽的影响，用户可以自行托拽出相应大小的小屏、分栏等。
97.示例性地，以电子设备为pad为例进行说明。如图5中的(a)所示，pad处于分屏状态，且分屏位置为屏幕宽度的1/3处，2/3页面显示目标应用界面(例如视频页面14)，该目标应用界面中包含视频页面信息和底部导航栏15；1/3页面显示目标应用界面(例如购物页面16)，即该目标应用界面中包含购物页面信息和底部导航栏17；在用户将1/3分屏宽度拖拽
为1/2分屏宽度时，如图5中的(b)所示，视频页面14变化为视频页面18，显示布局变为手机布局，底部导航栏由上下布局变为左右布局(即图5中的(b)中的底部导航栏19)；购物页面16变化为购物页面20，由于尺寸由1/3变化为1/2，显示布局依然为手机布局，底部导航栏17显示布局不变，页面显示更多信息。
98.在电子设备调整目标应用页面的页面布局之后，当用户调整显示目标应用页面的屏幕区域的尺寸时，电子设备可以根据调整后的屏幕区域的尺寸，对目标应用页面的尺寸也进行调整，以使得目标应用页面的尺寸适配屏幕区域的尺寸，提高了电子设备调整页面的显示尺寸的灵活性。
99.需要说明的是，本技术实施例提供的页面布局调整方法，执行主体可以为电子设备或者页面布局调整装置，或者界面显示装置中的控制模块。本技术实施例中以电子设备装置执行页面布局调整方法为例，说明本技术实施例提供的页面布局调整的装置。
100.图6示出了本技术实施例中涉及的页面布局调整装置的一种可能的结构示意图。如图6所示，该页面布局调整装置70可以包括：获取模块71、确定模块72和调整模块73。
101.其中，获取模块71，用于在显示目标应用页面的情况下，获取目标信息，目标信息用于指示目标应用页面的尺寸的变化情况。确定模块72，用于从预设响应式用户界面集合中确定与目标信息对应的目标页面布局模型。调整模块73，用于基于确定模块72确定的目标页面布局模型，调整目标应用页面的页面布局。
102.本技术实施例提供一种页面布局调整装置，由于电子设备调整目标应用页面的页面布局所采用的页面布局模型，是从预设响应式用户界面集合中确定的与目标信息对应的页面布局模型，即该页面布局模型是针对目标应用页面的尺寸发生变化后，根据目标应用页面的尺寸变化情况确定的页面布局模型，因此，采用该页面布局模型调整目标应用页面的页面布局，能够适配目标应用页面的变化情况，从而实现针对页面的不同显示状态进行不同的ui显示，提高了电子设备在不同屏幕尺寸下的页面显示的灵活性。
103.在一种可能的实现方式中，上述确定模块72，具体用于在目标应用页面的尺寸从第一尺寸变化为第二尺寸的情况下，将预设响应式用户界面集合中与第二尺寸对应的页面布局模型，确定为目标页面布局模型。
104.在一种可能的实现方式中，上述调整模块73，具体用于基于目标页面布局模型，调整目标应用页面的第一显示参数，该第一显示参数包括以下至少一项：目标应用页面中的页面元素的显示布局信息、显示状态信息、显示尺寸信息、显示位置信息；并基于第一显示参数，重新配置目标应用页面的参数。
105.在一种可能的实现方式中，上述调整模块73，具体用于在目标应用页面的页面元素包含第一类型页面元素的情况下，基于目标页面布局模型，隐藏目标应用页面中的第一类型页面元素，或者，显示目标应用页面中处于隐藏状态的第一类型页面元素。
106.在一种可能的实现方式中，本技术实施例提供的界面显示装置70还包括：接收模块和编辑模块。接收模块，用于在调整模块73基于目标页面布局模型，调整目标应用页面的页面布局之后，接收用户对第一类型页面元素的第一输入。编辑模块，用于响应于接收模块接收的第一输入，采用与第一输入对应的编辑方式，编辑第一类型页面元素。
107.在一种可能的实现方式中，上述调整模块73，具体用于在目标应用页面的页面元素包含第二类型页面元素的情况下，基于目标页面布局模型，调整目标应用页面的第二显
示参数，该第二显示参数包括以下至少一项：目标应用页面中的页面元素的行间距、目标应用页面中的页面元素的显示尺寸、目标应用页面中的页面元素的显示数量。
108.在一种可能的实现方式中，本技术实施例提供的界面显示装置70还包括：接收模块。接收模块，用于在调整模块73基于目标页面布局模型，调整目标应用页面的页面布局之后，接收用户对第一屏幕区域的第二输入，该第一屏幕区域为显示目标应用页面的屏幕区域。上述调整模块73，还用于响应于上述接收模块接收的第二输入，调整第一屏幕区域的尺寸，并根据调整后的第一屏幕区域的尺寸，调整目标应用页面的页面尺寸。
109.本技术实施例中的页面布局调整装置可以是装置，也可以是电子设备中的部件、集成电路、或芯片。该装置可以是移动电子设备，也可以为非移动电子设备。示例性的，移动电子设备可以为手机、平板电脑、笔记本电脑、掌上电脑、车载电子设备、移动上网装置(mobile internet device，mid)、增强现实(augmented reality，ar)/虚拟现实(virtual reality，vr)设备、机器人、可穿戴设备、超级移动个人计算机(ultra-mobile personal computer，umpc)、上网本或者个人数字助理(personal digital assistant，pda)等，还可以为服务器、网络附属存储器(network attached storage，nas)、个人计算机(personal computer，pc)、电视机(television，tv)、柜员机或者自助机等，本技术实施例不作具体限定。
110.本技术实施例中的页面布局调整装置可以为具有操作系统的装置。该操作系统可以为安卓(android)操作系统，可以为ios操作系统，还可以为其他可能的操作系统，本技术实施例不作具体限定。
111.本技术实施例提供的页面布局调整装置能够实现上述方法实施例实现的各个过程，为避免重复，这里不再赘述。
112.可选地，如图7所示，本技术实施例还提供一种电子设备90，包括处理器91和存储器92，存储器92上存储有可在所述处理器91上运行的程序或指令，该程序或指令被处理器91执行时实现上述页面布局调整方法实施例的各个步骤，且能达到相同的技术效果，为避免重复，这里不再赘述。
113.需要说明的是，本技术实施例中的电子设备包括上述所述的移动电子设备和非移动电子设备。
114.图8为实现本技术实施例的一种电子设备的硬件结构示意图。
115.该电子设备100包括但不限于：射频单元101、网络模块102、音频输出单元103、输入单元104、传感器105、显示单元106、用户输入单元107、接口单元108、存储器109、以及处理器110等部件。
116.本领域技术人员可以理解，电子设备100还可以包括给各个部件供电的电源(比如电池)，电源可以通过电源管理系统与处理器110逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。图8中示出的电子设备结构并不构成对电子设备的限定，电子设备可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置，在此不再赘述。
117.其中，处理器110，用于在显示目标应用页面的情况下，获取目标信息，该目标信息用于指示目标应用页面的尺寸的变化情况；并从预设响应式用户界面集合中确定与目标信息对应的目标页面布局模型；以及基于目标页面布局模型，调整目标应用页面的页面布局。
118.本技术实施例提供一种电子设备，由于电子设备调整目标应用页面的页面布局所采用的页面布局模型，是从预设响应式用户界面集合中确定的与目标信息对应的页面布局模型，即该页面布局模型是针对目标应用页面的尺寸发生变化后，根据目标应用页面的尺寸变化情况确定的页面布局模型，因此，采用该页面布局模型调整目标应用页面的页面布局，能够适配目标应用页面的变化情况，从而实现针对页面的不同显示状态进行不同的ui显示，提高了电子设备在不同屏幕尺寸下的页面显示的灵活性。
119.可选地，处理器110，具体用于在目标应用页面的尺寸从第一尺寸变化为第二尺寸的情况下，将预设响应式用户界面集合中与第二尺寸对应的页面布局模型，确定为目标页面布局模型。
120.可选地，处理器110，具体用于基于目标页面布局模型，调整目标应用页面的第一显示参数，该第一显示参数包括以下至少一项：目标应用页面中的页面元素的显示布局信息、显示状态信息、显示尺寸信息、显示位置信息；并基于第一显示参数，重新配置目标应用页面的参数。
121.可选地，处理器110，具体用于在目标应用页面的页面元素包含第一类型页面元素的情况下，基于目标页面布局模型，隐藏目标应用页面中的第一类型页面元素，或者，显示目标应用页面中处于隐藏状态的第一类型页面元素。
122.可选地，用户输入单元107，用于在处理器110基于目标页面布局模型，调整目标应用页面的页面布局之后，接收用户对第一类型页面元素的第一输入。
123.处理器110，还用于响应于第一输入，采用与第一输入对应的编辑方式，编辑第一类型页面元素。
124.可选地，处理器110，具体用于在目标应用页面的页面元素包含第二类型页面元素的情况下，基于目标页面布局模型，调整目标应用页面的第二显示参数，该第二显示参数包括以下至少一项：目标应用页面中的页面元素的行间距、目标应用页面中的页面元素的显示尺寸、目标应用页面中的页面元素的显示数量。
125.可选地，用户输入单元107，还用于在处理器110基于目标页面布局模型，调整目标应用页面的页面布局之后，接收用户对第一屏幕区域的第二输入，该第一屏幕区域为显示目标应用页面的屏幕区域。
126.处理器110，还用于响应于第二输入，调整第一屏幕区域的尺寸，并根据调整后的第一屏幕区域的尺寸，调整目标应用页面的页面尺寸。
127.本技术实施例提供的电子设备能够实现上述方法实施例实现的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
128.本实施例中各种实现方式具有的有益效果具体可以参见上述方法实施例中相应实现方式所具有的有益效果，为避免重复，此处不再赘述。
129.应理解的是，本技术实施例中，输入单元104可以包括图形处理器(graphics processing unit，gpu)1041和麦克风1042，图形处理器1041对在视频捕获模式或图像捕获模式中由图像捕获装置(如摄像头)获得的静态图片或视频的图像数据进行处理。显示单元106可包括显示面板1061，可以采用液晶显示器、有机发光二极管等形式来配置显示面板1061。用户输入单元107包括触控面板1071以及其他输入设备1072中的至少一种。触控面板1071，也称为触摸屏。触控面板1071可包括触摸检测装置和触摸控制器两个部分。其他输入
设备1072可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆，在此不再赘述。
130.存储器109可用于存储软件程序以及各种数据。存储器109可主要包括存储程序或指令的第一存储区和存储数据的第二存储区，其中，第一存储区可存储操作系统、至少一个功能所需的应用程序或指令(比如声音播放功能、图像播放功能等)等。此外，存储器109可以包括易失性存储器或非易失性存储器，或者，存储器109可以包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(read-only memory，rom)、可编程只读存储器(programmable rom，prom)、可擦除可编程只读存储器(erasable prom，eprom)、电可擦除可编程只读存储器(electrically eprom，eeprom)或闪存。易失性存储器可以是随机存取存储器(random access memory，ram)，静态随机存取存储器(static ram，sram)、动态随机存取存储器(dynamic ram，dram)、同步动态随机存取存储器(synchronous dram，sdram)、双倍数据速率同步动态随机存取存储器(double data rate sdram，ddrsdram)、增强型同步动态随机存取存储器(enhanced sdram，esdram)、同步连接动态随机存取存储器(synch link dram，sldram)和直接内存总线随机存取存储器(direct rambus ram，drram)。本技术实施例中的存储器109包括但不限于这些和任意其它适合类型的存储器。
131.处理器110可包括一个或多个处理单元；可选的，处理器110集成应用处理器和调制解调处理器，其中，应用处理器主要处理涉及操作系统、用户界面和应用程序等的操作，调制解调处理器主要处理无线通信信号，如基带处理器。可以理解的是，上述调制解调处理器也可以不集成到处理器110中。
132.本技术实施例还提供一种可读存储介质，所述可读存储介质上存储有程序或指令，该程序或指令被处理器执行时实现上述方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
133.其中，所述处理器为上述实施例中所述的电子设备中的处理器。所述可读存储介质，包括计算机可读存储介质，如计算机只读存储器rom、随机存取存储器ram、磁碟或者光盘等。
134.本技术实施例另提供了一种芯片，所述芯片包括处理器和通信接口，所述通信接口和所述处理器耦合，所述处理器用于运行程序或指令，实现上述方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
135.应理解，本技术实施例提到的芯片还可以称为系统级芯片、系统芯片、芯片系统或片上系统芯片等。
136.本技术实施例提供一种计算机程序产品，该程序产品被存储在存储介质中，该程序产品被至少一个处理器执行以实现如上述方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
137.需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。此外，需要指出的是，本技术实施方式中的方法和装置的范围不限按示出或讨论的顺序来执行功能，还可包括根据所涉及
的功能按基本同时的方式或按相反的顺序来执行功能，例如，可以按不同于所描述的次序来执行所描述的方法，并且还可以添加、省去、或组合各种步骤。另外，参照某些示例所描述的特征可在其他示例中被组合。
138.通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分可以以计算机软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，或者网络设备等)执行本技术各个实施例所述的方法。
139.上面结合附图对本技术的实施例进行了描述，但是本技术并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本技术的启示下，在不脱离本技术宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本技术的保护之内。