Background
Currently, the android operating system is widely applied to various mobile devices due to its open source and good operability. In the android system, page rendering is typically done by dynamic interpreted scripting language JavaScript.
In the prior art, a rem adaptation mode is generally adopted in page rendering, where rem refers to a unit of font size relative to a root element. However, there are many kinds of mobile devices, such as mobile phones, tablet computers, and the like, and the types of browsers in various mobile devices are also varied, such as IE browsers, google browsers, 360 browsers, and the like, the processing mechanisms of the browsers for rem are inconsistent, some browsers adopt a rounding method, some browsers only reserve integers by adopting a tail-removing method, and the like, which causes the size of characters displayed by the system to deviate from the size of characters in a previous design draft when rendering a page.
Therefore, the technical problem of deviation of character adaptation in page rendering in the prior art is solved.
Disclosure of Invention
The embodiment of the invention provides a method and a device for adjusting the size of characters for page rendering, which are used for solving the technical problem of deviation of character adaptation in page rendering in the prior art.
In a first aspect, the present invention provides a method for resizing text for page rendering, the method comprising:
acquiring the screen width of the mobile equipment for page rendering;
acquiring the ratio of the screen width of the mobile equipment to the width of a preset design draft;
acquiring the range of the first character size of the preset design draft;
adjusting a second character size corresponding to the screen width according to the range of the first character size and the ratio;
and rendering the page according to the size of the second character.
Optionally, the range of the first character size of the preset design draft is 12px to 44px, and the first character size is an even number.
Optionally, the adjusting, according to the range of the first text size and the ratio, a second text size corresponding to the screen width includes:
obtaining a set of the first character size according to the range of the first character size;
obtaining a set of second character sizes corresponding to the screen width according to the product of each element in the set of the first character sizes and the ratio;
and selecting a second character size for rendering from the set of second character sizes.
Optionally, the rendering a page according to the second text size includes:
setting an inline style of the page to be rendered according to the size of the second character;
and performing page rendering based on the inline style.
Based on the same inventive concept, a second aspect of the present invention provides a text resizing device for page rendering, the device comprising:
the first acquisition module is used for acquiring the screen width of the mobile equipment for page rendering;
the second acquisition module is used for acquiring the ratio of the screen width of the mobile equipment to the width of a preset design draft;
the third acquisition module is used for acquiring the range of the first character size of the preset design draft;
the adjusting module is used for adjusting the size of a second character corresponding to the width of the screen according to the range of the size of the first character and the ratio;
and the rendering module is used for rendering the page according to the size of the second character.
Optionally, the range of the first character size of the preset design draft is 12px to 44px, and the first character size is an even number.
Optionally, the adjusting module is further configured to:
obtaining a set of the first character size according to the range of the first character size;
obtaining a set of second character sizes corresponding to the screen width according to the product of each element in the set of the first character sizes and the ratio;
and selecting a second character size for rendering from the set of second character sizes.
Optionally, the rendering module is further configured to:
setting an inline style of the page to be rendered according to the size of the second character;
and performing page rendering based on the inline style.
Based on the same inventive concept, a third aspect of the present invention provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of:
acquiring the screen width of the mobile equipment for page rendering;
acquiring the ratio of the screen width of the mobile equipment to the width of a preset design draft;
acquiring the range of the first character size of the preset design draft;
adjusting a second character size corresponding to the screen width according to the range of the first character size and the ratio;
and rendering the page according to the size of the second character.
Based on the same inventive concept, a fourth aspect of the present invention provides a computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the following steps when executing the program:
acquiring the screen width of the mobile equipment for page rendering;
acquiring the ratio of the screen width of the mobile equipment to the width of a preset design draft;
acquiring the range of the first character size of the preset design draft;
adjusting a second character size corresponding to the screen width according to the range of the first character size and the ratio;
and rendering the page according to the size of the second character.
One or more technical solutions in the embodiments of the present application have at least one or more of the following technical effects:
the method for adjusting the size of the characters for page rendering comprises the steps of obtaining the screen width of a mobile device for page rendering, obtaining the ratio of the screen width of the mobile device to the width of a preset design draft, obtaining the range of the first character size of the preset design draft, adjusting the size of a second character corresponding to the screen width according to the range of the first character size and the ratio, and rendering a page according to the size of the second character. In the method provided by the invention, on one hand, for various browsers in the mobile equipment, the size of the second character corresponding to the screen width is adjusted directly according to the range of the size of the first character and the ratio of the screen width of the mobile equipment to the width of the preset design draft, namely, the size of the second character is adjusted by adopting a uniform mode for different browsers without performing rem unit conversion, so that the deviation between the actual font and the font of the design draft caused by the difference of font processing mechanisms of different browsers can be avoided; on the other hand, before the second character size is adjusted, the range of the first character size is obtained in advance, and the calculation efficiency can be improved through pre-calculation. Therefore, the invention realizes the accurate adaptation of the size of the second character in the page rendering to the size of the first character in the preset design draft, improves the technical effect of the calculation efficiency and solves the technical problem of the deviation of the character adaptation in the page rendering in the prior art.
Detailed Description
The embodiment of the invention provides a method and a device for adjusting the size of characters for page rendering, which are used for solving the technical problem of deviation of character adaptation in page rendering in the prior art.
In order to solve the technical problems, the technical scheme provided by the invention is as follows:
a method of resizing text for page rendering, comprising: acquiring the screen width of the mobile equipment for page rendering; acquiring the ratio of the screen width of the mobile equipment to the width of a preset design draft; acquiring the range of the first character size of the preset design draft; and adjusting a second character size corresponding to the screen width according to the range of the first character size and the ratio, and rendering a page according to the second character size.
In the method provided by the invention, on one hand, for various browsers in the mobile equipment, the size of the second character corresponding to the screen width is adjusted directly according to the range of the size of the first character and the ratio of the screen width of the mobile equipment to the width of the preset design draft, namely, the size of the second character is adjusted by adopting a uniform mode for different browsers without performing rem unit conversion, so that the deviation between the actual font and the font of the design draft caused by the difference of font processing mechanisms of different browsers can be avoided; on the other hand, before the second character size is adjusted, the range of the first character size is obtained in advance, and the calculation efficiency can be improved through the calculation. Therefore, the invention realizes the accurate adaptation of the size of the second character in the page rendering to the size of the first character in the preset design draft, improves the technical effect of the calculation efficiency and solves the technical problem of the deviation of the character adaptation in the page rendering in the prior art.
The technical solutions of the present invention are described in detail below with reference to the drawings and specific embodiments, and it should be understood that the specific features in the embodiments and examples of the present invention are described in detail in the technical solutions of the present application, and are not limited to the technical solutions of the present application, and the technical features in the embodiments and examples of the present application may be combined with each other without conflict.
Example one
In a first aspect, the present invention provides a method for resizing text for page rendering, please refer to fig. 1. It should be noted that the mobile device of the method provided in this embodiment includes a mobile phone, a tablet computer, a smart watch, or other devices with an intelligent operating system, and the present invention is not limited in particular. In addition, the operating system may be an Android system or other systems, which is not specifically limited in the present invention.
In order to make the description of the first embodiment clearer, the implementation steps of the method provided by the embodiment of the present application will be described in detail with reference to fig. 1.
First, step S101 is executed to obtain the screen width of the mobile device performing page rendering.
In a specific implementation process, the screen width of the mobile device is the width of the screen resolution, the resolutions of different mobile devices are different, and the width of the screen resolution can be obtained through JavaScript, which is specifically implemented as a code of document.
Then, step S102 is executed: and acquiring the ratio of the screen width of the mobile equipment to the width of a preset design draft.
Specifically, the preset design is a design for page rendering, and is generally set by a front-end engineer according to a situation, and the preset design may have a WIDTH of 650, 750, 800 pixels, and so on, for example, the screen WIDTH of the mobile device is represented by WIN _ WIDTH, and the preset design WIDTH is represented by UI _ WIDTH, and a ratio of the screen WIDTH of the mobile device to the WIDTH of the preset design may be obtained through JavaScript calculation, and specific implementation codes are as follows:
wherein getFitVal is a function for obtaining a ratio, tofixed (n) is a rounding function applied in JS, n represents decimal digit to be reserved, the value range of n can be 0-20, JS can report errors when n exceeds 20, and fitVal is the ratio WIN _ WIDTH/UI _ WIDTH of the screen WIDTH of the mobile device and the WIDTH of a preset design draft.
Step S103 is performed next: and acquiring the range of the first character size of the preset design draft.
Specifically, the font size for page rendering may include multiple types, and in a specific implementation process, the range of the first text size in the default design draft may be set according to an actual situation or an actual need, for example, the range may be 10-50, 12-44, 20-60, and the like, and is not limited specifically herein.
After the ratio of the screen width of the mobile device to the width of the preset design draft and the range of the first text size of the preset design draft are obtained, step S104 is then executed: and adjusting the size of a second character corresponding to the screen width according to the range of the size of the first character and the ratio.
In a specific implementation process, the text size of the preset design draft can be converted by defining a conversion function fitFsNum, so as to obtain a second text size corresponding to the screen width. The specific implementation code for obtaining the second character size corresponding to the screen width is as follows:
isstring is used to determine whether a string is a character string, a parsint () function is used to parse a string, and a replace () method is used to replace some characters with others in a string.
In a preferred embodiment, the first character size of the preset design manuscript is in a range of 12px to 44px, and the first character size is an even number. According to a great deal of practice and research of the applicant, when the size range of the characters in the pre-designed manuscript is 12-44, the size range of the characters of a common design manuscript can be basically covered, if the size of the characters beyond the range value is sometimes separated from the normal size range of the characters, the actual conversion value is low, in addition, the size of the first characters in the pre-designed manuscript is set to be an even number value, so that a good rendering effect can be obtained in various different browsers, and because if the size of the first characters is an odd number value, part of the browsers cannot render the characters corresponding to the characters well. Of course, if most browsers can render the text well when the first text size is the base value, it is also possible to set the first text size to an odd value. The method and the device can be used for carrying out adaptive conversion on the size of the characters of the preset design draft directly through the width of the current screen, and can effectively reduce rendering errors caused by inconsistent decimal processing of a rem value by the browser.
Specifically, a method for obtaining the size of the second character is introduced, and when the size of the second character, that is, the target character is obtained according to the range and the ratio of the size of the first character, there are various implementation manners, for example: obtaining a set of first character sizes according to the range of the first character sizes; then, according to the product of each element in the first character size set and the ratio, obtaining a second character size set corresponding to the screen width; and selecting a second character size for rendering from the set of second character sizes.
Taking the first text size range as {12,14,16,18 … … 38,40,42,44}, and taking the ratio of the screen width of the mobile device to the width of the default design draft as 0.5 as an example, further detailed description is given. In a specific implementation procedure, the above scaling function fitFsNum may be cycled through, i.e. each element value in the first text size range is multiplied by the above ratio to obtain a second text size corresponding to the first text size range, where the set of second text sizes is { fs12: "font-size: 12 px", fs14: "font-size:14 px". fs44: "font-size: 44 px" }, so as to obtain the second text size, and a specific implementation code is as follows:
the invention adopts the conversion function fitFsNum fsNum fitVal to pre-calculate and convert the character size of the preset design draft before page rendering, which can improve the calculation efficiency and more accurately finish the adaptation of the character size of the design draft.
Finally, step S105 is executed: and rendering the page according to the size of the second character.
Specifically, after the second text size is obtained, page rendering may be performed according to the second text size. As an alternative embodiment, the inline style may be set according to the second text size; and then performing page rendering based on the inline style. In a specific implementation process, after the second character size is obtained, a corresponding character size pattern can be written in the rendering template, that is, an inline pattern is set, so that accurate adaptation of the character size can be realized. For example, the first text size is 28px, < divstyle ═ G _ font _ style.fs28 } >/v, and then applying the above first text size at 375 screen width has the following effect: 14px, < div style ═ font-size; ">/i.e. the second character size under the adaptation 375 screen width is 14px, by the method of the present invention, before the JS renders the page, the adapted second character font size corresponding to the first character font size needed for rendering can be pre-calculated by the JS, and the accurate adaptation of the character size is realized in the form of inline style, so that the calculation efficiency is improved, and the JS execution performance can be ensured.
Based on the same inventive concept, the application also provides a device corresponding to the method for adjusting the size of the text for page rendering in the first embodiment, which is detailed in the second embodiment.
Example two
The present embodiment provides a text resizing device for page rendering, please refer to fig. 2, the device includes:
a first obtaining module 201, which obtains a screen width of a mobile device performing page rendering;
a second obtaining module 202, configured to obtain a ratio of a screen width of the mobile device to a width of a preset design draft;
a third obtaining module 203, configured to obtain a range of the first text size of the preset design draft;
an adjusting module 204, configured to adjust a second text size corresponding to the screen width according to the range of the first text size and the ratio;
and the rendering module 205 is configured to perform page rendering according to the second text size.
In the apparatus for adjusting a text size for page rendering provided in this embodiment, a range of a first text size of the preset design draft is 12px to 44px, and the first text size is an even number.
In the text resizing apparatus for page rendering according to the embodiment, the adjusting module 204 is further configured to:
obtaining a set of the first character size according to the range of the first character size;
obtaining a set of second character sizes corresponding to the screen width according to the product of each element in the set of the first character sizes and the ratio; and selecting a second character size for rendering from the set of second character sizes.
In the text resizing apparatus for page rendering provided in this embodiment, the rendering module 205 is further configured to:
setting an inline style of the page to be rendered according to the size of the second character;
and performing page rendering based on the inline style.
Various changes and specific examples of the text resizing method for page rendering in the embodiment of fig. 1 are also applicable to the text resizing device for page rendering in the embodiment, and the device in the embodiment can be clearly known by those skilled in the art from the foregoing detailed description of the text resizing method for page rendering, so for the brevity of the description, detailed descriptions are not repeated here.
Based on the same inventive concept, the present application further provides a computer-readable storage medium corresponding to the method for adjusting the size of a text for page rendering in the first embodiment, which is described in detail in the third embodiment.
EXAMPLE III
The present embodiment provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of:
acquiring the screen width of the mobile equipment for page rendering;
acquiring the ratio of the screen width of the mobile equipment to the width of a preset design draft;
acquiring the range of the first character size of the preset design draft;
adjusting a second character size corresponding to the screen width according to the range of the first character size and the ratio;
and rendering the page according to the size of the second character.
Various changes and specific examples of the text resizing method for page rendering in the embodiment of fig. 1 are also applicable to the computer-readable storage medium of the embodiment, and those skilled in the art can clearly understand the computer-readable storage medium in the embodiment through the foregoing detailed description of the text resizing method for page rendering, so that for the brevity of the description, detailed descriptions thereof are omitted here.
Based on the same inventive concept, the application also provides computer equipment corresponding to the method for adjusting the size of the text for page rendering in the first embodiment, which is detailed in the fourth embodiment.
Example four
The embodiment provides a computer device, which includes a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the following steps:
acquiring the screen width of the mobile equipment for page rendering;
acquiring the ratio of the screen width of the mobile equipment to the width of a preset design draft;
acquiring the range of the first character size of the preset design draft;
adjusting a second character size corresponding to the screen width according to the range of the first character size and the ratio;
and rendering the page according to the size of the second character.
Various changes and specific examples of the text resizing method for page rendering in the embodiment of fig. 1 are also applicable to the computer device of the embodiment, and those skilled in the art can clearly know the computer device of the embodiment through the foregoing detailed description of the text resizing method for page rendering, so that the detailed description is omitted here for the brevity of the description.
One or more technical solutions in the embodiments of the present application have at least one or more of the following technical effects:
the method for adjusting the size of the characters for page rendering comprises the steps of obtaining the screen width of a mobile device for page rendering, obtaining the ratio of the screen width of the mobile device to the width of a preset design draft, obtaining the range of the first character size of the preset design draft, adjusting the size of a second character corresponding to the screen width according to the range of the first character size and the ratio, and rendering a page according to the size of the second character. In the method provided by the invention, on one hand, for various browsers in the mobile equipment, the size of the second character corresponding to the screen width is adjusted directly according to the range of the size of the first character and the ratio of the screen width of the mobile equipment to the width of the preset design draft, namely, the size of the second character is adjusted by adopting a uniform mode for different browsers without performing rem unit conversion, so that the deviation between the actual font and the font of the design draft caused by the difference of font processing mechanisms of different browsers can be avoided; on the other hand, before the second character size is adjusted, the range of the first character size is obtained in advance, and the calculation efficiency can be improved through the calculation. Therefore, the invention realizes the accurate adaptation of the size of the second character in the page rendering to the size of the first character in the preset design draft, improves the technical effect of the calculation efficiency and solves the technical problem of the deviation of the character adaptation in the page rendering in the prior art.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
It will be apparent to those skilled in the art that various changes and modifications may be made in the present invention without departing from the spirit and scope of the invention. Thus, if such modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include such modifications and variations.