CN106919375B - Screen self-adaption method and system on mobile terminal equipment - Google Patents
Screen self-adaption method and system on mobile terminal equipment Download PDFInfo
- Publication number
- CN106919375B CN106919375B CN201511000915.3A CN201511000915A CN106919375B CN 106919375 B CN106919375 B CN 106919375B CN 201511000915 A CN201511000915 A CN 201511000915A CN 106919375 B CN106919375 B CN 106919375B
- Authority
- CN
- China
- Prior art keywords
- platform
- style file
- mobile terminal
- style
- selecting
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Telephone Function (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention relates to the field of mobile terminal equipment, and discloses a screen self-adaption method and a screen self-adaption system on the mobile terminal equipment. The method comprises the following steps: acquiring platform parameters of the mobile terminal equipment; selecting a style file according to the platform parameters, and loading the selected style file; rendering the user interface component according to the loaded style file; displaying the rendered user interface component. The invention can reuse the style files by grading the style files, thereby reducing the burden of application program developers, greatly quickening the development progress of the application program by means of the standard user interface provided by interface designers, and realizing the self-adaption of the application program to different platforms.
Description
Technical Field
The invention relates to a mobile terminal device, in particular to a screen self-adaption method and a screen self-adaption system on the mobile terminal device.
Background
The current society is stepping into the era of mobile internet, and the updating speed of mobile terminal equipment is greatly increased. A variety of mobile terminal devices become indispensable articles which cannot be removed in daily life, and the requirement of people on the mobile terminal devices is further increased by the proposal of the concept of Internet plus.
In order to meet the needs of people, various mobile terminal devices, such as pads, mobile phones, and bracelets, have been introduced by mobile terminal device providers. The platforms of the mobile terminal devices are different, and the screen sizes are different. For an application provider of a mobile terminal device to develop an application to accommodate such a large number of devices with different sizes and different platforms on the market, a lot of time and effort are consumed by the application developer. For the current mobile market, time determines the market.
For a native developer, it is not difficult to develop an application program, but it is a very tedious matter to develop an application program that can be used on mobile terminal devices with different sizes and platforms and enables a user to experience a good experience. But for such a cumbersome matter it is a relatively simple and efficient matter for the interface designer. How to realize the application software adaptive to the screens of various mobile terminal devices under the assistance of interface designers is a problem to be solved urgently.
Disclosure of Invention
The invention aims to provide a screen self-adaption method and a screen self-adaption system on mobile terminal equipment, which can reduce the burden of an application program developer and accelerate the development progress of an application program.
In order to achieve the above object, the present invention provides a screen adaptation method on a mobile terminal device, the method comprising: acquiring platform parameters of the mobile terminal equipment; selecting a style file according to the platform parameters, and loading the selected style file; rendering the user interface component according to the loaded style file; displaying the rendered user interface component.
Preferably, the platform parameters include an operating system used by the mobile terminal device; the style file comprises a platform-level style file; the selecting a style file according to the platform parameter includes: selecting a platform-level style file according to an operating system used by the mobile terminal equipment; the loading the selected style file comprises: loading the platform-level style file.
Preferably, the style file further comprises a platform-independent style file; the method further comprises the following steps: selecting the platform-independent style file and loading the platform-independent style file.
Preferably, the platform parameters comprise screen parameters of the mobile terminal device; the style file comprises a custom style file; the selecting a style file according to the platform parameter includes: selecting a corresponding custom style file according to the screen parameters of the mobile terminal equipment; the loading the selected style file comprises: and loading the custom style file.
Preferably, the user interface component is a standard user interface component.
Accordingly, the present invention provides a screen adaptation system on a mobile terminal device, the system comprising: the acquisition module is used for acquiring platform parameters of the mobile terminal equipment; the selecting and loading module is used for selecting the style file according to the platform parameters and loading the selected style file; the rendering module is used for rendering the user interface component according to the loaded style file; and the display module is used for displaying the rendered user interface component by a user.
Preferably, the platform parameters include an operating system used by the mobile terminal device; the style file comprises a platform-level style file; the selecting and loading module is further used for selecting the platform-level style file according to the operating system used by the mobile terminal device and loading the selected platform-level style file.
Preferably, the style file further comprises a platform-independent style file; the selection and loading module is further configured to select the platform-independent style file and to document the selected platform-independent style file.
Preferably, the platform parameters comprise screen parameters of the mobile terminal device; the style file comprises a custom style file; the selecting and loading module is also used for selecting a corresponding custom style file according to the screen parameters of the mobile terminal equipment and loading the selected custom style file.
Preferably, the user interface component is a standard user interface component.
The invention can reuse the style files by grading the style files, thereby reducing the burden of application program developers, greatly quickening the development progress of the application program by means of the standard user interface provided by interface designers, and realizing the self-adaption of the application program to different platforms.
Additional features and advantages of the invention will be set forth in the detailed description which follows.
Drawings
The accompanying drawings, which are included to provide a further understanding of the invention and are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description serve to explain the principles of the invention and not to limit the invention. In the drawings:
FIG. 1 is a diagram illustrating a screen adaptation method on a mobile terminal device according to the present invention;
FIG. 2 is a diagram illustrating a directory structure of a style file according to the present invention;
FIG. 3 is a schematic diagram of a screen adaptation system on a mobile terminal device provided by the present invention;
fig. 4 is a flow chart of screen adaptation on a mobile terminal device provided by the present invention.
Description of the reference numerals
100 acquisition module 200 selection and loading module
300 rendering module 400 display module
Detailed Description
The following detailed description of embodiments of the invention refers to the accompanying drawings. It should be understood that the detailed description and specific examples, while indicating the present invention, are given by way of illustration and explanation only, not limitation.
To enable screen adaptation by the interface designer, a standard user interface component provided by the interface designer may be used. Fig. 1 shows a screen adaptation method on a mobile terminal device provided by the present invention, which includes: acquiring platform parameters of the mobile terminal device (step 101); selecting a style file according to the platform parameters, and loading the selected style file (step 103); rendering the user interface component according to the loaded style file (step 105); displaying the rendered user interface component (step 107).
Because the mobile terminal uses a plurality of operating systems, such as an android operating system, an IOS operating system, and a windows phone, in order to obtain parameters of each platform, the parameters of each platform can be obtained through a cross-platform interface API, which can be implemented based on a phonegap.
The acquired platform parameters may include an operating system used by the platform, an operating system version, and screen parameters (e.g., size, resolution), etc.
The cross-platform interface may return XHR or JSON formatted data. The cross-platform interface may be implemented by a scripting language (Javascript).
After obtaining the platform parameters, the style file to be used may be selected according to the platform parameters. Fig. 2 illustrates an engineering screen adaptive file directory structure. If the platform uses the operating system as android, a platform-level style file may be selected first, for example, a platform-level css under a merge/android directory is selected. Then, a style file which is independent of a platform under the common/css directory can be selected, and finally, a custom style file for a screen can be selected.
After selecting a style file, the selected style file may be loaded. Furthermore, the standard user interface component can be rendered according to the loaded style file, so that the user interface component conforming to the mobile terminal equipment is obtained and then displayed, and the screen self-adaption process is completed. The standard UI component may be a cross-platform component, and may be constructed by a scripting language such as Html5, Style Sheet (CSS), and javascript.
Fig. 3 illustrates a screen adaptive system on a mobile terminal device provided in the present invention, which specifically includes an obtaining module 100, configured to obtain platform parameters of the mobile terminal device; a selecting and loading module 200, configured to select a style file according to the platform parameter, and load the selected style file; a rendering module 300 for rendering the user interface component according to the selected style file; a display module 400 for displaying the rendered user interface component by a user. In particular, the acquisition module may be implemented by a cross-platform interface API, an interaction module, and a device information module. The cross-platform interface API can send the platform parameter acquisition request to the equipment information module through the interaction module, and the equipment information module can return the platform parameters to the cross-platform interface API through the interaction module. The selecting and loading module is also used for selecting the platform-level style file according to the operating system used by the mobile terminal equipment and recording the selected platform-level style file.
The selecting and loading module 200 may further select a corresponding custom style file according to the selected platform-independent style file and the screen parameter, and load the selected custom style file.
Fig. 4 shows a processing flow of the screen adaptive method provided by the present invention, and the specific processing steps are as follows:
step 401: sending a request for acquiring platform parameters through a cross-platform interface API module;
step 403: the cross-platform interface API module transmits the request to the equipment information module through the interaction module;
step 405: after receiving the request, the equipment information module acquires the platform parameters and delivers the platform parameters to the interaction module;
step 407: the interaction module packages the platform parameters delivered by the equipment information module into JSON or XHR format and delivers the platform parameters to the cross-platform interface API module;
step 409: and selecting a platform-level style file for loading according to the operating system used by the mobile terminal equipment in the platform parameters acquired by the cross-platform interface API module, then loading a platform-independent public style file, and finally loading a custom style file suitable for the current screen according to the screen information of the mobile terminal equipment in the platform parameters.
Step 411: rendering the UI component into a style which is in line with a screen of the mobile terminal equipment through a rendering module;
step 413: the UI component is displayed.
The preferred embodiments of the present invention have been described in detail with reference to the accompanying drawings, however, the present invention is not limited to the specific details of the above embodiments, and various simple modifications can be made to the technical solution of the present invention within the technical idea of the present invention, and these simple modifications are within the protective scope of the present invention.
It should be noted that the various features described in the above embodiments may be combined in any suitable manner without departing from the scope of the invention. The invention is not described in detail in order to avoid unnecessary repetition.
In addition, any combination of the various embodiments of the present invention is also possible, and the same should be considered as the disclosure of the present invention as long as it does not depart from the spirit of the present invention.
Claims (4)
1. A screen adaptive method on a mobile terminal device, characterized in that the method comprises:
acquiring platform parameters of the mobile terminal equipment;
selecting a style file according to the platform parameters, and loading the selected style file;
rendering the user interface component according to the loaded style file;
displaying the rendered user interface component;
the platform parameters comprise an operating system used by the mobile terminal equipment; the style file comprises a platform-level style file;
the selecting a style file according to the platform parameter includes: selecting a platform-level style file according to an operating system used by the mobile terminal equipment;
the loading the selected style file comprises: loading the platform-level style file;
the style files further comprise platform-independent style files;
the method further comprises the following steps: selecting the platform-independent style file and loading the platform-independent style file;
the platform parameters comprise screen parameters of the mobile terminal equipment; the style file comprises a custom style file;
the selecting a style file according to the platform parameter includes: selecting a corresponding custom style file according to the screen parameters of the mobile terminal equipment;
the loading the selected style file comprises: and loading the custom style file.
2. The screen adaptation method of claim 1, wherein the user interface component is a standard user interface component.
3. A screen adaptation system on a mobile terminal device, the system comprising:
the acquisition module is used for acquiring platform parameters of the mobile terminal equipment;
the selecting and loading module is used for selecting the style file according to the platform parameters and loading the selected style file;
the rendering module is used for rendering the user interface component according to the loaded style file;
a display module for displaying the rendered user interface component by a user;
the platform parameters comprise an operating system used by the mobile terminal equipment; the style file comprises a platform-level style file;
the selecting and loading module is also used for selecting a platform-level style file according to an operating system used by the mobile terminal equipment and loading the selected platform-level style file;
the style files further comprise platform-independent style files;
the selecting and loading module is also used for selecting the platform-independent style files and recording the selected platform-independent style files;
the platform parameters comprise screen parameters of the mobile terminal equipment; the style file comprises a custom style file;
the selecting and loading module is also used for selecting a corresponding custom style file according to the screen parameters of the mobile terminal equipment and loading the selected custom style file.
4. The screen adaptation system of claim 3, wherein the user interface component is a standard user interface component.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201511000915.3A CN106919375B (en) | 2015-12-28 | 2015-12-28 | Screen self-adaption method and system on mobile terminal equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201511000915.3A CN106919375B (en) | 2015-12-28 | 2015-12-28 | Screen self-adaption method and system on mobile terminal equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106919375A CN106919375A (en) | 2017-07-04 |
| CN106919375B true CN106919375B (en) | 2020-06-05 |
Family
ID=59455169
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201511000915.3A Active CN106919375B (en) | 2015-12-28 | 2015-12-28 | Screen self-adaption method and system on mobile terminal equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106919375B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107729074B (en) * | 2017-09-25 | 2021-02-23 | 百富计算机技术（深圳）有限公司 | Method and device for loading user interface of POS application |
| CN108427660A (en) * | 2018-01-17 | 2018-08-21 | 山东浪潮商用系统有限公司 | A kind of response type large-size screen monitors methods of exhibiting and device |
| CN110262857A (en) * | 2019-06-20 | 2019-09-20 | 郑州悉知信息科技股份有限公司 | A kind of front end response method and device |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103488777A (en) * | 2013-09-30 | 2014-01-01 | 乐视网信息技术（北京）股份有限公司 | Method and system for adjusting webpage display effect |
| CN104572042A (en) * | 2013-10-15 | 2015-04-29 | 航天信息股份有限公司 | Cross-platform middleware device of mobile terminal equipment and implementation method of cross-platform middleware device of mobile terminal equipment |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| TWI292108B (en) * | 2005-12-28 | 2008-01-01 | Via Tech Inc | Fault-tolerant methods and systems for managing webpage presentation |
| CN101453511B (en) * | 2007-12-07 | 2012-08-01 | 北京闻言科技有限公司 | Method for mobile phone platform UI interface adaptation |
| CN102023849A (en) * | 2009-09-22 | 2011-04-20 | 北京搜狗科技发展有限公司 | Processing method and device for multi-platform multi-resolution application program interface |
| CN104049859A (en) * | 2013-03-15 | 2014-09-17 | 青岛海尔电子有限公司 | Intelligent terminal and display control method of soft control interface thereof |
-
2015
- 2015-12-28 CN CN201511000915.3A patent/CN106919375B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103488777A (en) * | 2013-09-30 | 2014-01-01 | 乐视网信息技术（北京）股份有限公司 | Method and system for adjusting webpage display effect |
| CN104572042A (en) * | 2013-10-15 | 2015-04-29 | 航天信息股份有限公司 | Cross-platform middleware device of mobile terminal equipment and implementation method of cross-platform middleware device of mobile terminal equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106919375A (en) | 2017-07-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109460233B (en) | Method, device, terminal equipment and medium for updating native interface display of page | |
| TWI552588B (en) | Apparatuses and methods for web application converter systems | |
| CN107577622B (en) | Method, device and storage medium for simulating rear-end interface | |
| CN105335132B (en) | Method, device and system for customizing application program function | |
| CN107463405B (en) | Application program updating method and device | |
| CN106874519B (en) | Page display method and device | |
| CN110764805B (en) | Client non-inductive upgrading method, device, terminal and storage medium | |
| CN106325647B (en) | A UI adjustment method, device and mobile terminal | |
| CN110221848A (en) | APP method for updating pages, device, electronic equipment and storage medium | |
| CN104199920A (en) | Adaptation method and device for display of web application | |
| CN105528132B (en) | Text Entry display methods and device applied to browser | |
| CN104965723B (en) | The operation method and device of application program | |
| CN106919375B (en) | Screen self-adaption method and system on mobile terminal equipment | |
| CN104219295A (en) | Server-side configuration based information display method and system for mobile equipment | |
| CN111158689B (en) | Cross-system UI application generation method, device and computer-readable storage medium | |
| US10108477B2 (en) | Mobile device diagnostics | |
| CN107168738A (en) | Application tool management method, device, equipment and storage medium | |
| CN105094776A (en) | List processing method and device | |
| CN106330561A (en) | UI dynamic setting method and device | |
| CN109800378A (en) | Content processing method, device and electronic equipment based on custom browser | |
| CN102984345A (en) | Method and device for displaying texts on terminal device in network | |
| CN112150431B (en) | UI vision walking method and device, storage medium and electronic device | |
| CN106528078B (en) | method and device for dynamically adjusting payment mode based on react-native | |
| CN117707583B (en) | Page updating method, electronic device and page updating system | |
| CN107092472B (en) | Dynamic publishing method and device |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |