界面适配方法、装置、计算机设备和计算机可读存储介质制造方法及图纸

本申请提供一种界面适配方法、装置、计算机设备和计算机可读存储介质，属于计算机技术领域。该方法包括：获取初始界面图像和初始界面图像的图像像素尺寸；根据初始界面的图像像素尺寸以及目标显示设备的设备像素密度，确定初始界面图像在目标显示设备上显示时的设备像素尺寸；根据图像像素尺寸、初始界面图像中各元素的初始像素尺寸以及目标显示设备的屏幕尺寸，确定各元素在目标显示设备上显示时的目标像素尺寸；根据设备像素尺寸和初始界面图像中各字体的初始尺寸，确定各字体的目标尺寸；基于各元素的目标像素尺寸和各字体的目标尺寸，对初始界面图像进行适配，得到并显示适配后的目标界面图像。可以达到提高显示界面的适配性和通用性的效果。适配性和通用性的效果。适配性和通用性的效果。

【技术实现步骤摘要】
界面适配方法、装置、计算机设备和计算机可读存储介质


[0001]本申请涉及计算机
，具体而言，涉及一种界面适配方法、装置、计算机设备和计算机可读存储介质。

技术介绍

[0002]随着计算机技术的发展，越来越多的电子设备进入到了人们的工作生活中，人们可以通过电子设备进行交流或查找资料。
[0003]相关技术中，在电子设备上运行的各种各样的应用程序一般都需要在电子设备的屏幕上显示相应的界面，一般地，可以采用React
‑
Native框架技术对界面的设计图稿进行调整，可以按照电子设备的屏幕尺寸对应的百分比缩放设计图稿和设计图稿中的元素，以将整个设计图稿都显示到电子设备的整个屏幕上。具体的，对设计图稿进行调整时将元素的宽度转换为百分比单位，而元素的高度和文字大小的尺寸是通过像素(Pixels，简称 PX)单位的转换进行调整。
[0004]但是，这种方案对于屏幕尺寸过大或过小的电子设备进行界面适配时就会存在造成显示的界面中的元素或字体出现错位或者展示不全的问题。

技术实现思路

[0005]本申请的目的在于提供一种界面适配方法、装置、计算机设备和计算机可读存储介质，可以达到提高显示界面的适配性和通用性的效果。
[0006]本申请的实施例是这样实现的：
[0007]本申请实施例的第一方面，提供一种界面适配方法，包括：
[0008]获取初始界面图像以及所述初始界面图像的图像像素尺寸，所述图像像素尺寸是指以像素单位作为长度单位表征的所述初始界面图像的尺寸；
[0009]根据所述初始界面的图像像素尺寸以及目标显示设备的设备像素密度，确定所述初始界面图像在所述目标显示设备上显示时的设备像素尺寸，所述设备像素尺寸是指以设备独立像素单位作为长度单位表征的该初始界面图像的尺寸；
[0010]根据所述图像像素尺寸、所述初始界面图像中各元素的初始像素尺寸以及所述目标显示设备的屏幕尺寸，确定各所述元素在所述目标显示设备上显示时的目标像素尺寸；
[0011]根据所述设备像素尺寸和所述初始界面图像中各字体的初始尺寸，确定各所述字体的目标尺寸；
[0012]基于各所述元素的目标像素尺寸和各所述字体的目标尺寸，对所述初始界面图像进行适配，得到并显示适配后的目标界面图像。
[0013]可选地，所述根据所述图像像素尺寸、所述初始界面图像中各元素的初始像素尺寸以及所述目标显示设备的屏幕尺寸，确定各所述元素在所述目标显示设备上显示时的目标像素尺寸，包括：
[0014]计算各所述元素的初始像素宽度和所述图像像素尺寸中的像素宽度的第一比值；
[0015]将所述第一比值和所述目标显示设备的屏幕宽度的第一乘积作为各所述元素的目标像素尺寸中的目标像素宽度；
[0016]计算各所述元素的初始像素高度和所述图像像素尺寸中的像素高度的第二比值；
[0017]计算所述第二比值和所述目标显示设备的屏幕高度的第二乘积，并将所述第二乘积作为各所述元素的目标像素高度；
[0018]根据目标像素宽度和所述目标像素高度确定所述目标像素尺寸。
[0019]可选地，所述根据目标像素宽度和所述目标像素高度确定所述目标像素尺寸，包括：
[0020]对所述第二乘积进行冗余调整，将调整后的第二乘积作为所述元素的新的目标像素高度，并将所述目标像素宽度和所述新的目标像素高度作为所述目标像素尺寸。
[0021]可选地，所述根据所述设备像素尺寸和所述初始界面图像中各字体的初始尺寸，确定各所述字体的目标尺寸，包括：
[0022]根据所述设备像素尺寸和所述目标显示设备的屏幕尺寸计算所述初始界面图像的整体缩放比例；
[0023]根据所述整体缩放比例、所述目标显示设备的像素密度、预设的字体缩放比例以及所述初始界面图像中各字体的初始尺寸，确定各所述字体的目标尺寸。
[0024]可选地，所述根据所述设备像素尺寸和所述目标显示设备的屏幕尺寸计算所述初始界面图像的整体缩放比例，包括：
[0025]计算所述目标显示设备的屏幕宽度与所述设备像素尺寸中的像素宽度的第三比值；
[0026]计算所述目标显示设备的屏幕高度与所述设备像素尺寸中的像素高度的第四比值；
[0027]比较所述第三比值和所述第四比值的大小，并将所述第三比值和所述第四比值中最小的比值作为所述整体缩放比例。
[0028]可选地，所述根据所述整体缩放比例、所述目标显示设备的像素密度以及所述初始界面图像中各字体的初始尺寸，确定各所述字体的目标尺寸，包括：
[0029]计算所述字体的初始高度与所述整体缩放比例的第三乘积；
[0030]计算所述第三乘积与所述预设的字体缩放比例的第五比值；
[0031]计算所述第五比值与所述显示设备的像素密度的第六比值，并将所述第六比值作为所述字体的目标尺寸。
[0032]可选地，所述根据所述初始界面的图像像素尺寸以及目标显示设备的设备像素密度，确定所述初始界面图像在所述目标显示设备上显示时的设备像素尺寸，包括：
[0033]将所述图像像素尺寸中的像素高度与所述设备像素密度的比值作为所述设备像素尺寸中的像素高度；
[0034]将所述图像像素尺寸中的像素宽度与所述设备像素密度的比值作为所述设备像素尺寸中的像素宽度。
[0035]本申请实施例的第二方面，提供了一种界面适配装置，所述界面适配装置包括：
[0036]获取模块，用于获取初始界面图像以及所述初始界面图像的图像像素尺寸，所述图像像素尺寸是指以像素单位作为长度单位表征的所述初始界面图像的尺寸；
[0037]第一确定模块，用于根据所述初始界面的图像像素尺寸以及目标显示设备的设备像素密度，确定所述初始界面图像在所述目标显示设备上显示时的设备像素尺寸，所述设备像素尺寸是指以设备独立像素单位作为长度单位表征的该初始界面图像的尺寸；
[0038]第二确定模块，用于根据所述图像像素尺寸、所述初始界面图像中各元素的初始像素尺寸以及所述目标显示设备的屏幕尺寸，确定各所述元素在所述目标显示设备上显示时的目标像素尺寸；
[0039]第三确定模块，用于根据所述设备像素尺寸和所述初始界面图像中各字体的初始尺寸，确定各所述字体的目标尺寸；
[0040]适配模块，用于基于各所述元素的目标像素尺寸和各所述字体的目标尺寸，对所述初始界面图像进行适配，得到并显示适配后的目标界面图像。
[0041]本申请实施例的第三方面，提供了一种计算机设备，所述计算机设备包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现上述第一方面所述的界面适配方法。
[0042]本申请实施例的第四方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述第一方面所述的界面适配方法。
[0043]本申请实施例的有益效果包括：<本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种界面适配方法，其特征在于，所述方法包括：获取初始界面图像以及所述初始界面图像的图像像素尺寸，所述图像像素尺寸是指以像素单位作为长度单位表征的所述初始界面图像的尺寸；根据所述初始界面的图像像素尺寸以及目标显示设备的设备像素密度，确定所述初始界面图像在所述目标显示设备上显示时的设备像素尺寸，所述设备像素尺寸是指以设备独立像素单位作为长度单位表征的该初始界面图像的尺寸；根据所述图像像素尺寸、所述初始界面图像中各元素的初始像素尺寸以及所述目标显示设备的屏幕尺寸，确定各所述元素在所述目标显示设备上显示时的目标像素尺寸；根据所述设备像素尺寸和所述初始界面图像中各字体的初始尺寸，确定各所述字体的目标尺寸；基于各所述元素的目标像素尺寸和各所述字体的目标尺寸，对所述初始界面图像进行适配，得到并显示适配后的目标界面图像。2.如权利要求1所述的界面适配方法，其特征在于，所述根据所述图像像素尺寸、所述初始界面图像中各元素的初始像素尺寸以及所述目标显示设备的屏幕尺寸，确定各所述元素在所述目标显示设备上显示时的目标像素尺寸，包括：计算各所述元素的初始像素宽度和所述图像像素尺寸中的像素宽度的第一比值；将所述第一比值和所述目标显示设备的屏幕宽度的第一乘积作为各所述元素的目标像素尺寸中的目标像素宽度；计算各所述元素的初始像素高度和所述图像像素尺寸中的像素高度的第二比值；计算所述第二比值和所述目标显示设备的屏幕高度的第二乘积，并将所述第二乘积作为各所述元素的目标像素高度；根据目标像素宽度和所述目标像素高度确定所述目标像素尺寸。3.如权利要求2所述的界面适配方法，其特征在于，所述根据目标像素宽度和所述目标像素高度确定所述目标像素尺寸，包括：对所述第二乘积进行冗余调整，将调整后的第二乘积作为所述元素的新的目标像素高度，并将所述目标像素宽度和所述新的目标像素高度作为所述目标像素尺寸。4.如权利要求1所述的界面适配方法，其特征在于，所述根据所述设备像素尺寸和所述初始界面图像中各字体的初始尺寸，确定各所述字体的目标尺寸，包括：根据所述设备像素尺寸和所述目标显示设备的屏幕尺寸计算所述初始界面图像的整体缩放比例；根据所述整体缩放比例、所述目标显示设备的像素密度、预设的字体缩放比例以及所述初始界面图像中各字体的初始尺寸，确定各所述字体的目标尺寸。5.如权利要求4所述的界面适配方法，其特征在于，所述根据所述设备像素尺寸和所述目标显示设备的屏幕尺寸计算所述初始界面图像的整体缩放比例，包括：计算所述目标显示设备的屏幕宽度与所述设备像素尺寸...

【专利技术属性】
技术研发人员：李文宏，
申请(专利权)人：佛山市星曼信息科技有限公司，
类型：发明
国别省市：