自适应可视区域的显示方法、装置、系统及介质与流程

本公开涉及显示，特别是涉及一种自适应可视区域的显示方法、装置、系统及介质。

背景技术：

1、随着显示技术的发展，出现了多种类型的显示设备，如手机、电脑、4k大屏等，其中，需要在这些不同的显示设备上显示页面数据，如打开手机的浏览器，需要在浏览器的窗口中显示页面数据，又例如，利用4k大屏显示页面数据时，便需要位于大屏的浏览器窗口中显示页面数据。

技术实现思路

1、基于背景技术的内容，本公开提出了一种自适应可视区域的显示方法、装置、系统及介质。

2、本公开第一方面，提供一种自适应可视区域的显示方法，所述方法包括：

3、响应于对页面数据的显示触发，基于显示所述页面数据的显示窗口，对所述页面数据所包括的元素的尺寸进行调整；

4、将调整后的页面数据显示到所述显示窗口中；

5、其中，所述页面数据中的全部元素均位于所述显示窗口的可视区域中。

6、可选地，所述将调整后的页面数据显示到所述显示窗口之后，所述方法还包括：

7、响应于所述显示窗口的尺寸变化，对所述页面数据中所包括的元素的尺寸进行适应性调整；

8、将适应性调整后的页面数据显示到变化后的显示窗口中，其中，所述页面数据中的全部元素均位于所述变化后的显示窗口的可视区域中。

9、可选地，所述响应于所述显示窗口的尺寸变化，对所述页面数据中所包括的元素的尺寸进行适应性调整，包括以下至少一者：

10、响应于对所述显示窗口执行的尺寸调整操作，获取所述尺寸调整后的显示窗口的尺寸参数，并基于所述尺寸参数对所述页面数据中所包括的元素的尺寸进行适应性调整；

11、响应于所述显示窗口所在的显示设备的分辨率变化，获取变化后的目标分辨率，并基于所述目标分辨率对所述页面数据中所包括的元素的尺寸进行适应性调整。

12、可选地，响应于所述显示窗口所在的显示设备的分辨率变化，获取变化后的目标分辨率，包括：

13、响应于将所述显示窗口从第一显示屏移动到第二显示屏的拖拽操作，将所述第二显示屏的分辨率作为所述目标分辨率；

14、和/或，响应于对所述显示窗口所在的显示设备的分辨率的调整操作，将调整操作后的分辨率作为所述目标分辨率；

15、其中，所述第一显示屏的分辨率不同于第二显示屏的分辨率；和/或，所述第一显示屏的尺寸不同于所述第二显示屏的尺寸。

16、可选地，所述基于所述目标分辨率对所述页面数据中所包括的元素的尺寸进行适应性调整，包括：

17、基于所述目标分辨率和所述页面数据的预设分辨率，确定第一调整参数；其中，所述第一调整参数包括在高度方向的缩放比例和在宽度方向的缩放比例；

18、基于所述第一调整参数，对所述页面数据所包括的元素的尺寸进行调整。

19、可选地，所述响应于对所述显示窗口执行的尺寸调整操作，获取所述尺寸调整后的显示窗口的尺寸参数，并基于所述尺寸参数对所述页面数据中所包括的元素的尺寸进行适应性调整，包括：

20、确定所述尺寸调整操作前所述显示窗口的可视区域的第一尺寸，以及所述尺寸调整操作后的显示窗口的第二尺寸；

21、基于所述第一尺寸和所述第二尺寸，确定所述尺寸参数；

22、基于所述尺寸参数，对所述调整后页面数据中所包括的元素的尺寸进行适应性调整。

23、可选地，所述获取所述尺寸调整后的显示窗口的尺寸参数，并基于所述尺寸参数对所述页面数据中所包括的元素的尺寸进行适应性调整，包括：

24、获取所述尺寸调整操作后所述显示窗口的可视区域的第一尺寸，以及所述显示窗口所在显示设备的当前分辨率；

25、基于所述当前分辨率以及所述页面数据的预设分辨率，确定初步比例；

26、基于所述初步比例和所述第一尺寸，对所述页面数据中所包括的元素的尺寸进行适应性调整。

27、可选地，所述页面数据中的同一元素在变化前的显示窗口中的尺寸，与在变化后的显示窗口中的尺寸之间具有第一比例；

28、所述第一显示窗口的可视区域与所述第二显示窗口的可视区域之间具有第二比例；

29、其中，所述第一比例与所述第二比例呈线性相关。

30、可选地，所述适应性调整，包括：对所述元素在第一方向上的尺寸的调整；和/或，对所述元素在第二方向上的尺寸的调整；其中，所述第一方向为所述显示窗口的高度方向或宽度方向，所述第一方向垂直于所述第二方向。

31、可选地，所述响应于对页面数据的显示触发，基于显示窗口的可视区域的尺寸，对所述页面数据所包括的元素的尺寸进行调整，包括：

32、响应于对页面数据的显示触发，获取所述显示窗口所在的显示设备的当前分辨率；

33、基于所述当前分辨率和所述页面数据的预设分辨率，对所述页面数据所包括的元素的尺寸进行调整。

34、可选地，所述基于所述当前分辨率和所述页面数据的预设分辨率，对所述页面数据所包括的元素的尺寸进行调整，包括：

35、基于所述预设分辨率，确定所述页面数据的第一尺寸比例；

36、基于所述当前分辨率，确定所述显示窗口的第二尺寸比例；

37、基于所述第一尺寸比例和所述第二尺寸比例，确定第二调整参数；其中，所述第二调整参数包括在高度方向的缩放比例和在宽度方向的缩放比例；

38、基于所述第二调整参数，对所述页面数据中所包括的元素的尺寸进行调整。

39、可选地，所述显示窗口包括多个子显示区域，不同的子显示区域位于不同的显示设备中；所述基于待显示所述页面数据的显示窗口，对所述页面数据所包括的元素的尺寸进行调整，包括：

40、响应于对所述页面数据的显示触发，基于多个所述显示设备各自对应的屏幕分辨率，确定所述显示窗口的窗口分辨率；

41、基于所述窗口分辨率和所述页面数据的预设分辨率，对所述页面数据中的元素的尺寸进行调整。

42、可选地，对所述页面数据中所包括的元素的尺寸进行调整，包括：对所述页面数据中所包括的每个元素进行缩放。

43、可选地，所述基于所述第二调整参数，对所述页面数据中所包括的元素的尺寸进行调整，包括：

44、将所述第二调整参数映射到缩放函数scale方法中，作为scale方法中的缩放参数；

45、基于所述scale方法中的缩放参数，调用transform方法对所述页面数据中所包括的元素的尺寸进行调整。

46、本公开还提供了一种自适应可视区域的显示系统，包括；

47、内容提供端，用于提供页面数据；

48、显示模块，用于基于所述页面数据，执行所述的显示方法。

49、可选地，所述显示模块包括响应单元和视图单元；其中：

50、所述响应单元，用于基于显示窗口所在的显示设备的当前分辨率和所述页面数据的预设分辨率，确定对所述页面数据中的元素进行调整的第二调整参数；

51、所述视图单元，用于基于所述响应单元传输的所述第二调整参数，对所述页面数据所包括的元素的尺寸进行调整。

52、可选地，显示系统还包括：

53、监听单元，用于监听所述显示窗口的变化，并在监听所述显示窗口发生变化时，触发所述显示模块执行适应性调整操作；

54、其中，所述适应性调整操作包括：对所述页面数据中所包括的元素的尺寸进行适应性调整，并将适应性调整后的页面数据显示到变化后的显示窗口中。

55、可选地，所述显示模块，还用于在执行所述适应性调整操作后，指示所述监听单元再次监听所述显示窗口的变化，并在监听到所述显示窗口发生变化时，触发所述显示模块执行适应性调整操作；

56、或者，

57、在所述监听单元触发所述显示模块执行所述适应性调整操作后的预设时长，再次监听所述显示窗口的变化，并在监听所述显示窗口发生变化时，触发所述显示模块执行适应性调整操作

58、本公开实施例提出的显示方法，由于需要在显示窗口中显示页面数据时，根据显示窗口，对页面数据所包括的元素的尺寸进行了调整，这样，对于不同的显示设备，都可以依据显示设备上的显示窗口，对页面数据中的元素的尺寸进行调整，使得其页面视图的尺寸适配显示窗口，从而使得调整后的页面数据的全部元素都位于显示窗口的可视区域中；因页面数据的全部元素都位于显示窗口的可视区域中，这样，用户可以在显示窗口的可视区域中看到页面数据的全部内容，无需拖动滚动条进行浏览，如此，简化了用户的操作，进一步提高用户对网页的浏览体验。

59、本公开实施例，还公开了一种电子设备，包括：包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行时实现如所述的自适应可视区域的显示方法。

60、本公开实施例，还公开了一种计算机可读存储介质，其存储的计算机程序使得处理器执行如本公开所述的自适应可视区域的显示方法。