页面显示方法、装置、存储介质及电子设备与流程

本公开总体上涉及计算机，更具体地涉及一种页面显示方法、装置、计算机程序产品、非暂时性计算机可读存储介质及电子设备。

背景技术：

1、本部分旨在介绍本领域的一些方面，其可以与下面描述的和/或要求保护的本公开的各个方面相关。相信本部分有助于提供背景信息以便于更好地理解本公开的各个方面。因此，应该理解的是这些陈述应该从这个角度来理解，而不是作为对现有技术的承认。

2、现如今，市面上手机或其他移动端设备屏幕尺寸多样化，以往通过px(pixel，像素)绝对值设置元素宽高和布局结构的方式，无法满足不同终端设备屏幕尺寸正常展示的要求，会出现页面显示太小或太大等问题。

3、针对上述问题，已知以下两种解决方案：一种是采用流式布局，使用百分比单位来定义元素宽度，实现页面的自适应布局；另一种是采用响应式布局，针对不同尺寸的屏幕设计不同的css(cascading style sheets，层叠样式表)样式表，并在显示时进行查询。上述解决方案均存在不足，对于流式布局，一方面在开发阶段页面元素宽高尺寸计算繁复，开发效率低，另一方面在百分比存在小数点的情况下，像素点显示模糊；对于响应式布局，一方面页面尺寸无法全面覆盖，另一方面多套css代码的开发和维护成本高。

4、因此，有必要提出一种新的技术方案，以减轻或者解决上述至少一个技术问题。

技术实现思路

1、本公开的目的在于提供一种页面显示方法、装置、计算机程序产品、非暂时性计算机可读存储介质及电子设备，以实现不同终端设备尺寸下的页面显示，降低开发维护成本，并且提高页面显示的清晰度。

2、根据本公开的第一方面，提供了一种页面显示方法，包括：根据所述目标页面的设计稿的像素高度和像素宽度以及目标屏幕的像素高度和像素宽度，确定缩放系数；根据预设的转换系数和所述缩放系数确定所述目标页面在所述目标屏幕上显示的根结点字体尺寸，其中，所述转换系数用于将目标页面的设计稿包含元素的像素尺寸转换为相对尺寸；根据所述目标页面的设计稿包含元素的相对尺寸和所述目标页面在所述目标屏幕上显示的根结点字体尺寸，确定目标页面的设计稿包含元素在目标屏幕上显示的目标尺寸。

3、根据本公开的第二方面，提供了一种页面显示装置，包括：缩放系数确定模块，用于根据所述目标页面的设计稿的像素高度和像素宽度以及目标屏幕的像素高度和像素宽度，确定缩放系数；字体尺寸确定模块，用于根据预设的转换系数和所述缩放系数确定所述目标页面在所述目标屏幕上显示的根结点字体尺寸，其中，所述转换系数用于将目标页面的设计稿包含元素的像素尺寸转换为相对尺寸；目标尺寸确定模块，用于根据所述目标页面的设计稿包含元素的相对尺寸和所述目标页面在所述目标屏幕上显示的根结点字体尺寸，确定目标页面的设计稿包含元素在目标屏幕上显示的目标尺寸。

4、根据本公开的第三方面，提供了一种计算机程序产品，包括程序代码指令，当所述程序产品由计算机执行时，所述程序代码指令使所述计算机执行根据本公开的第一方面所述的方法。

5、根据本公开的第四方面，提供了一种存储有计算机指令的非暂时性计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据本公开的第一方面所述的方法。

6、根据本公开的第五方面，提供了一种电子设备，包括：处理器，与所述处理器进行电子通信的存储器；以及指令，所述指令存储在所述存储器中并且可由所述处理器执行以使所述电子设备执行根据本公开的第一方面所述的方法。

7、在本公开的实施例中，通过根结点字体尺寸将目标页面的设计稿与目标屏幕的显示尺寸建立联系，并且根结点字体尺寸包含了设计稿与目标屏幕之间的缩放系数，能够根据不同的设备尺寸自适应地显示页面，开发维护成本低，并且显示效果清晰。

8、应当理解，本部分所描述的内容并不旨在标识所要求保护的
技术实现要素：
的关键或必要特征，也不旨在单独地用于确定所要求保护的发明内容的范围。

技术特征：

1.一种页面显示方法，包括：

2.根据权利要求1所述的方法，其中，在所述根据所述目标页面的设计稿包含元素的相对尺寸和所述目标页面在所述目标屏幕上显示的根结点字体尺寸，确定目标页面的设计稿包含元素在目标屏幕上显示的目标尺寸之前，所述方法还包括：

3.根据权利要求1所述的方法，其中，所述转换系数大于第一预设阈值，使得所述根结点字体尺寸不小于所述目标屏幕支持的最小字体尺寸。

4.根据权利要求1所述的方法，其中，所述根据所述目标页面的设计稿的像素高度和像素宽度以及目标屏幕的像素高度和像素宽度，确定缩放系数，包括：

5.根据权利要求4所述的方法，其中，所述根据所述目标页面的设计稿的像素高度和像素宽度以及目标屏幕的像素高度和像素宽度，确定缩放系数，还包括：

6.根据权利要求1所述的方法，其中，所述根据所述目标页面的设计稿包含元素的相对尺寸和所述目标页面在所述目标屏幕上显示的根结点字体尺寸，确定目标页面的设计稿包含元素在目标屏幕上显示的目标尺寸，包括：

7.根据权利要求1-6中任一项所述的方法，其中，所述方法还包括：

8.一种页面显示装置，包括：

9.一种计算机程序产品，包括程序代码指令，当所述程序产品由计算机执行时，所述程序代码指令使所述计算机执行权利要求1-8中的至少一项所述的方法。

10.一种存储有计算机指令的非暂时性计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-8中的至少一项所述的方法。

11.一种电子设备，包括：

技术总结
本公开提供了一种页面显示方法、装置、计算机程序产品、非暂时性计算机可读存储介质及电子设备。该方法包括：根据目标页面的设计稿的像素高度和像素宽度以及目标屏幕的像素高度和像素宽度，确定缩放系数；根据预设的转换系数和缩放系数确定目标页面在目标屏幕上显示的根结点字体尺寸，其中，转换系数用于将目标页面的设计稿包含元素的像素尺寸转换为相对尺寸；根据目标页面的设计稿包含元素的相对尺寸和目标页面在目标屏幕上显示的根结点字体尺寸，确定目标页面的设计稿包含元素在目标屏幕上显示的目标尺寸。本公开的实施例能够实现不同终端设备尺寸下的页面显示，降低开发维护成本，并且提高页面显示的清晰度。

技术研发人员：龚张
受保护的技术使用者：上海幻电信息科技有限公司
技术研发日：
技术公布日：2024/10/28