页面适配的方法、装置、电子设备及存储介质制造方法及图纸

本申请公开了一种页面适配的方法、装置、电子设备及存储介质，属于页面显示技术领域。所述方法包括：获取竖屏显示页面的宽度与高度、以及显示屏的宽度与高度；根据所述竖屏显示页面的高度和所述显示屏的高度计算缩放比；根据所述缩放比计算预设的最大背景图中的估算位置，其中，所述竖屏显示页面的背景图从所述最大背景图中截取得到；根据所述估算位置计算目标位置；根据所述目标位置从所述最大背景图中获取所述补充裁剪图；基于所述补充裁剪图对所述显示屏的背景页面进行适配。对所述显示屏的背景页面进行适配。对所述显示屏的背景页面进行适配。

【技术实现步骤摘要】
页面适配的方法、装置、电子设备及存储介质


[0001]本申请属于页面显示
，具体涉及一种页面适配的方法、装置、电子设备及存储介质。

技术介绍

[0002]目前常用的终端设备包括竖屏模式和横屏模式。在竖屏模式和横屏模式可以运行相同的应用程序。通常应用页面只会设计竖屏显示页面。竖屏显示页面在横屏模式的终端设备上显示时，页面只会占用屏幕中间的部分区域。页面两侧区域空出，影响页面的美观度。

技术实现思路

[0003]本申请实施例的目的是提供一种页面适配的方法、装置、电子设备及存储介质，能够解决竖屏显示页面在横屏模式下显示时页面不美观的问题。
[0004]第一方面，本申请实施例提供了一种页面适配的方法，该方法包括：
[0005]获取所述竖屏显示页面的宽度与高度、以及显示屏的宽度与高度；
[0006]根据所述竖屏显示页面的高度和所述显示屏的高度计算缩放比；
[0007]根据所述缩放比计算预设的最大背景图中的估算位置，其中，所述竖屏显示页面的背景图从所述最大背景图中截取得到；
[0008]根据所述估算位置计算目标位置；
[0009]根据所述目标位置从所述最大背景图中获取所述补充裁剪图；
[0010]基于所述补充裁剪图对所述显示屏的背景页面进行适配。
[0011]第二方面，本申请实施例提供了一种页面适配的装置，所述装置包括：
[0012]第一获取模块，用于获取竖屏显示页面的宽度与高度、以及显示屏的宽度与高度；
[0013]第一计算模块，用于根据所述竖屏显示页面的高度和所述显示屏的高度计算缩放比；
[0014]第二计算模块，用于根据所述缩放比计算预设的最大背景图中的估算位置，其中，所述竖屏显示页面的背景图从所述最大背景图中截取得到；
[0015]第三计算模块，用于根据所述估算位置计算目标位置；
[0016]第二获取模块，用于根据所述目标位置从所述最大背景图中获取补充裁剪图；
[0017]第一处理模块，用于基于所述补充裁剪图对所述显示屏的背景页面进行适配。
[0018]第三方面，本申请实施例提供了一种电子设备，该电子设备包括处理器和存储器，所述存储器存储可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如第一方面所述的方法的步骤。
[0019]第四方面，本申请实施例提供了一种可读存储介质，所述可读存储介质上存储程序或指令，所述程序或指令被处理器执行时实现如第一方面所述的方法的步骤。
[0020]第五方面，本申请实施例提供了一种芯片，所述芯片包括处理器和通信接口，所述
通信接口和所述处理器耦合，所述处理器用于运行程序或指令，实现如第一方面所述的方法。
[0021]第六方面，本申请实施例提供一种计算机程序产品，该程序产品被存储在存储介质中，该程序产品被至少一个处理器执行以实现如第一方面所述的方法。
[0022]在本申请实施例中，根据缩放比计算最大背景图中的估算位置，根据估算位置计算目标位置，能够保证在从最大背景图中截取竖屏显示页面的背景图时出现偏差的情况下，也能准确得到补充裁剪图在最大背景图中的位置。由于竖屏显示页面的背景图和补充裁剪图都是从最大背景图中得到，在基于补充裁剪图对显示屏的背景页面进行适配时能够让背景无缝拼接，不会出现割裂，增加页面的美观度。
附图说明
[0023]图1是本申请实施例中页面适配的方法流程图。
[0024]图2是本申请实施例中竖屏显示页面的背景图。
[0025]图3是本申请实施例中最大背景图的示意图。
[0026]图4是本申请实施例中竖屏显示页面的背景图和补充裁剪图在最大背景图中的位置示意图。
[0027]图5是本申请实施例中左补充裁剪图的示意图。
[0028]图6是本申请实施例中右补充裁剪图的示意图。
[0029]图7是本申请实施例中完整背景图的示意图。
[0030]图8是本申请实施例中页面适配的装置示意图。
[0031]图9是本申请实施例中电子设备示意图。
[0032]图10是本申请实施例中电子设备的硬件结构示意图。
具体实施方式
[0033]下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员获得的所有其他实施例，都属于本申请保护的范围。
[0034]本申请的说明书和权利要求书中的术语“第一”、“第二”等是用于区别类似的对象，而不用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施，且“第一”、“第二”等所区分的对象通常为一类，并不限定对象的个数，例如第一对象可以是一个，也可以是多个。此外，说明书以及权利要求中“和/或”表示所连接对象的至少其中之一，字符“/”，一般表示前后关联对象是一种“或”的关系。
[0035]需要说明的是，本申请中所有获取信号、信息或数据的动作都是在遵照所在地国家相应的数据保护法规政策的前提下，并获得由相应装置/账户所有者给予授权的情况下进行的。
[0036]下面结合附图，通过具体的实施例及其应用场景对本申请实施例提供的页面适配的方法进行详细地说明。
[0037]如图1所示，以本申请实施例应用于电子设备为例，本申请介绍的一种页面适配的
方法包括步骤S1100
‑
S1600。
[0038]S1100：获取竖屏显示页面的宽度与高度、以及显示屏的宽度与高度。
[0039]竖屏显示页面是针对终端设备的竖屏模式所设计的应用程序页面。竖屏显示页面包括页面内容和背景图。页面内容可以包括与该应用程序相关的按钮图标、在页面上显示的文字等。背景图作为页面内容的背景，在页面内容后方显示。在显示竖屏显示页面时会同时显示背景图和页面内容。终端设备通常具有竖屏模式和横屏模式，用户可以根据使用需求在竖屏模式和横屏模式中进行切换。在竖屏模式下，终端设备的宽度小于高度。在横屏模式下，终端设备的宽度大于高度。
[0040]竖屏显示页面的宽度和高度通常以px(pixel，像素)为单位，竖屏显示页面的背景图的宽度和高度与竖屏显示页面的宽度和高度相同。比如竖屏显示页面的宽度可以为1080px，竖屏显示页面的高度可以为1920px。竖屏显示页面的背景图的宽度也为1080px，竖屏显示页面的背景图的高度也为1920px。显示屏的宽度和高度同样以px为单位，比如显示屏的宽度为852px，显示屏的高度为640px。显示屏的宽度和高度可以根据终端设备的具体配置来确定。
[0041]S1200：根据所述竖屏显示页面的高度和所述显示屏的高度计算缩放比。
[0042]竖屏显示页面在显示屏上显示时，由于竖屏显示页面的高度大于显示屏的高度，需要将竖屏显示页面缩放后在显示屏上显示本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面适配的方法，其特征在于，所述方法包括：获取竖屏显示页面的宽度与高度、以及显示屏的宽度与高度；根据所述竖屏显示页面的高度和所述显示屏的高度计算缩放比；根据所述缩放比计算预设的最大背景图中的估算位置，其中，所述竖屏显示页面的背景图从所述最大背景图中截取得到；根据所述估算位置计算目标位置；根据所述目标位置从所述最大背景图中获取补充裁剪图；基于所述补充裁剪图对所述显示屏的背景页面进行适配。2.根据权利要求1所述的方法，其特征在于，所述根据所述缩放比计算预设的最大背景图中的估算位置，包括：根据所述缩放比和所述显示屏的宽度计算扩展宽度；根据所述扩展宽度计算所述最大背景图中的估算位置。3.根据权利要求1所述的方法，其特征在于，所述根据所述估算位置计算目标位置，包括：根据所述估算位置确定匹配区域；获取所述竖屏显示页面的背景图的第一边界的像素颜色；获取所述匹配区域中每一列像素的颜色；将所述匹配区域中每一列像素的颜色与所述第一边界的像素颜色进行比对；根据比对结果确定目标列，所述目标列的像素颜色与所述第一边界的像素颜色的差异最小；根据所述目标列在所述最大背景图中的位置确定所述目标位置。4.根据权利要求1所述的方法，其特征在于，所述基于所述补充裁剪图对所述显示屏的背景页面进行适配，包括：根据所述补充裁剪图和所述竖屏显示页面的背景图获取完整背景图；在所述显示屏上显示所述完整背景图以及所述竖屏显示页面的内容区。5.根据权利要求4所述的方法，其特征在于，所述根据所述补充裁剪图和所述竖屏显示页面的背景图获取完整背景图，包括：根据所述补充裁剪图在所述最大背景图中的位置，从所述最大背景图中获取融合区；根据所述融合区中像素的颜色，调整所述竖屏显示页面的背景图中对应的像素的颜色；根据调整后的竖屏显示页面的背景图和所述补充裁剪图获...

【专利技术属性】
技术研发人员：李昕煜，
申请(专利权)人：维沃移动通信有限公司，
类型：发明
国别省市：