WO2018176841A1 - Screen size self-adaptation method and device, user terminal and readable storage medium - Google Patents

Screen size self-adaptation method and device, user terminal and readable storage medium Download PDF

Info

Publication number
WO2018176841A1
WO2018176841A1 PCT/CN2017/109921 CN2017109921W WO2018176841A1 WO 2018176841 A1 WO2018176841 A1 WO 2018176841A1 CN 2017109921 W CN2017109921 W CN 2017109921W WO 2018176841 A1 WO2018176841 A1 WO 2018176841A1
Authority
WO
WIPO (PCT)
Prior art keywords
user terminal
size
screen size
screen
current user
Prior art date
Application number
PCT/CN2017/109921
Other languages
French (fr)
Chinese (zh)
Inventor
成文驰
陈少杰
张文明
Original Assignee
武汉斗鱼网络科技有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 武汉斗鱼网络科技有限公司 filed Critical 武汉斗鱼网络科技有限公司
Publication of WO2018176841A1 publication Critical patent/WO2018176841A1/en

Links

Images

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

Definitions

  • the present application relates to the field of computer technology, and in particular, to a screen size adaptation method, apparatus, user terminal, and readable storage medium.
  • the embodiment of the present application provides a screen size adaptation method, apparatus, user terminal, and readable storage medium, which can adapt the size of the control display to the screen of different user terminals to improve the display of the control.
  • the problem that the size is inconsistent with the screen size of the user terminal.
  • an embodiment of the present application provides a screen size adaptation method, the method comprising: acquiring a screen size of a current user terminal; obtaining a screen size of the current user terminal and a screen of a sample user terminal stored in advance a ratio of the size; obtaining the control at the current user terminal by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a control displayed on the sample user terminal Display size of the screen; based on the display size, displaying the control on the current user terminal.
  • the embodiment of the present application further provides a screen size adaptation device, which is disposed on a user terminal, and the device includes: a screen size acquisition module, configured to acquire a screen size of the current user terminal; and a ratio obtaining module, configured to obtain the current a ratio of a screen size of the user terminal to a screen size of the sample user terminal stored in advance; a display size obtaining module configured to calculate a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and displayed in the a product of a size of a control of the sample user terminal to obtain a display size of the screen of the control at the current user terminal; and a control display module configured to display the control on the current user terminal based on the display size.
  • a screen size acquisition module configured to acquire a screen size of the current user terminal
  • a ratio obtaining module configured to obtain the current a ratio of a screen size of the user terminal to a screen size of the sample user terminal stored in advance
  • a display size obtaining module configured to calculate
  • the embodiment of the present application further provides a user terminal, including a processor and a non-volatile memory storing a plurality of computer instructions.
  • a user terminal including a processor and a non-volatile memory storing a plurality of computer instructions.
  • the computer instruction is executed by the processor, the user terminal performs the screen size described above.
  • Adaptive method When the computer instruction is executed by the processor, the user terminal performs the screen size described above. Adaptive method.
  • the embodiment of the present application further provides a readable storage medium, the readable storage medium comprising a computer program, the computer program controlling the electronic device where the readable storage medium is located to perform the screen size adaptation method described above.
  • the screen size adaptation method, device, user terminal and readable storage medium provided by the embodiments of the present application firstly obtain the ratio of the screen size of the current user terminal to the screen size of the sample user terminal stored in advance; The ratio is the product of the size of the control displayed on the sample user terminal to obtain the display size of the screen of the control at the current user terminal; finally, the control is displayed at the current user terminal according to the obtained display size.
  • the technical solution provided by the embodiment of the present application improves the problem that the size of the control display is inconsistent with the screen size of the user terminal.
  • FIG. 1 is a structural block diagram of a user terminal provided by an embodiment of the present application.
  • FIG. 2 is a schematic flowchart diagram of a screen size adaptation method provided by the first embodiment of the present application
  • FIG. 3a is a schematic diagram showing an interface displayed by a control of a first user terminal in the prior art
  • FIG. 3b is a schematic diagram showing an interface of a control display of a second user terminal in the prior art
  • 4a is a schematic diagram of an interface displayed by a control of a first user terminal according to an embodiment of the present application
  • FIG. 4b is a schematic diagram of an interface displayed by a control of a second user terminal according to an embodiment of the present application.
  • FIG. 5 is a schematic diagram showing the sub-steps of step S130 in FIG. 2;
  • Figure 6 is a schematic diagram showing the sub-steps of step S131 in Figure 5;
  • FIG. 7 is a schematic diagram showing the sub-steps of step S132 in FIG. 5;
  • FIG. 8 is a structural block diagram of a screen size adaptation apparatus according to a second embodiment of the present application.
  • FIG. 9 is a block diagram showing the structure of the screen size acquisition module of FIG.
  • FIG. 1 is a block diagram showing the structure of a user terminal 20 that can be applied to an embodiment of the present application.
  • the user terminal 20 includes a memory 202, a memory controller 204, one or more (only one shown) processor 206, a peripheral interface 208, a radio frequency module 210, an audio module 212, and a touch.
  • the communication bus/signal line 216 enables communication with each other.
  • the memory 202 can be used to store software programs and modules, such as the screen size adaptation method and the program instructions/modules corresponding to the apparatus in the embodiment of the present application.
  • the processor 206 executes each of the software programs and modules stored in the memory 202.
  • Memory 202 can include high speed random access memory and can also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid state memory. Access to the memory 202 by the processor 206 and other possible components can be performed under the control of the memory controller 204.
  • non-volatile memory such as one or more magnetic storage devices, flash memory, or other non-volatile solid state memory. Access to the memory 202 by the processor 206 and other possible components can be performed under the control of the memory controller 204.
  • Peripheral interface 208 couples various input/output devices to processor 206 and memory 202.
  • peripheral interface 208, processor 206, and memory controller 204 can be implemented in a single chip. In other instances, they can be implemented by separate chips.
  • the radio frequency module 210 is configured to receive and transmit electromagnetic waves, and realize mutual conversion between electromagnetic waves and electric signals, thereby communicating with a communication network or other devices.
  • the audio module 212 provides an audio interface to the user, which may include one or more microphones, one or more speakers, and audio circuitry.
  • the touch screen 214 provides an output and input interface simultaneously between the user terminal 20 and the user.
  • the touch screen 214 displays video output to the user, and the content of the video output may include text, graphics, video, and any combination thereof.
  • FIG. 1 is merely illustrative, and the user terminal 20 may also include more or less components than those shown in FIG. 1, or have a different configuration than that shown in FIG.
  • the components shown in Figure 1 can be implemented in hardware, software, or a combination thereof.
  • FIG. 2 is a schematic flowchart diagram of a screen size adaptation method according to the first embodiment of the present application. The method is applied to the user terminal 20 in FIG. 1 , and the method may include the following steps:
  • Step S110 Acquire a screen size of the current user terminal.
  • the screen size may include one of a screen width or a screen length, that is, a client running on the current user terminal may acquire one of a screen width or a screen length of the current user terminal.
  • SCREED_WIDTH represents the width dimension value of the current user terminal.
  • Step S120 Obtain a ratio of a screen size of the current user terminal to a screen size of a sample user terminal stored in advance.
  • the screen size of the sample user terminal (for example, as a width size value) may be pre-stored in the memory 202 of the current user terminal, or may be stored in the server, and acquired by the current user terminal from the server.
  • the ratio of the width dimension value of the current user terminal to the width dimension value of the screen of the sample user terminal is obtained by WIDTH_SCALE: SCREED_WIDTH/a.
  • the width dimension value of the sample user terminal can be set to a, where a>0 and is a constant.
  • a is a constant value, which is related to the width dimension value of the sample user terminal.
  • WIDTH_SCALE SCREED_WIDTH/360
  • WIDTH_SCALE SCREED_WIDTH/420.
  • Step S130 Obtain a product of the control at the current user terminal by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a control displayed on the sample user terminal. The display size of the screen.
  • the control may include a text control or a button control.
  • the text control as an example, the ratio of the screen size of the current user terminal to the screen size of the sample user terminal may be calculated and displayed on the sample user terminal. The manner in which the product of the size of the text control is multiplied to obtain the display size of the text control at the current user terminal.
  • the size of the text control may be the font size of the text control, and the ratio of the screen size of the current user terminal to the screen size of the sample user terminal is multiplied by the font size of the text control to obtain the display size of the text control on the screen of the current user terminal.
  • fontSize is an attribute for setting a text font size, that is, a font size
  • *LayoutUtils.WIDTH_SCALE is a ratio of a screen size of the current user terminal to a screen size of a sample user terminal
  • color is an attribute for setting a text color.
  • #fff is a white color value.
  • the button control as an example, by calculating the product of the ratio of the screen size of the current user terminal to the screen size of the sample user terminal and the size of the button control displayed on the sample user terminal, the display of the button control on the screen of the current user terminal is obtained. size.
  • the size of the button control of the sample user terminal may be the preset width value of the button control and the preset height value, which can be The ratio of the screen size of the current user terminal to the screen size of the sample user terminal is multiplied by the preset width value of the button control and the preset height value, respectively, to obtain the display size of the button control on the screen of the current user terminal.
  • ⁇ TouchableOpactiy style ⁇ width:200*LayoutUtils.WIDTH_SCALE,height:55*LayoutUtils.WIDTH_SCALE ⁇ >
  • TouchableOpactiy is the control of the corresponding touch
  • style is the property of the control
  • width:200*LayoutUtils.WIDTH_SCALE is the ratio of the screen size of the current user terminal to the screen size of the sample user terminal by wide 200*
  • height:55*LayoutUtils.WIDTH_SCALE is High 55* The ratio of the screen size of the current user terminal to the screen size of the sample user terminal.
  • Width: 200 is the preset width value
  • height: 55 is the preset height value. It can be understood that the values of the preset width value and the preset height value may be adjusted according to actual conditions, and the above examples are not to be construed as limiting the application.
  • Step S140 displaying the control on the current user terminal based on the display size.
  • the control is displayed on the current user terminal in accordance with the obtained display size.
  • FIG. 3a and FIG. 3b respectively show the prior art display manners of displaying the same interface on two different types of user terminals. It can be clearly seen that the user terminal shown in FIG. 3a The screen size is inconsistent with the screen size of the user terminal shown in Figure 3b, but the text control "Publish” in the two figures and the button control in which the text control is located are the same size, so that the text control "Publish” and the button control where the text control is located It appears larger in Figure 3a and smaller in Figure 3b.
  • FIG. 4a and 4b are diagrams showing the same interface displayed on two different models of user terminals by using the screen size adaptive method provided by the present application, and the model of the user terminal shown in FIG. 4a and the user terminal shown in FIG. 3a
  • the model number is the same
  • the model of the user terminal shown in FIG. 4b is the same as the model of the user terminal shown in FIG. 4b.
  • the control is adjusted according to the screen size of the user terminal, so that the proportions of the controls displayed on different screen sizes are substantially the same, so as to improve the problem that the size of the control display is inconsistent with the screen size of the user terminal. .
  • FIG. 5 is a schematic diagram showing the sub-steps of step S130 in FIG. 2, including the following steps:
  • Step S131 obtaining a text control in the current user by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a text control displayed on the sample user terminal.
  • the display size of the terminal The display size of the terminal.
  • the size of the text control may be the font size of the text control, and the ratio of the screen size of the current user terminal to the screen size of the sample user terminal is multiplied by the font size of the text control to obtain the display size of the text control on the screen of the current user terminal.
  • fontSize is an attribute for setting a text font size
  • *LayoutUtils.WIDTH_SCALE is a ratio of a screen size of the current user terminal to a screen size of a sample user terminal
  • color is an attribute for setting a text color
  • #fff is White color value.
  • Step S132 obtaining a button control at the current user terminal by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a button control displayed on the sample user terminal.
  • the display size of the screen The display size of the screen.
  • the size of the button control of the sample user terminal may be a preset width of the button control and a preset height value, and the ratio of the screen size of the current user terminal to the screen size of the sample user terminal and the preset width value of the button control and the preset respectively Multiply the height values to obtain the display size of the button control on the screen of the current user terminal.
  • ⁇ TouchableOpactiy style ⁇ width:200*LayoutUtils.WIDTH_SCALE,height:55*LayoutUtils.WIDTH_SCALE ⁇ >
  • TouchableOpactiy is the control of the corresponding touch
  • style is the property of the control
  • WIDTH_SCALE is the ratio of the screen size of the current user terminal to the screen size of the sample user terminal by wide 200*
  • height:55*LayoutUtils.WIDTH_SCALE is High 55* The ratio of the screen size of the current user terminal to the screen size of the sample user terminal.
  • FIG. 6 is a schematic diagram showing the steps of step S131, including the following steps:
  • Step S1311 Obtain a ratio of a screen size of the current user terminal to a screen size of the sample user terminal.
  • the ratio of the screen size of the current user terminal to the screen size of the sample user terminal is obtained by step S120, where the previously obtained ratio of the screen size of the current user terminal to the screen size of the sample user terminal can be called by the correlation function.
  • Step S1312 Multiply the ratio of the screen size of the current user terminal to the screen size of the sample user terminal by the font size of the text control to obtain the display size of the text control on the screen of the current user terminal.
  • fontSize is an attribute for setting a text font size
  • *LayoutUtils.WIDTH_SCALE is a ratio of a screen size of the current user terminal to a screen size of a sample user terminal
  • color is an attribute for setting a text color
  • #fff is White color value.
  • FIG. 7 shows a schematic diagram of the steps of step S132, including the following steps:
  • Step S1321 Obtain a ratio of a screen size of the current user terminal to a screen size of the sample user terminal.
  • the ratio of the screen size of the current user terminal to the screen size of the sample user terminal is obtained by step S120, where the previously obtained screen size of the current user terminal and the screen size of the sample user terminal can be called by the correlation function. ratio.
  • Step S1322 Multiply a ratio of a screen size of the current user terminal to a screen size of the sample user terminal by a preset width value of the button control and a preset height value of the button control to obtain the button control.
  • ⁇ TouchableOpactiy style ⁇ width:200*LayoutUtils.WIDTH_SCALE,height:55*LayoutUtils.WIDTH_SCALE ⁇ >
  • TouchableOpactiy is the control of the corresponding touch
  • style is the property of the control
  • width:200*LayoutUtils.WIDTH_SCALE is the ratio of the screen size of the current user terminal to the screen size of the sample user terminal by wide 200*
  • height:55*LayoutUtils.WIDTH_SCALE is High 55* The ratio of the screen size of the current user terminal to the screen size of the sample user terminal.
  • Width: 200 is the preset width value
  • height: 55 is the preset height value. It can be understood that the values of the preset width value and the preset height value may be adjusted according to actual conditions, and should not be construed as limiting the application.
  • the screen size adaptation method provided by the first embodiment of the present application acquires the screen size of the current user terminal, so as to calculate a ratio of the screen size of the current user terminal to the screen size of the sample user terminal; and according to the obtained ratio and the current user terminal.
  • the size of the control corresponding to the sample user terminal stored in advance, and the display size of the control at the current user terminal is obtained, so that the current user terminal displays the control according to the obtained display size.
  • the first embodiment of the present application can automatically adjust the size of the control displayed on the screen according to the screen size of the current user terminal, so that the display size of the control is more coordinated with the screen size of the current user terminal.
  • FIG. 8 shows a screen size adaptation apparatus according to a second embodiment of the present application.
  • the apparatus 300 includes the following modules:
  • the screen size obtaining module 310 is configured to acquire a screen size of the current user terminal.
  • the manner in which the screen size obtaining module 310 acquires the screen size of the current user terminal includes:
  • An object for storing the screen size of the current user terminal is constructed by the created tool class.
  • the screen size obtaining module 310 is further configured to acquire a screen size of the sample user terminal.
  • the manner in which the screen size acquisition module acquires the screen size of the sample user terminal includes:
  • the above screen size may be one of the screen width or the screen length.
  • the ratio obtaining module 320 is configured to obtain a ratio of a screen size of the current user terminal to a screen size of the sample user terminal stored in advance.
  • the display size obtaining module 330 is configured to obtain the control in the product by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a control displayed on the sample user terminal. The display size of the screen of the current user terminal.
  • the control display module 340 is configured to display the control on the current user terminal based on the display size.
  • the screen size adaptive device shown in FIG. 8 corresponds to the method shown in FIG. 2 and will not be described herein.
  • the screen size obtaining module 310 includes:
  • a text display size sub-module 311 configured to obtain the text by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a text control displayed on the sample user terminal The display size of the control at the current user terminal.
  • the size of the text control may be the font size of the text control, and the ratio of the screen size of the current user terminal to the screen size of the sample user terminal is multiplied by the font size of the text control to obtain the display size of the text control on the screen of the current user terminal.
  • a button display size sub-module 312 configured to obtain the button control by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a button control displayed on the sample user terminal The display size of the screen of the current user terminal.
  • the size of the button control of the sample user terminal may specifically be a preset width of the button control and a preset height value, and the ratio of the screen size of the current user terminal to the screen size of the sample user terminal and the preset width value of the button control respectively
  • the preset height values are multiplied to obtain the display size of the button control on the screen of the current user terminal.
  • the screen size adaptation method, the device, the user terminal, and the readable storage medium provided by the embodiment of the present application acquire the screen size of the current user terminal, and obtain the ratio of the screen size of the current user terminal to the screen size of the sample user terminal stored in advance.
  • the display size of the screen of the control at the current user terminal is obtained, and the control is displayed at the current user terminal according to the obtained display size.
  • the embodiment of the present application obtains the ratio of the screen size of the current user terminal to the screen size of the sample user terminal, and obtains the screen size of the current user terminal according to the ratio between the size of the pre-stored control and the screen size of the sample user terminal.
  • the size of the control is improved, and the problem that the size of the control display is inconsistent with the screen size of the user terminal is improved.
  • each block of the flowchart or block diagram can represent a module, a program segment, or a portion of code that includes one or more of the Executable instructions. It should also be noted that, in some alternative implementations, the functions noted in the blocks may also occur in a different order than those illustrated in the drawings.
  • each block of the block diagrams and/or flowcharts, and combinations of blocks in the block diagrams and/or flowcharts can be implemented in a dedicated hardware-based system that performs the specified function or function. Or it can be implemented by a combination of dedicated hardware and computer instructions.
  • each functional module in each embodiment of the present application may be integrated to form a separate part, or each module may exist separately, or two or more modules may be integrated to form a separate part.
  • the functions, if implemented in the form of software functional modules and sold or used as separate products, may be stored in a computer readable storage medium.
  • the technical solution of the present application which is essential or contributes to the prior art, or a part of the technical solution, may be embodied in the form of a software product, which is stored in a storage medium, including
  • the instructions are used to cause a computer device (which may be a personal computer, server, or network device, etc.) to perform all or part of the steps of the methods described in various embodiments of the present application.
  • the foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, and the like. .
  • the embodiment of the present application obtains the ratio of the screen size of the current user terminal to the screen size of the sample user terminal, and obtains the screen size of the current user terminal according to the ratio between the size of the pre-stored control and the screen size of the sample user terminal.
  • the size of the control is improved, and the problem that the size of the control display is inconsistent with the screen size of the user terminal is improved.

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

A screen size self-adaptation method and device. The method comprises: acquiring the screen size of a current user terminal (S110); acquiring the ratio of the screen size of the current user terminal to the screen size of a pre-stored sample user terminal (S120); calculating the product of the said ratio and the size of a control displayed on the sample user terminal to obtain a display size of the control on the screen of the current user terminal (S130); and displaying the control on the current user terminal according to the obtained display size (S140). According to the method, the ratio of the screen size of the current user terminal to the screen size of the sample user terminal is obtained, and the size of the control adapted to the screen size of the current user terminal is obtained according to the ratio of the size of a pre-stored control to the screen size of the sample user terminal, thus solving the problem that the display size of the control and the screen size of the user terminal are disproportional.

Description

屏幕尺寸自适应方法、装置、用户终端及可读存储介质Screen size adaptive method, device, user terminal and readable storage medium
本申请要求于2017年03月31日提交中国专利局的申请号为CN201710205243.2名称为“屏幕尺寸自适应方法及装置”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。The present application claims priority to Chinese Patent Application No. CN201710205243.2 entitled "Screen Size Adaptation Method and Apparatus", filed on March 31, 2017, the entire contents of which is incorporated herein by reference. .
技术领域Technical field
本申请涉及计算机技术领域，具体而言，涉及一种屏幕尺寸自适应方法、装置、用户终端及可读存储介质。The present application relates to the field of computer technology, and in particular, to a screen size adaptation method, apparatus, user terminal, and readable storage medium.
背景技术Background technique
随着科技的不断发展，人们所使用的用户终端越来越多样化，不同的用户终端之间的尺寸往往存在较大的差异，故现在开发的移动应用程序往往需要适配多种尺寸的用户终端的屏幕。With the continuous development of technology, the user terminals used by people are more and more diversified, and the sizes between different user terminals often have large differences. Therefore, mobile applications developed nowadays often need to be adapted to users of various sizes. The screen of the terminal.
现有的适配多种尺寸的用户终端屏幕的解决方案往往通过采用React native中的单位dp(device independent pixels，设备独立像素)来实现。根据dp显示控件的物理尺寸不随着用户终端的屏幕分辨率及屏幕的物理尺寸的改变而改变。也就是说，无论用户终端屏幕的物理尺寸以及屏幕分辨率如何变化，控件在用户终端屏幕所显示出的尺寸是一致的，容易出现控件显示的尺寸与用户终端的屏幕尺寸不协调的问题。Existing solutions for adapting various sizes of user terminal screens are often implemented by using unit dp (device independent pixels) in React native. The physical size of the control according to the dp does not change as the screen resolution of the user terminal and the physical size of the screen change. That is to say, regardless of the physical size of the screen of the user terminal and the change of the screen resolution, the size displayed by the control on the screen of the user terminal is consistent, and the problem that the size of the control display is inconsistent with the screen size of the user terminal is apt to occur.
发明内容Summary of the invention
有鉴于此，本申请实施例提供了一种屏幕尺寸自适应方法、装置、用户终端及可读存储介质，能够使得控件显示的尺寸与不同的用户终端的屏幕相适配，以改善控件显示的尺寸与用户终端的屏幕尺寸不协调的问题。In view of this, the embodiment of the present application provides a screen size adaptation method, apparatus, user terminal, and readable storage medium, which can adapt the size of the control display to the screen of different user terminals to improve the display of the control. The problem that the size is inconsistent with the screen size of the user terminal.
为实现上述目的，本申请实施例提供了一种屏幕尺寸自适应方法，所述方法包括：获取当前用户终端的屏幕尺寸；获得所述当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值；通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积，获得所述控件在所述当前用户终端的屏幕的显示尺寸；基于所述显示尺寸，在所述当前用户终端上显示所述控件。To achieve the above objective, an embodiment of the present application provides a screen size adaptation method, the method comprising: acquiring a screen size of a current user terminal; obtaining a screen size of the current user terminal and a screen of a sample user terminal stored in advance a ratio of the size; obtaining the control at the current user terminal by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a control displayed on the sample user terminal Display size of the screen; based on the display size, displaying the control on the current user terminal.
本申请实施例还提供了一种屏幕尺寸自适应装置，设置于用户终端，所述装置包括：屏幕尺寸获取模块，用于获取当前用户终端的屏幕尺寸；比值获得模块，用于获得所述当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值；显示尺寸获取模块，用于计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积，获得所述控件在所述当前用户终端的屏幕的显示尺寸；控件显示模块，用于基于所述显示尺寸，在所述当前用户终端上显示所述控件。 The embodiment of the present application further provides a screen size adaptation device, which is disposed on a user terminal, and the device includes: a screen size acquisition module, configured to acquire a screen size of the current user terminal; and a ratio obtaining module, configured to obtain the current a ratio of a screen size of the user terminal to a screen size of the sample user terminal stored in advance; a display size obtaining module configured to calculate a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and displayed in the a product of a size of a control of the sample user terminal to obtain a display size of the screen of the control at the current user terminal; and a control display module configured to display the control on the current user terminal based on the display size.
本申请实施例还提供一种用户终端，包括处理器及存储有若干计算机指令的非易失性存储器，所述计算机指令被所述处理器执行时，所述用户终端执行上面所述的屏幕尺寸自适应方法。The embodiment of the present application further provides a user terminal, including a processor and a non-volatile memory storing a plurality of computer instructions. When the computer instruction is executed by the processor, the user terminal performs the screen size described above. Adaptive method.
本申请实施例还提供一种可读存储介质，所述可读存储介质包括计算机程序，所述计算机程序运行时控制所述可读存储介质所在电子设备执行上面所述的屏幕尺寸自适应方法。The embodiment of the present application further provides a readable storage medium, the readable storage medium comprising a computer program, the computer program controlling the electronic device where the readable storage medium is located to perform the screen size adaptation method described above.
本申请实施例提供的屏幕尺寸自适应方法及装置的有益效果例如包括：The beneficial effects of the screen size adaptation method and apparatus provided by the embodiments of the present application include, for example:
本申请实施例提供的屏幕尺寸自适应方法、装置、用户终端及可读存储介质，首先，通过获取当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值；通过接着，计算上述比值与显示于样本用户终端的控件的尺寸的乘积，获得控件在当前用户终端的屏幕的显示尺寸；最后，根据获得的显示尺寸，在当前用户终端显示该控件。本申请实施例提供的技术方案改善了控件显示的尺寸与用户终端的屏幕尺寸不协调的问题。The screen size adaptation method, device, user terminal and readable storage medium provided by the embodiments of the present application firstly obtain the ratio of the screen size of the current user terminal to the screen size of the sample user terminal stored in advance; The ratio is the product of the size of the control displayed on the sample user terminal to obtain the display size of the screen of the control at the current user terminal; finally, the control is displayed at the current user terminal according to the obtained display size. The technical solution provided by the embodiment of the present application improves the problem that the size of the control display is inconsistent with the screen size of the user terminal.
附图说明DRAWINGS
为了更清楚的说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings used in the embodiments or the prior art description will be briefly described below. Obviously, the drawings in the following description are only It is a certain embodiment of the present application, and other drawings can be obtained according to the drawings without any creative work for those skilled in the art.
图1示出了本申请实施例提供的用户终端的结构框图；FIG. 1 is a structural block diagram of a user terminal provided by an embodiment of the present application;
图2示出了本申请第一实施例提供的屏幕尺寸自适应方法的流程示意图；FIG. 2 is a schematic flowchart diagram of a screen size adaptation method provided by the first embodiment of the present application;
图3a示出了现有技术中的第一用户终端的控件显示的界面示意图；FIG. 3a is a schematic diagram showing an interface displayed by a control of a first user terminal in the prior art; FIG.
图3b示出了现有技术中的第二用户终端的控件显示的界面示意图；FIG. 3b is a schematic diagram showing an interface of a control display of a second user terminal in the prior art;
图4a示出了本申请实施例提供的第一用户终端的控件显示的界面示意图；4a is a schematic diagram of an interface displayed by a control of a first user terminal according to an embodiment of the present application;
图4b示出了本申请实施例提供的第二用户终端的控件显示的界面示意图；FIG. 4b is a schematic diagram of an interface displayed by a control of a second user terminal according to an embodiment of the present application;
图5示出了图2中步骤S130的子步骤示意图；FIG. 5 is a schematic diagram showing the sub-steps of step S130 in FIG. 2;
图6示出了图5中步骤S131的子步骤示意图；Figure 6 is a schematic diagram showing the sub-steps of step S131 in Figure 5;
图7示出了图5中步骤S132的子步骤示意图；FIG. 7 is a schematic diagram showing the sub-steps of step S132 in FIG. 5;
图8示出了本申请第二实施例提供的屏幕尺寸适应装置的结构框图；FIG. 8 is a structural block diagram of a screen size adaptation apparatus according to a second embodiment of the present application;
图9示出了图8中的屏幕尺寸获取模块的结构框图。FIG. 9 is a block diagram showing the structure of the screen size acquisition module of FIG.
具体实施方式detailed description
图1示出了一种可应用于本申请实施例中的用户终端20的结构框图。如图1所示，所述用户终端20包括存储器202、存储控制器204，一个或多个(图中仅示出一个)处理器206、外设接口208、射频模块210、音频模块212、触控屏幕214等。这些组件通过一条或多条 通讯总线/信号线216实现相互之间的通讯。FIG. 1 is a block diagram showing the structure of a user terminal 20 that can be applied to an embodiment of the present application. As shown in FIG. 1, the user terminal 20 includes a memory 202, a memory controller 204, one or more (only one shown) processor 206, a peripheral interface 208, a radio frequency module 210, an audio module 212, and a touch. Control screen 214 and the like. These components pass one or more The communication bus/signal line 216 enables communication with each other.
存储器202可用于存储软件程序以及模块，如本申请实施例中的屏幕尺寸自适应方法及装置对应的程序指令/模块，处理器206通过运行存储在存储器202内的软件程序以及模块，从而执行各种功能应用以及数据处理，如本申请实施例提供的屏幕尺寸自适应方法。The memory 202 can be used to store software programs and modules, such as the screen size adaptation method and the program instructions/modules corresponding to the apparatus in the embodiment of the present application. The processor 206 executes each of the software programs and modules stored in the memory 202. A functional application and data processing, such as the screen size adaptation method provided by the embodiment of the present application.
存储器202可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。处理器206以及其他可能的组件对存储器202的访问可在存储控制器204的控制下进行。 Memory 202 can include high speed random access memory and can also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid state memory. Access to the memory 202 by the processor 206 and other possible components can be performed under the control of the memory controller 204.
外设接口208将各种输入/输出装置耦合至处理器206以及存储器202。在一些实施例中，外设接口208，处理器206以及存储控制器204可以在单个芯片中实现。在其他一些实例中，他们可以分别由独立的芯片实现。 Peripheral interface 208 couples various input/output devices to processor 206 and memory 202. In some embodiments, peripheral interface 208, processor 206, and memory controller 204 can be implemented in a single chip. In other instances, they can be implemented by separate chips.
射频模块210用于接收以及发送电磁波，实现电磁波与电信号的相互转换，从而与通讯网络或者其他设备进行通讯。The radio frequency module 210 is configured to receive and transmit electromagnetic waves, and realize mutual conversion between electromagnetic waves and electric signals, thereby communicating with a communication network or other devices.
音频模块212向用户提供音频接口，其可包括一个或多个麦克风、一个或者多个扬声器以及音频电路。The audio module 212 provides an audio interface to the user, which may include one or more microphones, one or more speakers, and audio circuitry.
触控屏幕214在用户终端20与用户之间同时提供一个输出及输入界面。可选地，触控屏幕214向用户显示视频输出，这些视频输出的内容可包括文字、图形、视频及其任意组合。The touch screen 214 provides an output and input interface simultaneously between the user terminal 20 and the user. Optionally, the touch screen 214 displays video output to the user, and the content of the video output may include text, graphics, video, and any combination thereof.
可以理解，图1所示的结构仅为示意，用户终端20还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。It will be understood that the structure shown in FIG. 1 is merely illustrative, and the user terminal 20 may also include more or less components than those shown in FIG. 1, or have a different configuration than that shown in FIG. The components shown in Figure 1 can be implemented in hardware, software, or a combination thereof.
第一实施例First embodiment
详情请参见图2，图2示出了本申请第一实施例提供的屏幕尺寸自适应方法的流程示意图，所述方法应用于图1中的用户终端20，所述方法可以包括如下步骤：For details, please refer to FIG. 2 . FIG. 2 is a schematic flowchart diagram of a screen size adaptation method according to the first embodiment of the present application. The method is applied to the user terminal 20 in FIG. 1 , and the method may include the following steps:
步骤S110，获取当前用户终端的屏幕尺寸。Step S110: Acquire a screen size of the current user terminal.
屏幕尺寸可以包括屏幕宽度或屏幕长度中的一个，即运行于所述当前用户终端上的客户端可以获取当前用户终端的屏幕宽度或屏幕长度中的一个。The screen size may include one of a screen width or a screen length, that is, a client running on the current user terminal may acquire one of a screen width or a screen length of the current user terminal.
可选地，客户端可以新建一个工具类LayoutUtils.js。通过let Dimensions＝require(‘Dimensions’)获取到当前用户终端的屏幕的宽度尺寸或高度尺寸，通过var LayoutUtils＝{}去构造一个用于存放宽度尺寸值或高度尺寸值的对象。下面可以以获取屏幕的宽度尺寸为例进行说明。Optionally, the client can create a new tool class LayoutUtils.js. Get the width or height dimension of the screen of the current user terminal by let Dimensions=require(‘Dimensions’), and construct an object for storing the width dimension value or height dimension value by var LayoutUtils={}. The following can be taken as an example to obtain the width of the screen.
在LayoutUtils对象里，给宽度尺寸值设置属性：In the LayoutUtils object, set the properties for the width dimension value:
SCREED_WIDTH：Dimensions.get(‘window’).width， SCREED_WIDTH: Dimensions.get(‘window’).width,
其中，SCREED_WIDTH表示当前用户终端的宽度尺寸值。Among them, SCREED_WIDTH represents the width dimension value of the current user terminal.
步骤S120，获得所述当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值。Step S120: Obtain a ratio of a screen size of the current user terminal to a screen size of a sample user terminal stored in advance.
样本用户终端的屏幕尺寸(例如以宽度尺寸值为例)可以预先存储在当前用户终端的存储器202中，也可以存储在服务器中，由当前用户终端从服务器中获取。The screen size of the sample user terminal (for example, as a width size value) may be pre-stored in the memory 202 of the current user terminal, or may be stored in the server, and acquired by the current user terminal from the server.
在LayoutUtils对象里，通过WIDTH_SCALE:SCREED_WIDTH/a获取当前用户终端的宽度尺寸值与样本用户终端的屏幕的宽度尺寸值的比值。样本用户终端的宽度尺寸值可以设为a，其中a>0，且为常数。In the LayoutUtils object, the ratio of the width dimension value of the current user terminal to the width dimension value of the screen of the sample user terminal is obtained by WIDTH_SCALE: SCREED_WIDTH/a. The width dimension value of the sample user terminal can be set to a, where a>0 and is a constant.
需要注意的是，a为常数值，与样本用户终端的宽度尺寸值有关，例如，若样本用户终端的屏幕的宽度尺寸值为360，则上述代码段可以表示为WIDTH_SCALE:SCREED_WIDTH/360,若样本用户终端的屏幕的宽度尺寸值为420，则上述代码段可以表示为WIDTH_SCALE:SCREED_WIDTH/420。It should be noted that a is a constant value, which is related to the width dimension value of the sample user terminal. For example, if the width dimension value of the screen of the sample user terminal is 360, the above code segment can be expressed as WIDTH_SCALE: SCREED_WIDTH/360, if the sample The width of the screen of the user terminal is 420, and the above code segment can be represented as WIDTH_SCALE: SCREED_WIDTH/420.
接下来可以通过程序代码export default LayoutUtils将LayoutUtils的WIDTH_SCALE这个对象属性暴露给其他的类使用。Next, you can expose the WIDTH_SCALE object property of LayoutUtils to other classes by using the program export default LayoutUtils.
步骤S130，通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积，获得所述控件在所述当前用户终端的屏幕的显示尺寸。Step S130: Obtain a product of the control at the current user terminal by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a control displayed on the sample user terminal. The display size of the screen.
可选地，在本实施例中，控件可以包括文本控件或按钮控件，以文本控件为例，可以通过计算当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与显示于样本用户终端的文本控件的尺寸的乘积的方式，获得文本控件在所述当前用户终端的显示尺寸。Optionally, in this embodiment, the control may include a text control or a button control. Taking the text control as an example, the ratio of the screen size of the current user terminal to the screen size of the sample user terminal may be calculated and displayed on the sample user terminal. The manner in which the product of the size of the text control is multiplied to obtain the display size of the text control at the current user terminal.
其中，文本控件的尺寸可以为文本控件的字号，将当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与文本控件的字号相乘，以获得文本控件在当前用户终端的屏幕的显示尺寸。The size of the text control may be the font size of the text control, and the ratio of the screen size of the current user terminal to the screen size of the sample user terminal is multiplied by the font size of the text control to obtain the display size of the text control on the screen of the current user terminal. .
上述过程可以通过下列代码段实现：The above process can be implemented by the following code snippet:
<Text style＝{{fontSize:17*LayoutUtils.WIDTH_SCALE,color:‘#fff’}}></Text><Text style={{fontSize:17*LayoutUtils.WIDTH_SCALE,color:‘#fff’}}></Text>
其中，Text为文本标签，fontSize为设置文本字体大小的属性，即为字号，*LayoutUtils.WIDTH_SCALE为所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值，color是设置文本颜色的属性，#fff为白色颜色值。Where Text is a text label, fontSize is an attribute for setting a text font size, that is, a font size, *LayoutUtils.WIDTH_SCALE is a ratio of a screen size of the current user terminal to a screen size of a sample user terminal, and color is an attribute for setting a text color. , #fff is a white color value.
以按钮控件为例，通过计算当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与显示于样本用户终端的按钮控件的尺寸的乘积，获得按钮控件在所述当前用户终端的屏幕的显示尺寸。Taking the button control as an example, by calculating the product of the ratio of the screen size of the current user terminal to the screen size of the sample user terminal and the size of the button control displayed on the sample user terminal, the display of the button control on the screen of the current user terminal is obtained. size.
样本用户终端的按钮控件的尺寸可以是按钮控件的预设宽度值及预设高度值，可以通 过将当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值分别与按钮控件的预设宽度值以及预设高度值相乘，获得按钮控件在当前用户终端的屏幕的显示尺寸。The size of the button control of the sample user terminal may be the preset width value of the button control and the preset height value, which can be The ratio of the screen size of the current user terminal to the screen size of the sample user terminal is multiplied by the preset width value of the button control and the preset height value, respectively, to obtain the display size of the button control on the screen of the current user terminal.
上述过程可以通过如下代码段来实现：The above process can be implemented by the following code segment:
<TouchableOpactiy style＝{{width:200*LayoutUtils.WIDTH_SCALE,height:55*LayoutUtils.WIDTH_SCALE}}><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为预设高度值。可以理解，预设宽度值以及预设高度值的数值可以根据实际情况进行调整，上面只是举例不应该理解为是对本申请的限制。Among them, TouchableOpactiy is the control of the corresponding touch, style is the property of the control, width:200*LayoutUtils.WIDTH_SCALE is the ratio of the screen size of the current user terminal to the screen size of the sample user terminal by wide 200*, height:55*LayoutUtils.WIDTH_SCALE is High 55* The ratio of the screen size of the current user terminal to the screen size of the sample user terminal. Width: 200 is the preset width value, and height: 55 is the preset height value. It can be understood that the values of the preset width value and the preset height value may be adjusted according to actual conditions, and the above examples are not to be construed as limiting the application.
步骤S140，基于所述显示尺寸，在所述当前用户终端上显示所述控件。Step S140, displaying the control on the current user terminal based on the display size.
获得显示尺寸后，在当前用户终端上依照获得的显示尺寸对控件进行显示。After the display size is obtained, the control is displayed on the current user terminal in accordance with the obtained display size.
详情请参见图3a和图3b，图3a与图3b分别示出了在两款不同型号的用户终端显示同一界面的现有技术的显示方式，可以明显看出，图3a示出的用户终端的屏幕尺寸与图3b示出的用户终端的屏幕尺寸不一致，但两张图中的文本控件“发布”以及文本控件所处的按钮控件尺寸一致，从而使文本控件“发布”以及文本控件所处的按钮控件在图3a中显得较大，在图3b中显得较小。For details, please refer to FIG. 3a and FIG. 3b. FIG. 3a and FIG. 3b respectively show the prior art display manners of displaying the same interface on two different types of user terminals. It can be clearly seen that the user terminal shown in FIG. 3a The screen size is inconsistent with the screen size of the user terminal shown in Figure 3b, but the text control "Publish" in the two figures and the button control in which the text control is located are the same size, so that the text control "Publish" and the button control where the text control is located It appears larger in Figure 3a and smaller in Figure 3b.
图4a与图4b示出了采用本申请提供的屏幕尺寸自适应方法在两款不同型号的用户终端显示同一界面的示意图，图4a示出的用户终端的型号与图3a示出的用户终端的型号相同，图4b示出的用户终端的型号与图4b示出的用户终端的型号相同。由图4a及图4b可知，控件会根据用户终端的屏幕尺寸进行调整，以使得控件在不同屏幕尺寸上显示的比例大体一致，以改善了控件显示的尺寸与用户终端的屏幕尺寸不协调的问题。4a and 4b are diagrams showing the same interface displayed on two different models of user terminals by using the screen size adaptive method provided by the present application, and the model of the user terminal shown in FIG. 4a and the user terminal shown in FIG. 3a The model number is the same, and the model of the user terminal shown in FIG. 4b is the same as the model of the user terminal shown in FIG. 4b. As can be seen from FIG. 4a and FIG. 4b, the control is adjusted according to the screen size of the user terminal, so that the proportions of the controls displayed on different screen sizes are substantially the same, so as to improve the problem that the size of the control display is inconsistent with the screen size of the user terminal. .
详情请参见图5，图5示出了图2中步骤S130的子步骤示意图，包括如下步骤：For details, please refer to FIG. 5. FIG. 5 is a schematic diagram showing the sub-steps of step S130 in FIG. 2, including the following steps:
步骤S131，通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的文本控件的尺寸的乘积，获得所述文本控件在所述当前用户终端的显示尺寸。Step S131, obtaining a text control in the current user by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a text control displayed on the sample user terminal. The display size of the terminal.
其中，文本控件的尺寸可以为文本控件的字号，将当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与文本控件的字号相乘，来获得文本控件在当前用户终端的屏幕的显示尺寸。The size of the text control may be the font size of the text control, and the ratio of the screen size of the current user terminal to the screen size of the sample user terminal is multiplied by the font size of the text control to obtain the display size of the text control on the screen of the current user terminal. .
上述过程可以通过下列代码段实现：The above process can be implemented by the following code snippet:
<Text style＝{{fontSize:17*LayoutUtils.WIDTH_SCALE,color:‘#fff’}}></Text> <Text style={{fontSize:17*LayoutUtils.WIDTH_SCALE,color:‘#fff’}}></Text>
其中，Text为文本标签，fontSize为设置文本字体大小的属性，*LayoutUtils.WIDTH_SCALE为所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值，color是设置文本颜色的属性，#fff为白色颜色值。Where Text is a text label, fontSize is an attribute for setting a text font size, *LayoutUtils.WIDTH_SCALE is a ratio of a screen size of the current user terminal to a screen size of a sample user terminal, and color is an attribute for setting a text color, #fff is White color value.
步骤S132，通过计算所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的按钮控件的尺寸的乘积，获得所述按钮控件在所述当前用户终端的屏幕的显示尺寸。Step S132, obtaining a button control at the current user terminal by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a button control displayed on the sample user terminal. The display size of the screen.
样本用户终端的按钮控件的尺寸可以是按钮控件的预设宽度以及预设高度值，将当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值分别与按钮控件的预设宽度值以及预设高度值相乘，获得按钮控件在当前用户终端的屏幕的显示尺寸。The size of the button control of the sample user terminal may be a preset width of the button control and a preset height value, and the ratio of the screen size of the current user terminal to the screen size of the sample user terminal and the preset width value of the button control and the preset respectively Multiply the height values to obtain the display size of the button control on the screen of the current user terminal.
上述过程可以通过如下代码段来实现：The above process can be implemented by the following code segment:
<TouchableOpactiy style＝{{width:200*LayoutUtils.WIDTH_SCALE,height:55*LayoutUtils.WIDTH_SCALE}}><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*当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值。Among them, TouchableOpactiy is the control of the corresponding touch, style is the property of the control, width:200*LayoutUtils.WIDTH_SCALE is the ratio of the screen size of the current user terminal to the screen size of the sample user terminal by wide 200*, height:55*LayoutUtils.WIDTH_SCALE is High 55* The ratio of the screen size of the current user terminal to the screen size of the sample user terminal.
详情请参见图6，图6示出了步骤S131的步骤示意图，包括如下步骤：For details, please refer to FIG. 6. FIG. 6 is a schematic diagram showing the steps of step S131, including the following steps:
步骤S1311，获得所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值。Step S1311: Obtain a ratio of a screen size of the current user terminal to a screen size of the sample user terminal.
当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值由步骤S120获得，此处可以通过相关函数来调用此前获得的当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值。The ratio of the screen size of the current user terminal to the screen size of the sample user terminal is obtained by step S120, where the previously obtained ratio of the screen size of the current user terminal to the screen size of the sample user terminal can be called by the correlation function.
步骤S1312，将所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与所述文本控件的字号相乘，获得所述文本控件在所述当前用户终端的屏幕的显示尺寸。Step S1312: Multiply the ratio of the screen size of the current user terminal to the screen size of the sample user terminal by the font size of the text control to obtain the display size of the text control on the screen of the current user terminal.
上述过程可以通过下列代码段实现：The above process can be implemented by the following code snippet:
<Text style＝{{fontSize:17*LayoutUtils.WIDTH_SCALE,color:‘#fff’}}></Text><Text style={{fontSize:17*LayoutUtils.WIDTH_SCALE,color:‘#fff’}}></Text>
其中，Text为文本标签，fontSize为设置文本字体大小的属性，*LayoutUtils.WIDTH_SCALE为所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值，color是设置文本颜色的属性，#fff为白色颜色值。Where Text is a text label, fontSize is an attribute for setting a text font size, *LayoutUtils.WIDTH_SCALE is a ratio of a screen size of the current user terminal to a screen size of a sample user terminal, and color is an attribute for setting a text color, #fff is White color value.
详情请参见图7，图7示出了步骤S132的步骤示意图，包括如下步骤：For details, please refer to FIG. 7. FIG. 7 shows a schematic diagram of the steps of step S132, including the following steps:
步骤S1321，获得所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值。Step S1321: Obtain a ratio of a screen size of the current user terminal to a screen size of the sample user terminal.
当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值由步骤S120获得，此处可以通过相关函数来调用此前获得的当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的 比值。The ratio of the screen size of the current user terminal to the screen size of the sample user terminal is obtained by step S120, where the previously obtained screen size of the current user terminal and the screen size of the sample user terminal can be called by the correlation function. ratio.
步骤S1322，将所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值分别与所述按钮控件的预设宽度值以及按钮控件的预设高度值相乘，获得所述按钮控件在所述当前用户终端的屏幕的显示尺寸。Step S1322: Multiply a ratio of a screen size of the current user terminal to a screen size of the sample user terminal by a preset width value of the button control and a preset height value of the button control to obtain the button control. The display size of the screen of the current user terminal.
上述过程可以通过如下代码段来实现：The above process can be implemented by the following code segment:
<TouchableOpactiy style＝{{width:200*LayoutUtils.WIDTH_SCALE,height:55*LayoutUtils.WIDTH_SCALE}}><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为预设高度值。可以理解，预设宽度值以及预设高度值的数值可以根据实际情况进行调整，不应该理解为是对本申请的限制。Among them, TouchableOpactiy is the control of the corresponding touch, style is the property of the control, width:200*LayoutUtils.WIDTH_SCALE is the ratio of the screen size of the current user terminal to the screen size of the sample user terminal by wide 200*, height:55*LayoutUtils.WIDTH_SCALE is High 55* The ratio of the screen size of the current user terminal to the screen size of the sample user terminal. Width: 200 is the preset width value, and height: 55 is the preset height value. It can be understood that the values of the preset width value and the preset height value may be adjusted according to actual conditions, and should not be construed as limiting the application.
本申请第一实施例提供的屏幕尺寸自适应方法获取当前用户终端的屏幕尺寸，以便计算获得当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值；再根据获得的比值以及在当前用户终端中预先存储的样本用户终端对应的控件的尺寸，获得控件在当前用户终端的显示尺寸，以便在当前用户终端按照获得的显示尺寸显示该控件。与现有的控件显示方法相比，本申请第一实施例能够依据当前用户终端的屏幕尺寸自动调节显示于屏幕中的控件的尺寸，使得控件的显示尺寸与当前用户终端的屏幕尺寸更加协调。The screen size adaptation method provided by the first embodiment of the present application acquires the screen size of the current user terminal, so as to calculate a ratio of the screen size of the current user terminal to the screen size of the sample user terminal; and according to the obtained ratio and the current user terminal. The size of the control corresponding to the sample user terminal stored in advance, and the display size of the control at the current user terminal is obtained, so that the current user terminal displays the control according to the obtained display size. Compared with the existing control display method, the first embodiment of the present application can automatically adjust the size of the control displayed on the screen according to the screen size of the current user terminal, so that the display size of the control is more coordinated with the screen size of the current user terminal.
第二实施例Second embodiment
详情请参见图8，图8示出了本申请第二实施例提供的屏幕尺寸自适应装置，该装置300包括如下模块：For details, please refer to FIG. 8. FIG. 8 shows a screen size adaptation apparatus according to a second embodiment of the present application. The apparatus 300 includes the following modules:
屏幕尺寸获取模块310，用于获取当前用户终端的屏幕尺寸。The screen size obtaining module 310 is configured to acquire a screen size of the current user terminal.
在本实施例中，所述屏幕尺寸获取模块310获取当前用户终端的屏幕尺寸的方式包括：In this embodiment, the manner in which the screen size obtaining module 310 acquires the screen size of the current user terminal includes:
创建一工具类，可选地，可以新建一个工具类LayoutUtils.js。Create a tool class, optionally, you can create a new tool class LayoutUtils.js.
获取所述当前用户终端的屏幕尺寸，可选地，可以通过let Dimensions＝require(‘Dimensions’)获取到当前用户终端的屏幕的宽度尺寸或高度尺寸。Obtaining the screen size of the current user terminal, optionally, the width dimension or height dimension of the screen of the current user terminal may be obtained by let Dimensions=require(‘Dimensions’).
通过创建的工具类构造用于对所述当前用户终端的屏幕尺寸进行存储的对象。An object for storing the screen size of the current user terminal is constructed by the created tool class.
可选地，可以通过var LayoutUtils＝{}去构造一个用于存放宽度尺寸值或高度尺寸值的对象。Optionally, you can use var LayoutUtils={} to construct an object that holds the width or height dimension values.
在本实施例中，所述屏幕尺寸获取模块310还用于获取样本用户终端的屏幕尺寸。In this embodiment, the screen size obtaining module 310 is further configured to acquire a screen size of the sample user terminal.
所述屏幕尺寸获取模块获取样本用户终端的屏幕尺寸的方式包括： The manner in which the screen size acquisition module acquires the screen size of the sample user terminal includes:
从所述当前用户终端中获取所述样本用户终端的屏幕尺寸，其中，所述样本用户终端的屏幕尺寸预先存储在所述当前用户终端中；或Obtaining, from the current user terminal, a screen size of the sample user terminal, wherein a screen size of the sample user terminal is pre-stored in the current user terminal; or
从与所述当前用户终端通信连接的服务器中获取所述样本用户终端的屏幕尺寸，其中，所述样本用户终端的屏幕尺寸预先存储在所述服务器中。Obtaining a screen size of the sample user terminal from a server communicatively coupled to the current user terminal, wherein a screen size of the sample user terminal is pre-stored in the server.
上述的屏幕尺寸可以为屏幕宽度或屏幕长度中的一个。The above screen size may be one of the screen width or the screen length.
比值获得模块320，用于获得所述当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值。The ratio obtaining module 320 is configured to obtain a ratio of a screen size of the current user terminal to a screen size of the sample user terminal stored in advance.
显示尺寸获取模块330，用于通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积，获得所述控件在所述当前用户终端的屏幕的显示尺寸。The display size obtaining module 330 is configured to obtain the control in the product by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a control displayed on the sample user terminal. The display size of the screen of the current user terminal.
控件显示模块340，用于基于所述显示尺寸，在所述当前用户终端上显示所述控件。The control display module 340 is configured to display the control on the current user terminal based on the display size.
图8示出的屏幕尺寸自适应装置与图2示出的方法相对应，在此便不做赘述。The screen size adaptive device shown in FIG. 8 corresponds to the method shown in FIG. 2 and will not be described herein.
其中，详情参见图9，屏幕尺寸获取模块310包括：For details, referring to FIG. 9, the screen size obtaining module 310 includes:
文本显示尺寸子模块311，用于通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的文本控件的尺寸的乘积，获得所述文本控件在所述当前用户终端的显示尺寸。a text display size sub-module 311, configured to obtain the text by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a text control displayed on the sample user terminal The display size of the control at the current user terminal.
其中，文本控件的尺寸可以为文本控件的字号，将当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与文本控件的字号相乘，来获得文本控件在当前用户终端的屏幕的显示尺寸。The size of the text control may be the font size of the text control, and the ratio of the screen size of the current user terminal to the screen size of the sample user terminal is multiplied by the font size of the text control to obtain the display size of the text control on the screen of the current user terminal. .
按钮显示尺寸子模块312，用于通过计算所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的按钮控件的尺寸的乘积，获得所述按钮控件在所述当前用户终端的屏幕的显示尺寸。a button display size sub-module 312, configured to obtain the button control by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a button control displayed on the sample user terminal The display size of the screen of the current user terminal.
样本用户终端的按钮控件的尺寸具体可以是按钮控件的预设宽度之以及预设高度值，将当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值分别与按钮控件的预设宽度值以及预设高度值相乘，获得按钮控件在当前用户终端的屏幕的显示尺寸。The size of the button control of the sample user terminal may specifically be a preset width of the button control and a preset height value, and the ratio of the screen size of the current user terminal to the screen size of the sample user terminal and the preset width value of the button control respectively The preset height values are multiplied to obtain the display size of the button control on the screen of the current user terminal.
本申请实施例提供的屏幕尺寸自适应方法、装置、用户终端及可读存储介质，获取当前用户终端的屏幕尺寸，获取当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值，通过计算上述比值与显示于样本用户终端的控件的尺寸的乘积，获得控件在当前用户终端的屏幕的显示尺寸，并根据获得的显示尺寸，在当前用户终端显示该控件。本申请实施例获取当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值，再根据预先存储的控件尺寸与样本用户终端的屏幕尺寸之间的比例，获得与当前用户终端的屏幕尺寸相适配的控件尺寸，改善了控件显示的尺寸与用户终端的屏幕尺寸不协调的问题。 The screen size adaptation method, the device, the user terminal, and the readable storage medium provided by the embodiment of the present application acquire the screen size of the current user terminal, and obtain the ratio of the screen size of the current user terminal to the screen size of the sample user terminal stored in advance. By calculating the product of the above ratio and the size of the control displayed on the sample user terminal, the display size of the screen of the control at the current user terminal is obtained, and the control is displayed at the current user terminal according to the obtained display size. The embodiment of the present application obtains the ratio of the screen size of the current user terminal to the screen size of the sample user terminal, and obtains the screen size of the current user terminal according to the ratio between the size of the pre-stored control and the screen size of the sample user terminal. The size of the control is improved, and the problem that the size of the control display is inconsistent with the screen size of the user terminal is improved.
需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。It should be noted that each embodiment in the specification is described in a progressive manner, and each embodiment focuses on differences from other embodiments, and the same similar parts between the embodiments are referred to each other. can. For the device type embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiment.
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。In the several embodiments provided by the present application, it should be understood that the disclosed apparatus and method may also be implemented in other manners. The apparatus embodiments described above are merely illustrative, for example, the flowcharts and block diagrams in the figures illustrate the architecture, functionality, and functionality of possible implementations of apparatus, methods, and computer program products according to various embodiments of the present application. operating. In this regard, each block of the flowchart or block diagram can represent a module, a program segment, or a portion of code that includes one or more of the Executable instructions. It should also be noted that, in some alternative implementations, the functions noted in the blocks may also occur in a different order than those illustrated in the drawings. For example, two consecutive blocks may be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending upon the functionality involved. It is also noted that each block of the block diagrams and/or flowcharts, and combinations of blocks in the block diagrams and/or flowcharts, can be implemented in a dedicated hardware-based system that performs the specified function or function. Or it can be implemented by a combination of dedicated hardware and computer instructions.
另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。In addition, each functional module in each embodiment of the present application may be integrated to form a separate part, or each module may exist separately, or two or more modules may be integrated to form a separate part.
所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。The functions, if implemented in the form of software functional modules and sold or used as separate products, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application, which is essential or contributes to the prior art, or a part of the technical solution, may be embodied in the form of a software product, which is stored in a storage medium, including The instructions are used to cause a computer device (which may be a personal computer, server, or network device, etc.) to perform all or part of the steps of the methods described in various embodiments of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, and the like. . It should be noted that, in this context, relational terms such as first and second are used merely to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply such entities or operations. There is any such actual relationship or order between them. Furthermore, the term "comprises" or any other variants thereof is intended to cover a non-exclusive inclusion, such that a process, method, article, or device that comprises a plurality of elements includes not only those elements but also other elements not specifically listed. Or it also includes elements inherent to such a process, method, article or device. An element that is defined by the phrase "comprising a ..." does not exclude the presence of additional equivalent elements in the process, method, item, or device that comprises the element.
以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、 等同替换、改进等，均应包含在本申请的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。The above description is only the preferred embodiment of the present application, and is not intended to limit the present application, and various changes and modifications may be made to the present application. Any modifications made within the spirit and principles of this application, Equivalent substitutions, improvements, etc., are intended to be included within the scope of the present application. It should be noted that similar reference numerals and letters indicate similar items in the following figures, and therefore, once an item is defined in a drawing, it is not necessary to further define and explain it in the subsequent drawings.
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。The foregoing is only a specific embodiment of the present application, but the scope of protection of the present application is not limited thereto, and any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed in the present application. It should be covered by the scope of protection of this application. Therefore, the scope of protection of the present application should be determined by the scope of the claims.
工业实用性Industrial applicability
本申请实施例获取当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值，再根据预先存储的控件尺寸与样本用户终端的屏幕尺寸之间的比例，获得与当前用户终端的屏幕尺寸相适配的控件尺寸，改善了控件显示的尺寸与用户终端的屏幕尺寸不协调的问题。 The embodiment of the present application obtains the ratio of the screen size of the current user terminal to the screen size of the sample user terminal, and obtains the screen size of the current user terminal according to the ratio between the size of the pre-stored control and the screen size of the sample user terminal. The size of the control is improved, and the problem that the size of the control display is inconsistent with the screen size of the user terminal is improved.

Claims (18)

  1. 一种屏幕尺寸自适应方法，其特征在于，所述方法包括：A screen size adaptation method, the method comprising:
    获取当前用户终端的屏幕尺寸；Obtain the screen size of the current user terminal;
    获得所述当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值；Obtaining a ratio of a screen size of the current user terminal to a screen size of a sample user terminal stored in advance;
    通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积，获得所述控件在所述当前用户终端的屏幕的显示尺寸；Obtaining a display of the control on a screen of the current user terminal by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a control displayed on the sample user terminal size;
    基于所述显示尺寸，在所述当前用户终端上显示所述控件。The control is displayed on the current user terminal based on the display size.
  2. 根据权利要求1所述的方法，其特征在于，所述控件包括文本控件，所述通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积，获得所述控件在所述当前用户终端的屏幕的显示尺寸，包括：The method according to claim 1, wherein the control comprises a text control, and the ratio of a screen size of the current user terminal to a screen size of the sample user terminal is calculated and displayed on the sample user The product of the size of the control of the terminal, obtaining the display size of the control on the screen of the current user terminal, including:
    通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的文本控件的尺寸的乘积，获得所述文本控件在所述当前用户终端的显示尺寸。Obtaining a display of the text control at the current user terminal by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a text control displayed on the sample user terminal size.
  3. 根据权利要求2所述的方法，其特征在于，所述通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的文本控件的尺寸的乘积，获得所述文本控件在所述当前用户终端的显示尺寸，包括：The method according to claim 2, wherein said calculating a ratio of a screen size of said current user terminal to a screen size of said sample user terminal and a size of a text control displayed on said sample user terminal a product, obtaining a display size of the text control at the current user terminal, including:
    获得所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值；Obtaining a ratio of a screen size of the current user terminal to a screen size of the sample user terminal;
    将所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与所述文本控件的字号相乘，获得所述文本控件在所述当前用户终端的屏幕的显示尺寸。Multiplying a ratio of a screen size of the current user terminal to a screen size of the sample user terminal by a font size of the text control to obtain a display size of the text control on a screen of the current user terminal.
  4. 根据权利要求1所述的方法，其特征在于，所述控件包括按钮控件，所述通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积，获得所述控件在所述当前用户终端的屏幕的显示尺寸，包括：The method according to claim 1, wherein the control comprises a button control, and the ratio of the screen size of the current user terminal to the screen size of the sample user terminal is calculated and displayed on the sample user The product of the size of the control of the terminal, obtaining the display size of the control on the screen of the current user terminal, including:
    通过计算所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的按钮控件的尺寸的乘积，获得所述按钮控件在所述当前用户终端的屏幕的显示尺寸。Obtaining a display of the button control on a screen of the current user terminal by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a button control displayed on the sample user terminal size.
  5. 根据权利要求4所述的方法，其特征在于，所述通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的文本控件的尺寸的乘积，获得所述文本控件在所述当前用户终端的显示尺寸，包括： The method according to claim 4, wherein said calculating a ratio of a screen size of said current user terminal to a screen size of said sample user terminal and a size of a text control displayed on said sample user terminal a product, obtaining a display size of the text control at the current user terminal, including:
    获得所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值；Obtaining a ratio of a screen size of the current user terminal to a screen size of the sample user terminal;
    将所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值分别与所述按钮控件的预设宽度值以及按钮控件的预设高度值相乘，获得所述按钮控件在所述当前用户终端的屏幕的显示尺寸。Multiplying a ratio of a screen size of the current user terminal to a screen size of the sample user terminal by a preset width value of the button control and a preset height value of the button control to obtain the button control at the current user The display size of the screen of the terminal.
  6. 根据权利要求1-6中任意一项所述的方法，其特征在于，所述屏幕尺寸为屏幕宽度和屏幕长度中的一个。The method of any of claims 1-6, wherein the screen size is one of a screen width and a screen length.
  7. 根据权利要求1所述的方法，其特征在于，所述获取当前用户终端的屏幕尺寸，包括：The method according to claim 1, wherein the obtaining a screen size of the current user terminal comprises:
    创建一工具类；Create a tool class;
    获取所述当前用户终端的屏幕尺寸；Obtaining a screen size of the current user terminal;
    通过创建的工具类构造用于对所述当前用户终端的屏幕尺寸进行存储的对象。An object for storing the screen size of the current user terminal is constructed by the created tool class.
  8. 根据权利要求1所述的方法，其特征在于，所述方法还包括：获取样本用户终端的屏幕尺寸；The method according to claim 1, wherein the method further comprises: acquiring a screen size of the sample user terminal;
    所述获取样本用户终端的屏幕尺寸的方式包括：The manner of obtaining the screen size of the sample user terminal includes:
    从所述当前用户终端中获取所述样本用户终端的屏幕尺寸，其中，所述样本用户终端的屏幕尺寸预先存储在所述当前用户终端中；或Obtaining, from the current user terminal, a screen size of the sample user terminal, wherein a screen size of the sample user terminal is pre-stored in the current user terminal; or
    从与所述当前用户终端通信连接的服务器中获取所述样本用户终端的屏幕尺寸，其中，所述样本用户终端的屏幕尺寸预先存储在所述服务器中。Obtaining a screen size of the sample user terminal from a server communicatively coupled to the current user terminal, wherein a screen size of the sample user terminal is pre-stored in the server.
  9. 一种屏幕尺寸自适应装置，设置于用户终端，其特征在于，所述装置包括：A screen size adaptive device is provided in a user terminal, wherein the device comprises:
    屏幕尺寸获取模块，配置成获取当前用户终端的屏幕尺寸；a screen size obtaining module configured to obtain a screen size of the current user terminal;
    比值获得模块，配置成获得所述当前用户终端的屏幕尺寸与预先存储的样本用户终端的屏幕尺寸的比值；a ratio obtaining module configured to obtain a ratio of a screen size of the current user terminal to a screen size of a pre-stored sample user terminal;
    显示尺寸获取模块，配置成通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的控件的尺寸的乘积，获得所述控件在所述当前用户终端的屏幕的显示尺寸；a display size obtaining module configured to obtain the control by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a control displayed on the sample user terminal The display size of the screen of the current user terminal;
    控件显示模块，配置成基于所述显示尺寸，在所述当前用户终端上显示所述控件。A control display module configured to display the control on the current user terminal based on the display size.
  10. 根据权利要求9所述的装置，其特征在于，所述显示尺寸获取模块包括：The device according to claim 9, wherein the display size acquisition module comprises:
    文本显示尺寸子模块，配置成通过计算所述当前用户终端的屏幕尺寸与所述样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的文本控件的尺寸的乘积，获得所述文本控件在所述当前用户终端的显示尺寸。a text display size sub-module configured to obtain the text control by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a text control displayed on the sample user terminal The display size of the current user terminal.
  11. 根据权利要求10所述的装置，其特征在于，所述文本显示尺寸子模块进一步配置成： The apparatus of claim 10 wherein said text display size sub-module is further configured to:
    获得所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值；Obtaining a ratio of a screen size of the current user terminal to a screen size of the sample user terminal;
    将所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与所述文本控件的字号相乘，获得所述文本控件在所述当前用户终端的屏幕的显示尺寸。Multiplying a ratio of a screen size of the current user terminal to a screen size of the sample user terminal by a font size of the text control to obtain a display size of the text control on a screen of the current user terminal.
  12. 根据权利要求9所述的装置，其特征在于，所述显示尺寸获取模块包括：The device according to claim 9, wherein the display size acquisition module comprises:
    按钮显示尺寸子模块，配置成通过计算所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值与显示于所述样本用户终端的按钮控件的尺寸的乘积，获得所述按钮控件在所述当前用户终端的屏幕的显示尺寸。a button display size sub-module configured to obtain the button control by calculating a product of a ratio of a screen size of the current user terminal to a screen size of the sample user terminal and a size of a button control displayed on the sample user terminal The display size of the screen of the current user terminal.
  13. 根据权利要求12所述的装置，其特征在于，所述按钮显示尺寸子模块进一步配置成：The apparatus of claim 12 wherein said button display size sub-module is further configured to:
    获得所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值；Obtaining a ratio of a screen size of the current user terminal to a screen size of the sample user terminal;
    将所述当前用户终端的屏幕尺寸与样本用户终端的屏幕尺寸的比值分别与所述按钮控件的预设宽度值以及按钮控件的预设高度值相乘，获得所述按钮控件在所述当前用户终端的屏幕的显示尺寸。Multiplying a ratio of a screen size of the current user terminal to a screen size of the sample user terminal by a preset width value of the button control and a preset height value of the button control to obtain the button control at the current user The display size of the screen of the terminal.
  14. 根据权利要求9-13中任意一项所述的装置，其特征在于，所述屏幕尺寸为屏幕宽度或屏幕长度中的一个。Apparatus according to any one of claims 9-13, wherein the screen size is one of a screen width or a screen length.
  15. 根据权利要求9所述的装置，其特征在于，所述屏幕尺寸获取模块进一步配置成：The device according to claim 9, wherein the screen size acquisition module is further configured to:
    创建一工具类；Create a tool class;
    获取所述当前用户终端的屏幕尺寸；Obtaining a screen size of the current user terminal;
    通过创建的工具类构造用于对所述当前用户终端的屏幕尺寸进行存储的对象。An object for storing the screen size of the current user terminal is constructed by the created tool class.
  16. 根据权利要求9所述的装置，其特征在于，所述屏幕尺寸获取模块还进一步配置；The device according to claim 9, wherein the screen size acquisition module is further configured;
    从所述当前用户终端中获取所述样本用户终端的屏幕尺寸，其中，所述样本用户终端的屏幕尺寸预先存储在所述当前用户终端中；或Obtaining, from the current user terminal, a screen size of the sample user terminal, wherein a screen size of the sample user terminal is pre-stored in the current user terminal; or
    从与所述当前用户终端通信连接的服务器中获取所述样本用户终端的屏幕尺寸，其中，所述样本用户终端的屏幕尺寸预先存储在所述服务器中。Obtaining a screen size of the sample user terminal from a server communicatively coupled to the current user terminal, wherein a screen size of the sample user terminal is pre-stored in the server.
  17. 一种用户终端，包括处理器及存储有若干计算机指令的非易失性存储器，其特征在于，所述计算机指令被所述处理器执行时，所述用户终端执行权利要求1-7中任意一项所述的屏幕尺寸自适应方法。A user terminal comprising a processor and a non-volatile memory storing a plurality of computer instructions, wherein the user terminal performs any one of claims 1-7 when the computer instruction is executed by the processor The screen size adaptation method described in the item.
  18. 一种可读存储介质，所述可读存储介质包括计算机程序，其特征在于：A readable storage medium, the readable storage medium comprising a computer program, characterized by:
    所述计算机程序运行时控制所述可读存储介质所在电子设备执行权利要求1-7中任意一项所述的屏幕尺寸自适应方法。 The computer program controlling the electronic device in which the readable storage medium is located to perform the screen size adaptation method according to any one of claims 1-7.
PCT/CN2017/109921 2017-03-31 2017-11-08 Screen size self-adaptation method and device, user terminal and readable storage medium WO2018176841A1 (en)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201710205243.2 2017-03-31
CN201710205243.2A CN106951267A (en) 2017-03-31 2017-03-31 Screen size adaptive approach and device

Publications (1)

Publication Number Publication Date
WO2018176841A1 true WO2018176841A1 (en) 2018-10-04

Family

ID=59475589

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/109921 WO2018176841A1 (en) 2017-03-31 2017-11-08 Screen size self-adaptation method and device, user terminal and readable storage medium

Country Status (2)

Country Link
CN (1) CN106951267A (en)
WO (1) WO2018176841A1 (en)

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106951267A (en) * 2017-03-31 2017-07-14 武汉斗鱼网络科技有限公司 Screen size adaptive approach and device
CN107577490A (en) * 2017-08-03 2018-01-12 武汉斗鱼网络科技有限公司 View autoplacement method and device in a kind of iOS
CN109582314A (en) * 2017-09-29 2019-04-05 广东亿迅科技有限公司 A kind of system and method for mobile application UI automatic adaptation screen
CN109408365A (en) * 2018-08-30 2019-03-01 深圳壹账通智能科技有限公司 Secondary page test method, device, storage medium and computer equipment
CN110493659A (en) * 2019-08-22 2019-11-22 深圳市网心科技有限公司 A kind of implementation method, device and the equipment of video player interactive function
CN112817507B (en) * 2021-01-26 2023-11-03 广州虎牙科技有限公司 Control adaptation method, device, electronic equipment and storage medium

Citations (5)

* Cited by examiner, † Cited by third party
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 (en) * 2013-09-30 2014-01-22 山西云途信息技术有限公司 Method and device for adapting to screens, of different sizes, of mobile terminals
CN103870197A (en) * 2014-03-21 2014-06-18 天脉聚源(北京)传媒科技有限公司 Method and device for processing picture
CN106406794A (en) * 2016-09-14 2017-02-15 乐视控股（北京）有限公司 Screen adapting method and device
CN106951267A (en) * 2017-03-31 2017-07-14 武汉斗鱼网络科技有限公司 Screen size adaptive approach and device

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105653254B (en) * 2014-12-03 2019-07-09 科大讯飞股份有限公司 Primary interface adaptation method, device and the electronic equipment using it
CN106155641B (en) * 2015-03-24 2019-09-13 北京神州泰岳软件股份有限公司 A kind of method and system of mobile terminal application interface dynamic generation
CN104866353B (en) * 2015-05-27 2019-03-15 小米科技有限责任公司 The method and device of the Show Button
CN106484424A (en) * 2016-10-18 2017-03-08 武汉斗鱼网络科技有限公司 A kind of method and system obtaining the control being adapted to screen

Patent Citations (5)

* Cited by examiner, † Cited by third party
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 (en) * 2013-09-30 2014-01-22 山西云途信息技术有限公司 Method and device for adapting to screens, of different sizes, of mobile terminals
CN103870197A (en) * 2014-03-21 2014-06-18 天脉聚源(北京)传媒科技有限公司 Method and device for processing picture
CN106406794A (en) * 2016-09-14 2017-02-15 乐视控股（北京）有限公司 Screen adapting method and device
CN106951267A (en) * 2017-03-31 2017-07-14 武汉斗鱼网络科技有限公司 Screen size adaptive approach and device

Also Published As

Publication number Publication date
CN106951267A (en) 2017-07-14

Similar Documents

Publication Publication Date Title
WO2018176841A1 (en) Screen size self-adaptation method and device, user terminal and readable storage medium
US10311600B2 (en) Method and system for setting interface element colors
CN107705349B (en) System and method for augmented reality aware content
CN108427546B (en) Full screen adaptation method of display device, display device and storage medium
US10181203B2 (en) Method for processing image data and apparatus for the same
CN106997283B (en) Information processing method and electronic equipment
US10354124B2 (en) Electronic apparatus and controlling method for improve the image quality preference of skin area
US12008167B2 (en) Action recognition method and device for target object, and electronic apparatus
EP3917131A1 (en) Image deformation control method and device and hardware device
WO2020024580A1 (en) Graphic drawing method and apparatus, device, and storage medium
CN109725970B (en) Method and device for displaying application client window and electronic equipment
WO2015043442A1 (en) Method, device and mobile terminal for text-to-speech processing
US10685642B2 (en) Information processing method
US10887195B2 (en) Computer system, remote control notification method and program
WO2017101390A1 (en) Picture display method and apparatus
WO2018228341A1 (en) Page switching processing method and apparatus, user terminal, and readable storage medium
KR102360271B1 (en) Methods and devices for determining the color of a text
WO2018205548A1 (en) Dialog box control display method and device, readable storage medium, and user terminal
CN106775249B (en) Method for setting communication shortcut and electronic equipment
KR20150095523A (en) Electronic apparatus and method for extracting color in electronic apparatus
WO2023160453A1 (en) Display control method and apparatus, electronic device and storage medium
CN109840057B (en) Terminal protocol display method, device, equipment and storage medium
CN112328193A (en) Multi-terminal screen combination method, device, equipment and computer storage medium
CN108132767B (en) Application window preview method and system
CN111010526A (en) Interaction method and device in video communication

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 17903864

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 17903864

Country of ref document: EP

Kind code of ref document: A1