[发明专利]页面适配方法、装置、设备和存储介质

说明书

本申请涉及一种页面适配方法、装置、设备和存储介质。所述方法包括：获取页面设计文件，获取用户设备的设备像素比和屏幕分辨率，根据设备像素比确定用户设备的页面缩放比值，根据屏幕分辨率确定用户设备的页面布局基准值，按照页面缩放比值和页面布局基准值，生成页面设计文件在用户设备上对应的适配页面。采用本方法能够依据用户设备屏幕的相关参数对用户设备进行页面适配，能够灵活地适用于不同类型的终端屏幕。

技术领域

本申请涉及计算机技术领域，特别是涉及一种页面适配方法、装置、设备和存储介质。

背景技术

近年来，手机、平板电脑等移动终端发展迅猛，用户在使用移动终端时，除了考虑移动终端的硬件配置和功能之外，对移动终端的外观设计和屏幕显示效果也越来越注重。由于移动终端屏幕的尺寸和分辨率多样化，开发出一套可以适用于不同屏幕尺寸、不同屏幕分辨率的页面是一项极具挑战性的任务。

通常可以采用百分比布局方案进行屏幕适配，按照屏幕尺寸设计对应的百分比缩放页面和页面元素。也可以采用媒体查询在不同屏幕分辨率下加载不同的页面布局样式。然而，百分比布局方案的页面显示效果不佳。不同分辨率的屏幕下加载不同的页面布局样式的方案，无法覆盖所有类型的终端屏幕。

发明内容

基于此，有必要针对上述技术问题，提供一种能够适配于不同类型终端屏幕的的页面适配方法、装置、设备和存储介质。

一种页面适配方法，所述方法包括：

获取页面设计文件，获取用户设备的设备像素比和屏幕分辨率；

根据所述设备像素比确定所述用户设备的页面缩放比值；

根据所述屏幕分辨率确定所述用户设备的页面布局基准值；

按照所述页面缩放比值和所述页面布局基准值，生成所述页面设计文件在所述用户设备上对应的适配页面。

在其中一个实施例中，所述获取用户设备的设备像素比和屏幕分辨率的步骤，包括：

获取所述用户设备的设备独立像素和设备像素比；

依据所述设备独立像素和所述设备像素比，计算所述屏幕分辨率。

在其中一个实施例中，所述根据所述设备像素比确定所述用户设备的页面缩放比值的步骤，包括：

根据所述设备像素比的反比例函数值确定所述页面缩放比值。

在其中一个实施例中，所述生成所述页面设计文件在所述用户设备上对应的适配页面的步骤，包括：

将所述适配页面的元数据meta标签中的缩放比值配置为所述页面缩放比值，并将所述meta标签中的布局宽度配置为所述用户设备的屏幕宽度。

在其中一个实施例中，所述生成所述页面设计文件在所述用户设备上对应的适配页面的步骤，包括：

当所述页面设计文件上页面元素的类型为图像类型时，查询在所述设备像素比下所述页面元素对应的尺寸要求；

从预设的图像库中获取图像尺寸满足所述尺寸要求的所述页面元素，并将满足所述尺寸要求的所述页面元素加载至所述适配页面。

在其中一个实施例中，所述生成所述页面设计文件在所述用户设备上对应的适配页面的步骤，包括：

当所述页面设计文件上页面元素的类型为文字类型时，查询所述页面元素的字体大小在所述设备像素比下对应的网页字体大小，按照所述网页字体大小调整所述页面元素在所述适配页面上的字体大小。

在其中一个实施例中，所述生成所述页面设计文件在所述用户设备上对应的适配页面的步骤，包括：