CN113867868B - 显示参数确定方法、装置及存储介质 - Google Patents

Abstract

本公开关于一种显示参数确定方法、装置及存储介质。上述方法包括在目标对象被显示在页面的情况下，获取上述页面的页面组件输出的第一尺寸参数，上述第一尺寸参数为上述页面的可视区域的尺寸参数；获取上述页面的页面组件输出的第二尺寸参数，上述第二尺寸参数为在上述页面未显示上述目标对象的情况下，上述可视区域的尺寸参数；根据上述第一尺寸参数和上述第二尺寸参数，确定上述目标对象在上述页面中的显示参数。本公开可以在不依赖于原生应用提供的接口的情况下得到目标对象在页面上显示时的显示参数，从而使得该页面显示时可以基于得到的上述显示参数适应性调整页面布局的显示效果而不受限于操作系统或原生应用。

Description

显示参数确定方法、装置及存储介质

技术领域

本公开涉及互联网技术领域，尤其涉及显示参数确定方法、装置及存储介质。

背景技术

基于HTML(HyperText Markup Language，超文本标记语言)5技术开发的移动端页面相较于原生应用有更好的可移植性和更低的开发成本。在页面显示时，其它应用程序或者操作系统可能会出于某些原因将其对应的组件显示在页面上，从而对于页面显示效果产生影响，而HTML5并未提供可以获取上述组件尺寸的接口。为了针对这一情况适应性调整页面布局，相关技术通常依赖于原生应用获取上述组件的尺寸，但是不同原生应用提供的接口不同，这一定程度上影响了页面的兼容性，甚至一些原生应用并未提供接口，从而降低了页面显示效果。

发明内容

本公开提供显示参数确定方法、装置及存储介质，本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种显示参数确定方法，包括：

在目标对象被显示在页面的情况下，获取所述页面的页面组件输出的第一尺寸参数，所述第一尺寸参数为所述页面的可视区域的尺寸参数；

获取所述页面的页面组件输出的第二尺寸参数，所述第二尺寸参数为在所述页面未显示所述目标对象的情况下，所述可视区域的尺寸参数；

根据所述第一尺寸参数和所述第二尺寸参数，确定所述目标对象在所述页面中的显示参数。

在一些可能的实施例中，所述方法还包括：

获取浏览器窗口对象；

所述获取所述页面的页面组件输出的第一尺寸参数，包括：在所述目标对象被显示在所述页面的情况下，调用所述页面组件的第一接口，将所述第一接口输出的第一属性参数作为所述第一尺寸参数，其中，所述第一属性参数表征所述浏览器窗口对象的尺寸参数；

所述获取所述页面的页面组件输出的第二尺寸参数，包括：在页面初始化状态下，调用所述第一接口，将所述第一接口输出的第一属性参数作为所述第二尺寸参数。

在一些可能的实施例中，所述方法还包括：

监听所述浏览器窗口对象发出的第一尺寸变化事件，

在监听到所述第一尺寸变化事件的情况下，执行所述获取所述页面的页面组件输出的第一尺寸参数的操作。

在一些可能的实施例中，所述获取所述页面的页面组件输出的第一尺寸参数，包括：基于所述页面组件，获取所述页面对应的视觉视口对象；在所述目标对象被显示在所述页面的情况下，调用所述页面组件的第二接口，将所述第二接口输出的第二属性参数作为所述第一尺寸参数，其中，所述第二属性参数表征所述视觉视口对象的尺寸参数；

所述获取所述页面的页面组件输出的第二尺寸参数，包括：基于所述页面组件，获取目标文档对象，所述目标文档对象对应于所述页面的根元素；调用所述页面组件的第三接口，将所述第三接口输出的第三属性参数作为所述第二尺寸参数，所述第三属性参数表征所述目标文档对象的尺寸参数。

在一些可能的实施例中，所述方法还包括：

监听所述视觉视口对象发出的第二尺寸变化事件，

在监听到所述第二尺寸变化事件的情况下，执行所述获取所述页面的页面组件输出的第一尺寸参数的操作。

在一些可能的实施例中，所述根据所述第一尺寸参数和所述第二尺寸参数，确定所述目标对象在所述页面中的显示参数，包括：

根据所述第二尺寸参数和所述第一尺寸参数之间的差异，确定所述显示参数。

在一些可能的实施例中，所述第一尺寸参数和所述第二尺寸参数为高度参数，或，所述第一尺寸参数和所述第二尺寸参数为宽度参数。

在一些可能的实施例中，所述方法还包括：根据所述显示参数，确定目标显示区域，所述目标显示区域为所述页面中未被所述目标对象遮挡的区域；

在所述目标显示区域中显示除所述目标对象之外的其他页面元素。

在一些可能的实施例中，所述在所述目标显示区域中显示除所述目标对象之外的其他页面元素，包括：

根据所述显示参数，确定第一目标页面元素，其中，所述显示参数被确定前的所述第一目标页面元素与所述目标对象的显示区域至少部分重叠；

将所述第一目标页面元素显示在所述目标显示区域上。

在一些可能的实施例中，所述在所述目标显示区域中显示除所述目标对象之外的其他的页面元素，包括：

确定第二目标页面元素与所述目标对象的预设位置关系；

根据所述显示参数和所述预设位置关系，在所述目标显示区域中确定目标显示位置；

在所述目标显示位置渲染所述第二目标页面元素。

根据本公开实施例的第二方面，提供一种显示参数确定装置，包括：

第一尺寸参数获取模块，被配置为执行在目标对象被显示在页面的情况下，获取所述页面的页面组件输出的第一尺寸参数，所述第一尺寸参数为所述页面的可视区域的尺寸参数；

第二尺寸参数获取模块，被配置为执行获取所述页面的页面组件输出的第二尺寸参数，所述第二尺寸参数为在所述页面未显示所述目标对象的情况下，所述可视区域的尺寸参数；

显示参数确定模块，被配置为执行根据所述第一尺寸参数和所述第二尺寸参数，确定所述目标对象在所述页面中的显示参数。

在一些可能的实施例中，所述装置还包括对象获取模块，所述对象获取模块被配置为执行获取浏览器窗口对象；

所述第一尺寸参数获取模块，被配置为执行在所述目标对象被显示在所述页面的情况下，调用所述页面组件的第一接口，将所述第一接口输出的第一属性参数作为所述第一尺寸参数，其中，所述第一属性参数表征所述浏览器窗口对象的尺寸参数；

所述第二尺寸参数获取模块，被配置为执行在页面初始化状态下，调用所述第一接口，将所述第一接口输出的第一属性参数作为所述第二尺寸参数。

在一些可能的实施例中，所述装置还包括第一监听模块，所述第一监听模块被配置为执行：

监听所述浏览器窗口对象发出的第一尺寸变化事件，

在监听到所述第一尺寸变化事件的情况下，执行所述获取所述页面的页面组件输出的第一尺寸参数的操作。

在一些可能的实施例中，所述第一尺寸参数获取模块，被配置为执行基于所述页面组件，获取所述页面对应的视觉视口对象；在所述目标对象被显示在所述页面的情况下，调用所述页面组件的第二接口，将所述第二接口输出的第二属性参数作为所述第一尺寸参数，其中，所述第二属性参数表征所述视觉视口对象的尺寸参数；

所述第二尺寸参数获取模块，被配置为执行基于所述页面组件，获取目标文档对象，所述目标文档对象对应于所述页面的根元素；调用所述页面组件的第三接口，将所述第三接口输出的第三属性参数作为所述第二尺寸参数，所述第三属性参数表征所述目标文档对象的尺寸参数。

在一些可能的实施例中，所述装置还包括第二监听模块，所述第二监听模块被配置为执行：

监听所述视觉视口对象发出的第二尺寸变化事件，

在监听到所述第二尺寸变化事件的情况下，执行所述获取所述页面的页面组件输出的第一尺寸参数的操作。

在一些可能的实施例中，所述显示参数确定模块，被配置为执行：

根据所述第二尺寸参数和所述第一尺寸参数之间的差异，确定所述显示参数。

在一些可能的实施例中，所述第一尺寸参数和所述第二尺寸参数均为高度参数，或，所述第一尺寸参数和所述第二尺寸参数均为宽度参数。

在一些可能的实施例中，所述装置还包括：

页面调整模块，被配置为执行根据所述显示参数，确定目标显示区域，所述目标显示区域为所述页面中未被所述目标对象遮挡的区域；以及，在所述目标显示区域中显示除所述目标对象之外的其他页面元素。

在一些可能的实施例中，所述页面调整模块，被配置为执行：

根据所述显示参数，确定第一目标页面元素，其中，所述显示参数被确定前的所述第一目标页面元素与所述目标对象的显示区域至少部分重叠；

将所述第一目标页面元素显示在所述目标显示区域上。

在一些可能的实施例中，所述页面调整模块，被配置为执行：

确定第二目标页面元素与所述目标对象的预设位置关系；

根据所述显示参数和所述预设位置关系，在所述目标显示区域中确定目标显示位置；

在所述目标显示位置渲染所述第二目标页面元素。

根据本公开实施例的第三方面，提供一种电子设备，包括：处理器；用于存储处理器可执行指令的存储器；其中，处理器被配置为执行指令，以实现如上述第一方面中任一项的方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，当计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行本公开实施例的第一方面中任一项的方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，计算机程序产品包括计算机程序，计算机程序存储在可读存储介质中，计算机设备的至少一个处理器从可读存储介质读取并执行计算机程序，使得计算机设备执行本公开实施例的第一方面中任一项的方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

本公开实施例中上述第一尺寸参数和上述第二尺寸参数均可以基于页面组件直接得到，页面组件是电子设备的应用程序所内置的用于展示页面的组件，这一组件遵循页面展示标准，并不属于原生应用提供的接口，这就使得本公开中页面可以在不依赖于原生应用提供的接口的情况下得到目标对象在页面上进行显示时的显示参数，从而使得该页面显示时可以基于得到的上述显示参数适应性调整页面布局的显示效果而不受限于操作系统或原生应用。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种显示参数确定方法的流程图；

图2是根据一示例性实施例示出的Android操作系统环境下页面变化示意图；

图3是根据一示例性实施例示出的iOS操作系统环境下页面变化示意图；

图4是根据一示例性实施例示出的Android操作系统环境下确定目标对象尺寸的方法示意图；

图5根据一示例性实施例示出的在目标显示区域中显示除目标对象之外的其他页面元素的方法示意图；

图6根据一示例性实施例示出的另一在目标显示区域中显示除目标对象之外的其他页面元素的方法示意图；

图7根据一示例性实施例示出的菜单栏显示效果示意图；

图8根据一示例性实施例示出的另一菜单栏显示效果示意图；

图9根据一示例性实施例示出的不同操作系统中工具栏显示效果示意图；

图10是根据一示例性实施例示出的一种显示参数确定装置的框图；

图11是根据一示例性实施例示出的一种电子设备的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的第一对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

相关技术中为了得到其它应用程序或者操作系统在页面中显示的对象的尺寸，可以借助于业务桥的方式，调用原生应用提供的用于获取该对象的尺寸的接口。以原生应用为某一支付类应用，上述对象为移动端键盘为例，可以调用该支付类应用为开发者提供的业务桥监听键盘高度变化。但是原生应用不一定会对各可能显示在页面的对象均提供对应的尺寸获取接口，不同的原生应用的上述尺寸获取接口也不一定兼容，甚至很多原生应用不提供上述尺寸获取接口。随着移动端页面的分享变得频繁，不同原生应用的上述尺寸获取接口不兼容问题也随之严重，对于无法提供上述尺寸获取接口的原生应用，移动端页面的显示效果可能受到影响，比如，若开发者希望能够贴合弹出的键盘渲染菜单栏，因为原生应用无法提供键盘尺寸获取接口，则可能导致开发者无法实现这一页面显示效果。

为了在不依赖原生应用的前提下，获取目标对象在页面中的显示参数，本公开实施例提供一种显示参数确定方法。本公开实施例提供的显示参数确定方法可以由电子设备实施，上述电子设备可以为用户设备(User Equipment，UE)、移动设备、用户终端、终端、蜂窝电话、无绳电话、个人数字处理(Personal Digital Assistant，PDA)、手持设备、计算设备、车载设备、可穿戴设备等。下面以电子设备作为执行主体为例对本公开实施例的显示参数确定方法进行说明。

图1是根据一示例性实施例示出的一种显示参数确定方法的流程图，如图1所示，上述方法至少包括以下步骤S10-S30。

在步骤S10中，在目标对象被显示在页面的情况下，获取上述页面的页面组件输出的第一尺寸参数，上述第一尺寸参数为上述页面的可视区域的尺寸参数。

本公开实施例中页面为在电子设备的屏幕中进行显示的页面，可以为嵌于应用程序中的HTML页面，比如，H5页面。H5页面是基于HTML发展到第五代的通用网页语言制作的页面，可以在原生应用中取得很好的显示效果。当页面所在的原生应用、其它原生应用或者操作系统的相关对象在该页面中被显示时，页面的可视区域可以相应的发生变化。由于页面所在的原生应用的对象的尺寸是已知的，通常不需要基于本公开实施例中的方法进行计算，故本公开实施例中目标对象可以为属于其它原生应用或者操作系统的、并且可以被显示在该页面中的对象，比如，可以为某个应用程序的显示控件，比如输入法的键盘，也可以为操作系统的显示控件，比如操作系统弹出的菜单栏。本公开实施例中可以用于确定各种目标对象的显示参数，进而可以优化页面布局，取得更好的页面显示效果，并且这一显示效果可以具备较好的兼容性。

本公开实施例中，布局视口和视觉视口都属于可视区域。但是，对于不同的操作系统，可视区域的变化机制是不同的，有的操作系统的布局视口跟随目标对象的显示而被改变，有的操作的视觉视口跟随目标对象的显示而被改变。布局视口可以被理解为浏览器默认的窗口，一般在电子设备的浏览器内核都定义一个虚拟的布局视口。在具体实现中，可以将布局视口设置为电子终端的屏幕尺寸。视觉视口指用户可以看到的区域，视觉视口在某些情况下可能与布局视口重合，但是在某些情况下不是，比如，当页面发生缩放时，视觉视口相应发生变化，但是并不会影响到布局视口。

以Android操作系统为例，请参考图2，其是根据一示例性实施例示出的Android操作系统环境下页面变化示意图。图2左侧示出了页面中不显示目标对象的情况下的页面显示效果，图2右侧示出了页面中显示目标对象的情况下页面的显示效果。当键盘收起时，页面的显示空间几乎可以占满显示屏，当键盘被打开时，页面的显示空间被挤占了。这一显示空间的变化体现在了页面对应的布局视口尺寸的变化，也就是说Android操作系统是一种响应于上述目标对象的显示，布局视口尺寸对应发生改变的操作系统。

对于这一类型的操作系统，可以获取浏览器窗口对象(window)，将该浏览器窗口对象对应的区域视为上述布局视口。在目标对象被显示在页面的情况下，页面尺寸发生变化。这种情况下，调用上述页面组件的第一接口，将上述第一接口输出的第一属性参数作为上述第一尺寸参数，其中，上述第一属性参数表征在目标对象被显示在页面的情况下、上述浏览器窗口对象的尺寸参数。示例性的，以目标对象为键盘为例，为了获取键盘在页面中的显示高度，可以通过window.innerHeight这一属性来获取浏览器窗口对象的高度，将该高度作为上述第一尺寸参数。本公开实施例中第一接口为页面组件提供的接口，页面组件是电子设备的应用程序所内置的用于展示页面的组件，这一组件遵循页面展示标准，并不属于原生应用，以WebView为例，WebView即可被理解为一种页面组件，是可以在应用程序中显示页面的一种插件，这一插件提供的接口可以在各种以该插件为基础开发的应用程序中被调用，其调用不受制于原生应用。也就是说，第一接口并不属于原生应用接口，因此，第一接口的调用也不受限于原生应用，从而使得本公开实施例中的显示参数确定方法可以在各种原生应用框架下实施。当然，后文提及的第二接口以及第三接口也与第一接口一样，都是基于页面组件提供的接口，对此，本公开实施例不做赘述。

对于这一类型的操作系统，可以监听上述浏览器窗口对象发出的第一尺寸变化事件，在监听到上述第一尺寸变化事件的情况下，执行上述获取上述页面的页面组件输出的第一尺寸参数的操作。也就是说，当目标对象被显示在页面中时，会改变布局视口尺寸，这种情况下window对象的resize事件会被触发(第一尺寸变化事件)，从而触发本公开实施例中方法的后续执行步骤。resize事件是在布局视口的尺寸发生变化时由页面组件自动触发的事件，其可以被理解为一种尺寸变化事件，通过监听这一事件，可以在上述类型的操作系统的环境下，在目标对象被显示时及时获取到目标对象的尺寸，以便于根据这一尺寸调整页面布局，从而优化页面显示效果。

以iOS操作系统为例，请参考图3，其是根据一示例性实施例示出的iOS操作系统环境下页面变化示意图。当键盘被弹出时，页面的显示区域被顶起，部分内容或超过移动终端的屏幕范围。这种情况下难以通过布局视口的变化来得到键盘的尺寸。但是，这种情况下键盘的弹出会导致视觉视口的尺寸发生变化，也就是说iOS操作系统是一种响应于上述目标对象的显示，视觉视口尺寸对应发生改变的操作系统。

对于这一类型的操作系统，可以基于上述页面组件，获取上述页面对应的视觉视口对象(visualViewport，视觉窗口类VisualViewport的实例)。在上述目标对象被显示在上述页面的情况下，调用上述页面组件的第二接口，将上述第二接口输出的第二属性参数作为上述第一尺寸参数，其中，上述第二属性参数表征上述视觉视口对象的尺寸参数。具体来说，视觉视口在iOS操作系统通过页面组件的visualViewport API(ApplicationProgramming Interface，应用程序接口)获取，该API被赋予了6类属性，分别是height，width，onresize，onscroll，offsetLeft，offsetTop，其中，height、width、offsetLeft、offsetTop分别对应于视觉视口的宽度、视觉视口的长度、视觉视口距离布局视口左侧的距离、视觉视口距离布局视口顶部的距离，onresize属性表征在尺寸变更情况下触发相应的事件，onscroll属性表征在滚动条移动情况下触发相应的事件，。可以通过这6类属性确定视觉视口对象的尺寸参数，将该尺寸参数确定为第一尺寸参数。示例性的，以目标对象为键盘为例，为了获取键盘在页面中的显示高度，可以通过visualViewport.height这一属性来获取视觉视口的高度，将该高度作为上述第一尺寸参数。

对于iOS类型的操作系统，可以监听上述视觉视口对象发出的第二尺寸变化事件，在监听到上述第二尺寸变化事件的情况下，执行上述获取上述页面的页面组件输出的第一尺寸参数的操作。也就是说，当目标对象被显示在页面中时，会改变页面对应的视觉视口尺寸，这种情况下visualViewport.onresize即可监听到第二尺寸变化事件，从而触发本公开实施例中方法的后续执行步骤。通过监听这一事件，可以在iOS类型的操作系统的环境下，在目标对象被显示时及时获取到目标对象的尺寸，以便于根据这一尺寸调整页面布局，从而优化页面显示效果。

在步骤S20中，获取上述页面的页面组件输出的第二尺寸参数，上述第二尺寸参数为在上述页面未显示上述目标对象的情况下，上述可视区域的尺寸参数。

本公开实施例中获取到的第二尺寸参数是在页面未显示上述目标对象情况下可视区域的尺寸参数，本公开实施例并不限定第二尺寸参数的获取时机。在一个场景中，可以在页面初始化的情况下获取上述第二尺寸参数，然后将上述第二尺寸参数进行存储以便于后续在有需要的情况下可以基于存储结果获取上述第二尺寸参数。在其他场景中也可以在页面被正常显示后择机获取上述第二尺寸参数并进行存储，比如可以在预设时间内未捕捉到页面操作的情况下获取上述第二尺寸参数，避免在页面操作频繁的情况下增加应用程序的负担。在本公开实施例步骤S20中即可基于上述存储结果，获取上述第二尺寸参数。可以理解的，上述步骤S10和步骤S20在具体执行时，不分先后顺序，在实际执行时，可以根据需要对执行顺序进行调整。

对于Android这一类型的操作系统，可以在页面初始化状态下，调用上述第一接口，将上述第一接口输出的第一属性参数作为上述第二尺寸参数。示例性的，以目标对象为键盘为例，为了得到该键盘的高度，该第二尺寸参数可以为高度参数，可以在页面初始化时调用window.innerHeight以得到上述第二尺寸参数。

对于iOS类型的操作系统，可以基于上述页面组件，获取目标文档对象，上述目标文档对象对应于上述页面的根元素；调用上述页面组件的第三接口，将上述第三接口输出的第三属性参数作为上述第二尺寸参数，上述第三属性参数表征上述目标文档对象的尺寸参数。具体地，当页面被载入时，可以生成目标文档对象(document)，通过document.documentElement可以得到该根节点，这一根节点的尺寸表征该目标文档对象的尺寸。示例性的，以目标对象为键盘为例，为了得到该键盘的高度，该第二尺寸参数可以为高度参数，可以通过调用document.documentElement.clientHeight得到上述第二尺寸参数。

本公开实施例对于Android类型的操作系统和iOS类型的操作系统的环境，都可以在不依赖原生应用的情况下确定出目标对象在页面中的显示参数，使得显示参数的确定不再依赖于原生应用，便于向各种操作系统的各种原生应用兼容，优化页面显示效果。

本公开实施例中第一尺寸参数和第二尺寸参数均是相同维度的参数，比如，上述第一尺寸参数和上述第二尺寸参数均为高度参数，或，上述第一尺寸参数和上述第二尺寸参数均为宽度参数。具体地，可以根据目标对象显示参数的获取需求确定上述第一尺寸参数和第二尺寸参数的类型。以目标对象为键盘为例，键盘的宽度通常都与屏幕相同，故只需要确定键盘高度，故第一尺寸参数和第二尺寸参数均为高度参数。在一些场景中，目标对象可以为操作系统的菜单，菜单的高度和宽度都可能需要被确定，当需要确定高度时，第一尺寸参数和第二尺寸参数均为高度参数，当需要确定宽度时，第一尺寸参数和第二尺寸参数均为宽度参数。本公开实施例可以对于目标对象所需的多种类型的显示参数进行确定，从而进一步优化页面布局，提升页面显示效果。

在步骤S30中，根据上述第一尺寸参数和上述第二尺寸参数，确定上述目标对象在上述页面中的显示参数。

在一个实施例中，可以根据上述第二尺寸参数和上述第一尺寸参数之间的差异，确定上述显示参数。具体来说，可以将上述第二尺寸参数和上述第一尺寸参数相减，将差值确定为上述目标对象在上述页面中的显示参数。本公开实施例中通过将上述第二尺寸参数和上述第一尺寸参数相减，得到可视区域变化量，这一变化量与目标对象的尺寸相匹配，从而计算出目标对象在页面中的显示参数，这一计算过程不再依赖于原生应用提供的接口，从而可以被更好地可以推广使用并且具备较强兼容性。

请参考图4，其是根据一示例性实施例示出的Android操作系统环境下确定目标对象尺寸的方法示意图。在页面初始化时记录布局视口的原始高度后即可监听布局视口的尺寸变化事件，当用户需要进行输入的时候，键盘被弹起，触发了布局视口尺寸的变化，捕捉到布局视口尺寸的变化可以通过回调的方式触发本方法的执行，通过获取布局视口尺寸变化后的高度，根据该高度与上述原始高度的差值即可确定键盘高度。

本公开实施例中上述第一尺寸参数和上述第二尺寸参数均基于页面组件得到，页面组件是电子设备的应用程序所内置的用于展示页面的组件，这一组件遵循页面展示标准，并不属于原生应用提供的接口，这就使得本公开中页面可以在不依赖于原生应用提供的接口的情况下得到目标对象在页面上进行显示时的显示参数，从而使得该页面显示时可以基于得到的上述显示参数适应性调整页面布局的显示效果而不受限于操作系统或原生应用。

为了验证本公开实施例的效果，对该实施例在不同操作系统不同输入法情况下弹出键盘的显示高度的获取情况进行测试，并且对基于原生应用接口在不同操作系统不同输入法情况下弹出键盘的显示高度的获取情况进行对比测试，详情请参看表1：

表1

本公开实施例基于页面组件提供的接口获取第一尺寸参数和第二尺寸参数，从而直接可以计算得到显示参数，这一过程并不需要与原生应用接口进行通信，与原生应用接口进行通信需要消耗一定的时间，本公开实施例提供的方案不存在这一时间消耗，因此，相较于基于原生应用接口获取显示参数的方案具备更低的时延，而表1中的数据也充分说明了本公开实施例提供的方案的时间优越性，相较于基于原生应用接口显示目标对象的方案，本申请实施例具备更高的反应速度。

在一个实施例中，在确定上述目标对象在上述页面中的显示参数之后，还可以根据上述显示参数，确定目标显示区域，上述目标显示区域为上述页面中未被上述目标对象遮挡的区域；在上述目标显示区域中显示除上述目标对象之外的其他页面元素。本公开实施例中可以通过上述方式调整页面布局，使得页面中的相关元素的位置可以随着目标对象的显示而自适应的被调整，从而可以使得页面中需要被显示的元素被合理分布在该可视区域中。

一个实施例中，请参考图5，其是根据一示例性实施例示出的在目标显示区域中显示除目标对象之外的其他页面元素的方法示意图。上述方法包括：

S51.根据上述显示参数，确定第一目标页面元素，其中，上述显示参数被确定前的上述第一目标页面元素与上述目标对象的显示区域至少部分重叠。

S52.将上述第一目标页面元素显示在上述目标显示区域上。

当目标对象被显示在页面上时可能会遮挡住页面中的一些页面元素，例如第一目标页面元素，本公开实施例中可以根据目标对象在上述页面中的显示参数确定第一目标页面元素，将这些第一目标页面元素的全部或部分另行显示在页面的可视区域中，从而避免由于显示目标对象造成的页面遮挡导致的显示信息的损失。

一个实施例中，请参考图6，其是根据一示例性实施例示出的在目标显示区域中显示除目标对象之外的其他页面元素的方法示意图。上述方法包括：

S61.确定第二目标页面元素与上述目标对象的预设位置关系。

本公开实施例并不对预设位置关系和第二目标页面元素进行限制，可以根据页面设计需求确定，其中第二目标页面元素可以被理解为与目标对象存在预设位置关系的页面元素。示例性的，若页面设计要求在键盘弹出时，在键盘顶部贴合显示一个菜单栏，则该菜单栏和键盘之间的预设位置关系就是该菜单栏显示在键盘顶部位置，该菜单栏就是第二目标页面元素。

S62.根据上述显示参数和上述预设位置关系，在上述目标显示区域中确定目标显示位置。

沿用上述示例，根据键盘的显示参数(高度)即可确定上述菜单栏的显示位置，该显示位置即上述目标显示位置。

S63.在上述目标显示位置渲染上述第二目标页面元素。

沿用上述示例，该菜单栏可以显示各种内容，请参考图7，其是根据一示例性实施例示出的菜单栏显示效果示意图。该示意图中菜单栏贴合键盘顶部显示，该菜单栏中包括多个控件，每个控件可以在用户的触发下可以将当前页面跳转至对应的应用程序。请参考图8其是根据一示例性实施例示出的另一菜单栏显示效果示意图。该示意图中菜单栏贴合键盘顶部显示，该菜单栏中包括多个控件，每个控件可以执行一些用户当前可能需要的操作。本公开实施例根据目标对象在页面的显示参数进行相关页面元素的适应性显示，可以取得较好的页面显示效果。

本公开可以在各种操作系统中完成上述贴合显示，示例性的，可以在各种操作系统中贴合键盘顶部显示工具栏。请参考图9，其是根据一示例性实施例示出的不同操作系统中工具栏显示效果示意图。图9示出在Android操作系统和iOS操作系统中的工具栏显示效果，键盘在这两个操作系统支持下显示参数不同，但是工具栏都可以恰好贴合在键盘顶部，可见本公开实施例的方案可以跨系统实施，具备较好兼容性。

图10是根据一示例性实施例示出的一种显示参数确定装置框图。参照图10，该装置包括：

第一尺寸参数获取模块10，被配置为执行在目标对象被显示在页面的情况下，获取上述页面的页面组件输出的第一尺寸参数，上述第一尺寸参数为上述页面的可视区域的尺寸参数；

第二尺寸参数获取模块20，被配置为执行获取上述页面的页面组件输出的第二尺寸参数，上述第二尺寸参数为在上述页面未显示上述目标对象的情况下，上述可视区域的尺寸参数；

显示参数确定模块30，被配置为执行根据上述第一尺寸参数和上述第二尺寸参数，确定上述目标对象在上述页面中的显示参数。

在一些可能的实施例中，上述装置还包括对象获取模块，上述对象获取模块被配置为执行获取浏览器窗口对象；

上述第一尺寸参数获取模块，被配置为执行在上述目标对象被显示在上述页面的情况下，调用上述页面组件的第一接口，将上述第一接口输出的第一属性参数作为上述第一尺寸参数，其中，上述第一属性参数表征上述浏览器窗口对象的尺寸参数；

上述第二尺寸参数获取模块，被配置为执行在页面初始化状态下，调用上述第一接口，将上述第一接口输出的第一属性参数作为上述第二尺寸参数。

在一些可能的实施例中，上述装置还包括第一监听模块，上述第一监听模块被配置为执行：

监听上述浏览器窗口对象发出的第一尺寸变化事件，

在监听到上述第一尺寸变化事件的情况下，执行上述获取上述页面的页面组件输出的第一尺寸参数的操作。

在一些可能的实施例中，上述第一尺寸参数获取模块，被配置为执行基于上述页面组件，获取上述页面对应的视觉视口对象；在上述目标对象被显示在上述页面的情况下，调用上述页面组件的第二接口，将上述第二接口输出的第二属性参数作为上述第一尺寸参数，其中，上述第二属性参数表征上述视觉视口对象的尺寸参数；

上述第二尺寸参数获取模块，被配置为执行基于上述页面组件，获取目标文档对象，上述目标文档对象对应于上述页面的根元素；调用上述页面组件的第三接口，将上述第三接口输出的第三属性参数作为上述第二尺寸参数，上述第三属性参数表征上述目标文档对象的尺寸参数。

在一些可能的实施例中，上述装置还包括第二监听模块，上述第二监听模块被配置为执行：

监听上述视觉视口对象发出的第二尺寸变化事件，

在监听到上述第二尺寸变化事件的情况下，执行上述获取上述页面的页面组件输出的第一尺寸参数的操作。

在一些可能的实施例中，上述显示参数确定模块，被配置为执行：

根据上述第二尺寸参数和上述第一尺寸参数之间的差异，确定上述显示参数。

在一些可能的实施例中，上述第一尺寸参数和上述第二尺寸参数均为高度参数，或，上述第一尺寸参数和上述第二尺寸参数均为宽度参数。

在一些可能的实施例中，上述装置还包括：

页面调整模块，被配置为执行根据上述显示参数，确定目标显示区域，上述目标显示区域为上述页面中未被上述目标对象遮挡的区域；以及，在上述目标显示区域中显示除上述目标对象之外的其他页面元素。

在一些可能的实施例中，上述页面调整模块，被配置为执行：

根据上述显示参数，确定第一目标页面元素，其中，上述显示参数被确定前的上述第一目标页面元素与上述目标对象的显示区域至少部分重叠；

将上述第一目标页面元素显示在上述目标显示区域上。

在一些可能的实施例中，上述页面调整模块，被配置为执行：

确定第二目标页面元素与上述目标对象的预设位置关系；

根据上述显示参数和上述预设位置关系，在上述目标显示区域中确定目标显示位置；

在上述目标显示位置渲染上述第二目标页面元素。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图11是根据一示例性实施例示出的一种用于显示参数确定的电子设备600的框图。

该电子设备可以是服务器，还可以是终端设备，其内部结构图可以如图11所示。该电子设备包括通过系统总线连接的处理器、存储器和网络接口。其中，该电子设备的处理器用于提供计算和控制能力。该电子设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该电子设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种显示参数确定方法。

本领域技术人员可以理解，图11中示出的结构，仅仅是与本公开方案相关的部分结构的框图，并不构成对本公开方案所应用于其上的电子设备的限定，具体的电子设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在示例性实施例中，还提供了一种电子设备，包括：处理器；用于存储该处理器可执行指令的存储器；其中，该处理器被配置为执行该指令，以实现如本公开实施例中的显示参数确定方法。

在示例性实施例中，还提供了一种计算机可读存储介质，当该计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行本公开实施例中的显示参数确定方法。

在示例性实施例中，还提供了一种计算机程序产品，计算机程序产品包括计算机程序，计算机程序存储在可读存储介质中，计算机设备的至少一个处理器从可读存储介质读取并执行计算机程序，使得计算机设备执行本公开实施例的显示参数确定方法。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (23)

1.一种显示参数确定方法，其特征在于，包括：

在目标对象被显示在页面的情况下，获取所述页面的页面组件输出的第一尺寸参数，所述第一尺寸参数为所述页面的可视区域的尺寸参数，所述第一尺寸参数为浏览器窗口对象的尺寸参数或视觉视口对象的尺寸参数；

获取所述页面的页面组件输出的第二尺寸参数，所述第二尺寸参数为在所述页面未显示所述目标对象的情况下，所述可视区域的尺寸参数，所述第二尺寸参数为浏览器窗口对象的尺寸参数或目标文档对象的尺寸参数；

根据所述第一尺寸参数和所述第二尺寸参数，确定所述目标对象在所述页面中的显示参数。

2.根据权利要求1所述的显示参数确定方法，其特征在于，所述方法还包括：

获取浏览器窗口对象；

所述获取所述页面的页面组件输出的第一尺寸参数，包括：在所述目标对象被显示在所述页面的情况下，调用所述页面组件的第一接口，将所述第一接口输出的第一属性参数作为所述第一尺寸参数，其中，所述第一属性参数表征所述浏览器窗口对象的尺寸参数；

所述获取所述页面的页面组件输出的第二尺寸参数，包括：在页面初始化状态下，调用所述第一接口，将所述第一接口输出的第一属性参数作为所述第二尺寸参数。

3.根据权利要求2所述的显示参数确定方法，其特征在于，所述方法还包括：

监听所述浏览器窗口对象发出的第一尺寸变化事件，

在监听到所述第一尺寸变化事件的情况下，执行所述获取所述页面的页面组件输出的第一尺寸参数的操作。

4.根据权利要求1所述的显示参数确定方法，其特征在于：

所述获取所述页面的页面组件输出的第一尺寸参数，包括：基于所述页面组件，获取所述页面对应的视觉视口对象；在所述目标对象被显示在所述页面的情况下，调用所述页面组件的第二接口，将所述第二接口输出的第二属性参数作为所述第一尺寸参数，其中，所述第二属性参数表征所述视觉视口对象的尺寸参数；

所述获取所述页面的页面组件输出的第二尺寸参数，包括：基于所述页面组件，获取目标文档对象，所述目标文档对象对应于所述页面的根元素；调用所述页面组件的第三接口，将所述第三接口输出的第三属性参数作为所述第二尺寸参数，所述第三属性参数表征所述目标文档对象的尺寸参数。

5.根据权利要求4所述的显示参数确定方法，其特征在于，所述方法还包括：

监听所述视觉视口对象发出的第二尺寸变化事件，

在监听到所述第二尺寸变化事件的情况下，执行所述获取所述页面的页面组件输出的第一尺寸参数的操作。

6.根据权利要求1至5中任意一项所述的显示参数确定方法，其特征在于，所述根据所述第一尺寸参数和所述第二尺寸参数，确定所述目标对象在所述页面中的显示参数，包括：

根据所述第二尺寸参数和所述第一尺寸参数之间的差异，确定所述显示参数。

7.根据权利要求6所述的显示参数确定方法，其特征在于，所述第一尺寸参数和所述第二尺寸参数为高度参数，或，所述第一尺寸参数和所述第二尺寸参数为宽度参数。

8.根据权利要求1至5中任意一项所述的显示参数确定方法，其特征在于，所述方法还包括：

根据所述显示参数，确定目标显示区域，所述目标显示区域为所述页面中未被所述目标对象遮挡的区域；

在所述目标显示区域中显示除所述目标对象之外的其他页面元素。

9.根据权利要求8所述的显示参数确定方法，其特征在于，所述在所述目标显示区域中显示除所述目标对象之外的其他页面元素，包括：

根据所述显示参数，确定第一目标页面元素，其中，所述显示参数被确定前的所述第一目标页面元素与所述目标对象的显示区域至少部分重叠；

将所述第一目标页面元素显示在所述目标显示区域上。

10.根据权利要求8所述的显示参数确定方法，其特征在于，所述在所述目标显示区域中显示除所述目标对象之外的其他的页面元素，包括：

确定第二目标页面元素与所述目标对象的预设位置关系；

根据所述显示参数和所述预设位置关系，在所述目标显示区域中确定目标显示位置；

在所述目标显示位置渲染所述第二目标页面元素。

11.一种显示参数确定装置，其特征在于，包括：

第一尺寸参数获取模块，被配置为执行在目标对象被显示在页面的情况下，获取所述页面的页面组件输出的第一尺寸参数，所述第一尺寸参数为所述页面的可视区域的尺寸参数，所述第一尺寸参数为浏览器窗口对象的尺寸参数或视觉视口对象的尺寸参数；

第二尺寸参数获取模块，被配置为执行获取所述页面的页面组件输出的第二尺寸参数，所述第二尺寸参数为在所述页面未显示所述目标对象的情况下，所述可视区域的尺寸参数，所述第二尺寸参数为浏览器窗口对象的尺寸参数或目标文档对象的尺寸参数；

显示参数确定模块，被配置为执行根据所述第一尺寸参数和所述第二尺寸参数，确定所述目标对象在所述页面中的显示参数。

12.根据权利要求11所述的显示参数确定装置，其特征在于，所述装置还包括对象获取模块，所述对象获取模块被配置为执行获取浏览器窗口对象；

所述第一尺寸参数获取模块，被配置为执行在所述目标对象被显示在所述页面的情况下，调用所述页面组件的第一接口，将所述第一接口输出的第一属性参数作为所述第一尺寸参数，其中，所述第一属性参数表征所述浏览器窗口对象的尺寸参数；

所述第二尺寸参数获取模块，被配置为执行在页面初始化状态下，调用所述第一接口，将所述第一接口输出的第一属性参数作为所述第二尺寸参数。

13.根据权利要求12所述的显示参数确定装置，其特征在于，所述装置还包括第一监听模块，所述第一监听模块被配置为执行：

监听所述浏览器窗口对象发出的第一尺寸变化事件，

在监听到所述第一尺寸变化事件的情况下，执行所述获取所述页面的页面组件输出的第一尺寸参数的操作。

14.根据权利要求11所述的显示参数确定装置，其特征在于，

所述第一尺寸参数获取模块，被配置为执行基于所述页面组件，获取所述页面对应的视觉视口对象；在所述目标对象被显示在所述页面的情况下，调用所述页面组件的第二接口，将所述第二接口输出的第二属性参数作为所述第一尺寸参数，其中，所述第二属性参数表征所述视觉视口对象的尺寸参数；

所述第二尺寸参数获取模块，被配置为执行基于所述页面组件，获取目标文档对象，所述目标文档对象对应于所述页面的根元素；调用所述页面组件的第三接口，将所述第三接口输出的第三属性参数作为所述第二尺寸参数，所述第三属性参数表征所述目标文档对象的尺寸参数。

15.根据权利要求14所述的显示参数确定装置，其特征在于，所述装置还包括第二监听模块，所述第二监听模块被配置为执行：

监听所述视觉视口对象发出的第二尺寸变化事件，

在监听到所述第二尺寸变化事件的情况下，执行所述获取所述页面的页面组件输出的第一尺寸参数的操作。

16.根据权利要求11至15中任意一项所述的显示参数确定装置，其特征在于，所述显示参数确定模块，被配置为执行：

根据所述第二尺寸参数和所述第一尺寸参数之间的差异，确定所述显示参数。

17.根据权利要求16所述的显示参数确定装置，其特征在于，所述第一尺寸参数和所述第二尺寸参数均为高度参数，或，所述第一尺寸参数和所述第二尺寸参数均为宽度参数。

18.根据权利要求11至15中任意一项所述的显示参数确定装置，其特征在于，所述装置还包括：

页面调整模块，被配置为执行根据所述显示参数，确定目标显示区域，所述目标显示区域为所述页面中未被所述目标对象遮挡的区域；以及，在所述目标显示区域中显示除所述目标对象之外的其他页面元素。

19.根据权利要求18所述的显示参数确定装置，其特征在于，所述页面调整模块，被配置为执行：

根据所述显示参数，确定第一目标页面元素，其中，所述显示参数被确定前的所述第一目标页面元素与所述目标对象的显示区域至少部分重叠；

将所述第一目标页面元素显示在所述目标显示区域上。

20.根据权利要求18所述的显示参数确定装置，其特征在于，所述页面调整模块，被配置为执行：

确定第二目标页面元素与所述目标对象的预设位置关系；

根据所述显示参数和所述预设位置关系，在所述目标显示区域中确定目标显示位置；

在所述目标显示位置渲染所述第二目标页面元素。

21.一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至10中任一项所述的显示参数确定方法。

22.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如权利要求1至10中任一项所述的显示参数确定方法。

23.一种计算机程序产品，其特征在于，所述计算机程序产品包括计算机程序，所述计算机程序存储在可读存储介质中，计算机设备的至少一个处理器从所述可读存储介质读取并执行所述计算机程序，使得所述计算机设备执行如权利要求1至10中任一项所述的显示参数确定方法。