CN106951267A - 屏幕尺寸自适应方法及装置 - Google Patents
屏幕尺寸自适应方法及装置 Download PDFInfo
- Publication number
- CN106951267A CN106951267A CN201710205243.2A CN201710205243A CN106951267A CN 106951267 A CN106951267 A CN 106951267A CN 201710205243 A CN201710205243 A CN 201710205243A CN 106951267 A CN106951267 A CN 106951267A
- Authority
- CN
- China
- Prior art keywords
- terminal
- size
- screen
- active user
- control
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请实施例提供的屏幕尺寸自适应方法及装置获取当前用户终端的屏幕尺寸,获取当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值,通过计算上述比值与显示于样本用户终端的控件的尺寸的乘积,获得控件在当前用户终端的屏幕的显示尺寸,并根据获得的显示尺寸,在当前用户终端显示该控件。本申请实施例获取当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值,再根据预先存储的控件尺寸与样本用户终端的屏幕尺寸之间的比例,获得与当前用户终端的屏幕尺寸相适配的控件尺寸,改善了控件显示的尺寸与移动终端的屏幕尺寸不协调的问题。
Description
技术领域
本申请涉及计算机技术领域,具体而言,涉及一种屏幕尺寸自适应方法及装置。
背景技术
随着科技的不断发展,人们所使用的移动终端越来越多样化,不同的移动终端之间的尺寸往往存在较大的差异,故现在开发的移动应用程序往往需要适配多种尺寸的移动终端的屏幕。
现有的适配多种尺寸的移动终端屏幕的解决方案往往通过采用React native中的单位:设备独立像素(dp,device independent pixels)来实现。根据dp来显示的控件的物理尺寸不随着移动终端的屏幕分辨率的改变而改变。也就是说,无论移动终端屏幕的物理尺寸以及屏幕分辨率如何变化,控件在移动终端屏幕所显示出的物理尺寸是一致的,容易出现控件显示的尺寸与移动终端的屏幕尺寸不协调的问题。
申请内容
有鉴于此,本申请实施例提供了一种屏幕尺寸自适应方法及装置,能够使得控件显示的尺寸与不同的移动终端的屏幕相适配,有利于改善控件显示的尺寸与移动终端的屏幕尺寸不协调的问题。
为实现上述目的,本申请实施例提供了一种屏幕尺寸自适应方法,所述方法包括:获取当前用户终端的屏幕尺寸;获得所述当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值;通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积,获得所述控件在所述当前用户终端的屏幕的显示尺寸;基于所述显示尺寸,在所述当前用户终端上显示所述控件。
本申请实施例还提供了一种屏幕尺寸自适应装置,设置于用户终端,所述装置包括:屏幕尺寸获取模块,用于获取当前用户终端的屏幕尺寸;比值获得模块,用于获得所述当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值;显示尺寸获取模块,用于通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积,获得所述控件在所述当前用户终端的屏幕的显示尺寸;控件显示模块,用于基于所述显示尺寸,在所述当前用户终端上显示所述控件。
本申请实施例提供的屏幕尺寸自适应方法及装置的有益效果为:
本申请实施例提供的屏幕尺寸自适应方法及装置获取当前用户终端的屏幕尺寸,获取当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值,通过计算上述比值与显示于样本用户终端的控件的尺寸的乘积,获得控件在当前用户终端的屏幕的显示尺寸,并根据获得的显示尺寸,在当前用户终端显示该控件。本申请实施例获取当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值,再根据预先存储的控件尺寸与样本用户终端的屏幕尺寸之间的比例,获得与当前用户终端的屏幕尺寸相适配的控件尺寸,改善了控件显示的尺寸与移动终端的屏幕尺寸不协调的问题。
附图说明
为了更清楚的说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1示出了本申请实施例提供的用户终端的结构框图;
图2示出了本申请第一实施例提供的屏幕尺寸自适应方法的流程示意图;
图3示出了图2中步骤S130的具体步骤示意图;
图4示出了图3中步骤S131的具体步骤示意图;
图5示出了图3中步骤S132的具体步骤示意图;
图6a示出了现有技术中的第一用户终端的控件显示的界面示意图;
图6b示出了现有技术中的第二用户终端的控件显示的界面示意图;
图7a示出了本申请实施例提供的第一用户终端的控件显示的界面示意图;
图7b示出了本申请实施例提供的第二用户终端的控件显示的界面示意图;
图8示出了本申请第二实施例提供的屏幕尺寸适应装置的结构框图;
图9示出了图8中的屏幕尺寸获取模块的具体结构框图。
具体实施方式
图1示出了一种可应用于本申请实施例中的用户终端20的结构框图。如图1所示,所述用户终端20包括存储器202、存储控制器204,一个或多个(图中仅示出一个)处理器206、外设接口208、射频模块210、音频模块212、触控屏幕214等。这些组件通过一条或多条通讯总线/信号线216相互通讯。
存储器202可用于存储软件程序以及模块,如本申请实施例中的屏幕尺寸自适应方法及装置对应的程序指令/模块,处理器206通过运行存储在存储器202内的软件程序以及模块,从而执行各种功能应用以及数据处理,如本申请实施例提供的屏幕尺寸自适应方法。
存储器202可包括高速随机存储器,还可包括非易失性存储器,如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。处理器206以及其他可能的组件对存储器202的访问可在存储控制器204的控制下进行。
外设接口208将各种输入/输出装置耦合至处理器206以及存储器202。在一些实施例中,外设接口208,处理器206以及存储控制器204可以在单个芯片中实现。在其他一些实例中,他们可以分别由独立的芯片实现。
射频模块210用于接收以及发送电磁波,实现电磁波与电信号的相互转换,从而与通讯网络或者其他设备进行通讯。
音频模块212向用户提供音频接口,其可包括一个或多个麦克风、一个或者多个扬声器以及音频电路。
触控屏幕214在用户终端20与用户之间同时提供一个输出及输入界面。具体地,触控屏幕214向用户显示视频输出,这些视频输出的内容可包括文字、图形、视频及其任意组合。
可以理解,图1所示的结构仅为示意,用户终端20还可包括比图1中所示更多或者更少的组件,或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。
第一实施例
详情请参见图2,图2示出了本申请第一实施例提供的屏幕尺寸自适应方法的流程示意图,具体包括如下步骤:
步骤S110,获取当前用户终端的屏幕尺寸。
屏幕尺寸具体可以包括屏幕宽度或屏幕长度中的一个,即客户端可以获取当前用户终端的屏幕宽度或屏幕长度中的一个。
例如,客户端新建一个工具类LayoutUtils.js。通过let Dimensions=require(‘Dimensions’)获取到当前用户终端的屏幕的宽度尺寸或高度尺寸,通过varLayoutUtils={}去构造一个用于存放宽度尺寸值或高度尺寸值的对象。下面具体以获取屏幕的宽度尺寸为例进行说明。
在LayoutUtils对象里,继续给宽度尺寸值设置属性:
SCREED_WIDTH:Dimensions.get(‘window’).width,
其中,SCREED_WIDTH表示当前用户终端的宽度尺寸值。
步骤S120,获得所述当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值。
样本用户终端的屏幕尺寸(例如以宽度尺寸值为例)可以预先存储在当前用户终端的存储器中,也可以存储在服务器中,由当前用户终端从服务器中获取。
在LayoutUtils对象里,通过WIDTH_SCALE:SCREED_WIDTH/a,获取当前用户终端的宽度尺寸值与样本用户终端的屏幕的宽度尺寸值的比值。样本用户终端的宽度尺寸值可以设为a,其中a>0,且为常数。
需要注意的是,a为常数值,与样本用户终端的具体宽度尺寸值有关,例如,若样本用户终端的屏幕的宽度尺寸值为360,则上述代码段即为WIDTH_SCALE:SCREED_WIDTH/360,若样本用户终端的屏幕的宽度尺寸值为420,则上述代码段即为WIDTH_SCALE:SCREED_WIDTH/420。
接下来可以通过export default LayoutUtils这句代码将LayoutUtils的WIDTH_SCALE这个对象属性暴露给其他的代码段使用。
步骤S130,通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积,获得所述控件在所述当前用户终端的屏幕的显示尺寸。
控件具体可以包括文本控件或按钮控件,对于文本控件,可以通过计算当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与显示于样本用户终端的文本控件的尺寸的乘积的方式,获得文本控件在所述当前用户终端的显示尺寸。
其中,文本控件的尺寸具体可以为文本控件的字号,将当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与文本控件的字号相乘,来获得文本控件在当前用户终端的屏幕的显示尺寸。
上述过程具体可以通过下列代码段实现:
<Text style={{fontSize:17*LayoutUtils.WIDTH_SCALE,color:‘#fff’}}></Text>
其中,Text为文本标签,fontSize为设置文本字体大小的属性,即为字号,*LayoutUtils.WIDTH_SCALE为所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值,color是设置文本颜色的属性,#fff为白色颜色值。
对于按钮控件,通过计算当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与显示于样本用户终端的按钮控件的尺寸的乘积,获得按钮控件在所述当前用户终端的屏幕的显示尺寸。
样本用户终端的按钮控件的尺寸具体可以是按钮控件的预设宽度值以及预设高度值,将当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值分别与按钮控件的预设宽度值以及预设高度值相乘,获得按钮控件在当前用户终端的屏幕的显示尺寸。
上述过程具体可以通过如下代码段来实现:
<TouchableOpactiy style={{width:200*LayoutUtils.WIDTH_SCALE,height:55*LayoutUtils.WIDTH_SCALE}}>
其中,TouchableOpactiy为相应触摸的控件,style为控件的属性,width:200*LayoutUtils.WIDTH_SCALE是宽200*当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值,height:55*LayoutUtils.WIDTH_SCALE是高55*当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值。width:200为预设宽度值,height:55为预设高度值。可以理解,预设宽度值以及预设高度值的具体数值不应该理解为是对本申请的限制。
步骤S140,基于所述显示尺寸,在所述当前用户终端上显示所述控件。
获得显示尺寸后,在当前用户终端上依照获得的显示尺寸,显示出文字控件以及按钮控件。
详情请参见图6a和图6b,图6a与图6b分别示出了在两款不同型号的移动终端显示同一界面的现有技术的显示方式,可以明显看出,即使图6a示出的移动终端的屏幕尺寸与图6b示出的移动终端的屏幕尺寸不一致,但两张图中的文本控件“发布”以及文本控件所处的按钮控件尺寸一致,从而使文本控件“发布”以及文本控件所处的按钮控件在图6a中显得较大,在图6b中显得较小。
图7a与图7b分别示出了在两款不同型号的移动终端显示同一界面的本申请提供的屏幕尺寸自适应方法,并且图7a示出的移动终端的型号与图6a示出的移动终端的型号相同,图7b示出的移动终端的型号与图7b示出的移动终端的型号相同。由于文本控件“发布”以及文本控件所处的按钮控件的尺寸与屏幕尺寸相适应,改善了控件显示的尺寸与移动终端的屏幕尺寸不协调的问题。
详情请参见图3,图3示出了图2中步骤S130的具体步骤示意图,包括如下步骤:
步骤S131,通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的文本控件的尺寸的乘积,获得所述文本控件在所述当前用户终端的显示尺寸。
其中,文本控件的尺寸具体可以为文本控件的字号,将当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与文本控件的字号相乘,来获得文本控件在当前用户终端的屏幕的显示尺寸。
上述过程具体可以通过下列代码段实现:
<Text style={{fontSize:17*LayoutUtils.WIDTH_SCALE,color:‘#fff’}}></Text>
其中,Text为文本标签,fontSize为设置文本字体大小的属性,*LayoutUtils.WIDTH_SCALE为所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值,color是设置文本颜色的属性,#fff为白色颜色值。
步骤S132,通过计算所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的按钮控件的尺寸的乘积,获得所述按钮控件在所述当前用户终端的屏幕的显示尺寸。
样本用户终端的按钮控件的尺寸具体可以是按钮控件的预设宽度之以及预设高度值,将当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值分别与按钮控件的预设宽度值以及预设高度值相乘,获得按钮控件在当前用户终端的屏幕的显示尺寸。
上述过程具体可以通过如下代码段来实现:
<TouchableOpactiy style={{width:200*LayoutUtils.WIDTH_SCALE,height:55*LayoutUtils.WIDTH_SCALE}}>
其中,TouchableOpactiy为相应触摸的控件,style为控件的属性,width:200*LayoutUtils.WIDTH_SCALE是宽200*当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值,height:55*LayoutUtils.WIDTH_SCALE是高55*当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值。
详情请参见图4,图4示出了步骤S131的具体步骤示意图,包括如下步骤:
步骤S1311,获得所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值。
当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值由步骤S120获得,此处可以通过相关函数来调用此前获得的当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值。
步骤S1312,将所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与所述文本控件的字号相乘,获得所述文本控件在所述当前用户终端的屏幕的显示尺寸。
上述过程具体可以通过下列代码段实现:
<Text style={{fontSize:17*LayoutUtils.WIDTH_SCALE,color:‘#fff’}}></Text>
其中,Text为文本标签,fontSize为设置文本字体大小的属性,*LayoutUtils.WIDTH_SCALE为所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值,color是设置文本颜色的属性,#fff为白色颜色值。
详情请参见图5,图5示出了步骤S132的具体步骤示意图,包括如下步骤:
步骤S1321,获得所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值。
当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值由步骤S120获得,此处可以通过相关函数来调用此前获得的当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值。
步骤S1322,将所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值分别与所述按钮控件的预设宽度值以及按钮控件的预设高度值相乘,获得所述按钮控件在所述当前用户终端的屏幕的显示尺寸。
上述过程具体可以通过如下代码段来实现:
<TouchableOpactiy style={{width:200*LayoutUtils.WIDTH_SCALE,height:55*LayoutUtils.WIDTH_SCALE}}>
其中,TouchableOpactiy为相应触摸的控件,style为控件的属性,width:200*LayoutUtils.WIDTH_SCALE是宽200*当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值,height:55*LayoutUtils.WIDTH_SCALE是高55*当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值。width:200为预设宽度值,height:55为预设高度值。可以理解,预设宽度值以及预设高度值的具体数值不应该理解为是对本申请的限制。
本申请第一实施例提供的屏幕尺寸自适应方法获取当前用户终端的屏幕尺寸,以便计算获得当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值;再根据获得的比值以及在当前用户终端中预先存储的样本用户终端对应的控件的尺寸,获得控件在当前用户终端的显示尺寸,以便在当前用户终端按照获得的显示尺寸显示该控件。与现有的控件显示方法相比,本申请第一实施例能够依据当前用户终端的屏幕尺寸自动调节显示于屏幕中的控件的尺寸,使得控件的显示尺寸与当前用户终端的屏幕尺寸更加协调。
第二实施例
详情请参见图8,图8示出了本申请第二实施例提供的屏幕尺寸自适应装置,该装置300包括如下模块:
屏幕尺寸获取模块310,用于获取当前用户终端的屏幕尺寸。
上述的屏幕尺寸可以为屏幕宽度或屏幕长度中的一个。
比值获得模块320,用于获得所述当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值。
显示尺寸获取模块330,用于通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积,获得所述控件在所述当前用户终端的屏幕的显示尺寸。
控件显示模块340,用于基于所述显示尺寸,在所述当前用户终端上显示所述控件。
图8示出的屏幕尺寸自适应装置与图2示出的方法相对应,在此便不做赘述。
其中,详情参见图9,屏幕尺寸获取模块310包括:
文本显示尺寸子模块311,用于通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的文本控件的尺寸的乘积,获得所述文本控件在所述当前用户终端的显示尺寸。
其中,文本控件的尺寸具体可以为文本控件的字号,将当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与文本控件的字号相乘,来获得文本控件在当前用户终端的屏幕的显示尺寸。
按钮显示尺寸子模块312,用于通过计算所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的按钮控件的尺寸的乘积,获得所述按钮控件在所述当前用户终端的屏幕的显示尺寸。
样本用户终端的按钮控件的尺寸具体可以是按钮控件的预设宽度之以及预设高度值,将当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值分别与按钮控件的预设宽度值以及预设高度值相乘,获得按钮控件在当前用户终端的屏幕的显示尺寸。
本申请实施例提供的屏幕尺寸自适应方法及装置获取当前用户终端的屏幕尺寸,获取当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值,通过计算上述比值与显示于样本用户终端的控件的尺寸的乘积,获得控件在当前用户终端的屏幕的显示尺寸,并根据获得的显示尺寸,在当前用户终端显示该控件。本申请实施例获取当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值,再根据预先存储的控件尺寸与样本用户终端的屏幕尺寸之间的比例,获得与当前用户终端的屏幕尺寸相适配的控件尺寸,改善了控件显示的尺寸与移动终端的屏幕尺寸不协调的问题。
需要说明的是,本说明书中的各个实施例均采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言,由于其与方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
在本申请所提供的几个实施例中,应该理解到,所揭露的装置和方法,也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的,例如,附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分,所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现方式中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个连续的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或动作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
另外,在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分,也可以是各个模块单独存在,也可以两个或两个以上模块集成形成一个独立的部分。
所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上所述仅为本申请的优选实施例而已,并不用于限制本申请,对于本领域的技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本申请的保护范围之内。应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步定义和解释。
以上所述,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本申请揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应所述以权利要求的保护范围为准。
Claims (10)
1.一种屏幕尺寸自适应方法,其特征在于,所述方法包括:
获取当前用户终端的屏幕尺寸;
获得所述当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值;
通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积,获得所述控件在所述当前用户终端的屏幕的显示尺寸;
基于所述显示尺寸,在所述当前用户终端上显示所述控件。
2.根据权利要求1所述的方法,其特征在于,所述控件包括文本控件,所述通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积,获得所述控件在所述当前用户终端的屏幕的显示尺寸,包括:
通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的文本控件的尺寸的乘积,获得所述文本控件在所述当前用户终端的显示尺寸。
3.根据权利要求2所述的方法,其特征在于,所述通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的文本控件的尺寸的乘积,获得所述文本控件在所述当前用户终端的显示尺寸,包括:
获得所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值;
将所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与所述文本控件的字号相乘,获得所述文本控件在所述当前用户终端的屏幕的显示尺寸。
4.根据权利要求1所述的方法,其特征在于,所述控件包括按钮控件,所述通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积,获得所述控件在所述当前用户终端的屏幕的显示尺寸,包括:
通过计算所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的按钮控件的尺寸的乘积,获得所述按钮控件在所述当前用户终端的屏幕的显示尺寸。
5.根据权利要求4所述的方法,其特征在于,所述通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的文本控件的尺寸的乘积,获得所述文本控件在所述当前用户终端的显示尺寸,包括:
获得所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值;
将所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值分别与所述按钮控件的预设宽度值以及按钮控件的预设高度值相乘,获得所述按钮控件在所述当前用户终端的屏幕的显示尺寸。
6.根据权利要求1所述的方法,其特征在于,所述屏幕尺寸为屏幕宽度或屏幕长度中的一个。
7.一种屏幕尺寸自适应装置,设置于用户终端,其特征在于,所述装置包括:
屏幕尺寸获取模块,用于获取当前用户终端的屏幕尺寸;
比值获得模块,用于获得所述当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值;
显示尺寸获取模块,用于通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积,获得所述控件在所述当前用户终端的屏幕的显示尺寸;
控件显示模块,用于基于所述显示尺寸,在所述当前用户终端上显示所述控件。
8.根据权利要求7所述的装置,其特征在于,所述显示尺寸获取模块包括:
文本显示尺寸子模块,用于通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的文本控件的尺寸的乘积,获得所述文本控件在所述当前用户终端的显示尺寸。
9.根据权利要求7所述的装置,其特征在于,所述显示尺寸获取模块包括:
按钮显示尺寸子模块,用于通过计算所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的按钮控件的尺寸的乘积,获得所述按钮控件在所述当前用户终端的屏幕的显示尺寸。
10.根据权利要求7所述的装置,其特征在于,所述屏幕尺寸为屏幕宽度或屏幕长度中的一个。
Priority Applications (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710205243.2A CN106951267A (zh) | 2017-03-31 | 2017-03-31 | 屏幕尺寸自适应方法及装置 |
PCT/CN2017/109921 WO2018176841A1 (zh) | 2017-03-31 | 2017-11-08 | 屏幕尺寸自适应方法、装置、用户终端及可读存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710205243.2A CN106951267A (zh) | 2017-03-31 | 2017-03-31 | 屏幕尺寸自适应方法及装置 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN106951267A true CN106951267A (zh) | 2017-07-14 |
Family
ID=59475589
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201710205243.2A Pending CN106951267A (zh) | 2017-03-31 | 2017-03-31 | 屏幕尺寸自适应方法及装置 |
Country Status (2)
Country | Link |
---|---|
CN (1) | CN106951267A (zh) |
WO (1) | WO2018176841A1 (zh) |
Cited By (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107577490A (zh) * | 2017-08-03 | 2018-01-12 | 武汉斗鱼网络科技有限公司 | 一种iOS中的视图自动布局方法及装置 |
WO2018176841A1 (zh) * | 2017-03-31 | 2018-10-04 | 武汉斗鱼网络科技有限公司 | 屏幕尺寸自适应方法、装置、用户终端及可读存储介质 |
CN109408365A (zh) * | 2018-08-30 | 2019-03-01 | 深圳壹账通智能科技有限公司 | 辅助页面测试方法、装置、存储介质和计算机设备 |
CN109582314A (zh) * | 2017-09-29 | 2019-04-05 | 广东亿迅科技有限公司 | 一种移动应用ui自动适配屏幕的系统及方法 |
CN110493659A (zh) * | 2019-08-22 | 2019-11-22 | 深圳市网心科技有限公司 | 一种视频播放器交互功能的实现方法、装置及设备 |
CN112817507A (zh) * | 2021-01-26 | 2021-05-18 | 广州虎牙科技有限公司 | 控件适配方法、装置、电子设备及存储介质 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104866353A (zh) * | 2015-05-27 | 2015-08-26 | 小米科技有限责任公司 | 显示按钮的方法及装置 |
CN105653254A (zh) * | 2014-12-03 | 2016-06-08 | 科大讯飞股份有限公司 | 原生界面适配方法、装置及应用其的电子设备 |
CN106155641A (zh) * | 2015-03-24 | 2016-11-23 | 北京神州泰岳软件股份有限公司 | 一种移动终端应用界面动态生成的方法和系统 |
CN106484424A (zh) * | 2016-10-18 | 2017-03-08 | 武汉斗鱼网络科技有限公司 | 一种获得与屏幕适配的控件的方法和系统 |
Family Cites Families (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20120260203A1 (en) * | 2011-04-08 | 2012-10-11 | International Business Machines Corporation | Adaptive drag and drop zone |
CN103530117A (zh) * | 2013-09-30 | 2014-01-22 | 山西云途信息技术有限公司 | 一种适配移动终端不同尺寸屏幕的方法及装置 |
CN103870197A (zh) * | 2014-03-21 | 2014-06-18 | 天脉聚源(北京)传媒科技有限公司 | 一种处理图片的方法及装置 |
CN106406794A (zh) * | 2016-09-14 | 2017-02-15 | 乐视控股(北京)有限公司 | 一种屏幕适配方法及其装置 |
CN106951267A (zh) * | 2017-03-31 | 2017-07-14 | 武汉斗鱼网络科技有限公司 | 屏幕尺寸自适应方法及装置 |
-
2017
- 2017-03-31 CN CN201710205243.2A patent/CN106951267A/zh active Pending
- 2017-11-08 WO PCT/CN2017/109921 patent/WO2018176841A1/zh active Application Filing
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105653254A (zh) * | 2014-12-03 | 2016-06-08 | 科大讯飞股份有限公司 | 原生界面适配方法、装置及应用其的电子设备 |
CN106155641A (zh) * | 2015-03-24 | 2016-11-23 | 北京神州泰岳软件股份有限公司 | 一种移动终端应用界面动态生成的方法和系统 |
CN104866353A (zh) * | 2015-05-27 | 2015-08-26 | 小米科技有限责任公司 | 显示按钮的方法及装置 |
CN106484424A (zh) * | 2016-10-18 | 2017-03-08 | 武汉斗鱼网络科技有限公司 | 一种获得与屏幕适配的控件的方法和系统 |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2018176841A1 (zh) * | 2017-03-31 | 2018-10-04 | 武汉斗鱼网络科技有限公司 | 屏幕尺寸自适应方法、装置、用户终端及可读存储介质 |
CN107577490A (zh) * | 2017-08-03 | 2018-01-12 | 武汉斗鱼网络科技有限公司 | 一种iOS中的视图自动布局方法及装置 |
CN109582314A (zh) * | 2017-09-29 | 2019-04-05 | 广东亿迅科技有限公司 | 一种移动应用ui自动适配屏幕的系统及方法 |
CN109408365A (zh) * | 2018-08-30 | 2019-03-01 | 深圳壹账通智能科技有限公司 | 辅助页面测试方法、装置、存储介质和计算机设备 |
CN110493659A (zh) * | 2019-08-22 | 2019-11-22 | 深圳市网心科技有限公司 | 一种视频播放器交互功能的实现方法、装置及设备 |
CN112817507A (zh) * | 2021-01-26 | 2021-05-18 | 广州虎牙科技有限公司 | 控件适配方法、装置、电子设备及存储介质 |
CN112817507B (zh) * | 2021-01-26 | 2023-11-03 | 广州虎牙科技有限公司 | 控件适配方法、装置、电子设备及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
WO2018176841A1 (zh) | 2018-10-04 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106951267A (zh) | 屏幕尺寸自适应方法及装置 | |
CN105528408B (zh) | 页面展示方法和装置 | |
CN108280119A (zh) | 页面生成方法、装置及用户终端 | |
CN109783757B (zh) | 渲染网页的方法及装置、系统、存储介质、电子装置 | |
CN107508895A (zh) | 页面加载方法、装置及存储介质 | |
CN107517320A (zh) | 电子名片生成方法以及装置 | |
CN106503111B (zh) | 网页转码方法、装置及客户终端 | |
CN107203434A (zh) | 一种纹理共享的方法、装置以及计算机可读存储介质 | |
CN107506483A (zh) | 页面加载方法、装置、电子设备及存储介质 | |
US20160196008A1 (en) | Implementing desktops on a mobile terminal | |
CN108038894A (zh) | 动画创建方法、装置、电子设备及计算机可读存储介质 | |
CN107402766A (zh) | 页面布局管理方法及装置 | |
CN112099886A (zh) | 移动零终端的桌面显示控制方法及装置 | |
CN109471899A (zh) | 一种可视化方法、装置及其存储介质 | |
CN108510007A (zh) | 一种网页篡改检测方法、装置、电子设备及存储介质 | |
CN107632971A (zh) | 用于生成多维报表的方法和装置 | |
CN107644491A (zh) | 物品回收共享方法及装置 | |
CN108108220A (zh) | 基于文本控件的字符串动画效果实现方法及装置 | |
CN107329654A (zh) | 绘制元素浮层的方法、装置以及计算机可读存储介质 | |
CN107168606A (zh) | 对话框控件显示方法、装置及用户终端 | |
CN107239212A (zh) | 分段选择视图呈现方法、装置及用户终端 | |
CN107730467A (zh) | 显示方法、装置、设备及存储介质 | |
CN107179931A (zh) | 安装包打包方法、装置及系统 | |
CN105511891A (zh) | 一种自助取数平台的前端框架建立方法及装置 | |
CN108762637A (zh) | 控制方法、装置及系统 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20170714 |