[go: up one dir, main page]

CN107590240B - Method and device for adjusting size of characters for page rendering - Google Patents

Method and device for adjusting size of characters for page rendering Download PDF

Info

Publication number
CN107590240B
CN107590240B CN201710822553.9A CN201710822553A CN107590240B CN 107590240 B CN107590240 B CN 107590240B CN 201710822553 A CN201710822553 A CN 201710822553A CN 107590240 B CN107590240 B CN 107590240B
Authority
CN
China
Prior art keywords
text size
size
rendering
text
design draft
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
Application number
CN201710822553.9A
Other languages
Chinese (zh)
Other versions
CN107590240A (en
Inventor
王亚伟
陈少杰
张文明
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Green Wheat Field Technology Development Co.,Ltd.
Original Assignee
Wuhan Douyu Network Technology Co Ltd
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 Wuhan Douyu Network Technology Co Ltd filed Critical Wuhan Douyu Network Technology Co Ltd
Priority to CN201710822553.9A priority Critical patent/CN107590240B/en
Publication of CN107590240A publication Critical patent/CN107590240A/en
Application granted granted Critical
Publication of CN107590240B publication Critical patent/CN107590240B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • Document Processing Apparatus (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本发明实施例提供了一种用于页面渲染的调整文字大小的方法及装置,其中的方法包括:获取进行页面渲染的移动设备的屏幕宽度;获取所述移动设备的屏幕宽度与预设设计稿的宽度的比值;获取所述预设设计稿的第一文字大小的范围;根据所述第一文字大小的范围和所述比值,调整与所述屏幕宽度对应的第二文字大小;根据所述第二文字大小,进行页面渲染。本发明解决了现有技术在页面渲染时文字适配存在偏差的技术问题。

Figure 201710822553

Embodiments of the present invention provide a method and device for adjusting text size for page rendering, wherein the method includes: acquiring the screen width of a mobile device that performs page rendering; acquiring the screen width of the mobile device and a preset design draft obtain the range of the first text size of the preset design draft; adjust the second text size corresponding to the screen width according to the range of the first text size and the ratio; Text size for page rendering. The present invention solves the technical problem of deviation in text adaptation during page rendering in the prior art.

Figure 201710822553

Description

Method and device for adjusting size of characters for page rendering
Technical Field
The invention relates to the technical field of computers, in particular to a method and a device for adjusting the size of characters for page rendering.
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.
Drawings
FIG. 1 is a flowchart of a method for resizing text for page rendering according to an embodiment of the present invention;
FIG. 2 is a block diagram of a text resizing device for use in page rendering according to an embodiment of the present invention;
FIG. 3 is a block diagram of a computer-readable storage medium according to an embodiment of the present invention;
fig. 4 is a block diagram of a computer device according to an embodiment of the present invention.
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:
Figure BDA0001406662970000061
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:
Figure BDA0001406662970000071
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:
Figure BDA0001406662970000081
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.

Claims (6)

1.一种用于页面渲染的调整文字大小的方法,其特征在于,包括:1. a method for adjusting text size for page rendering, is characterized in that, comprising: 获取进行页面渲染的移动设备的屏幕宽度;Get the screen width of the mobile device for page rendering; 获取所述移动设备的屏幕宽度与预设设计稿的宽度的比值;其中,预设设计稿是用于页面渲染的设计稿;Obtain the ratio of the screen width of the mobile device to the width of the preset design draft; wherein, the preset design draft is a design draft used for page rendering; 获取所述预设设计稿的第一文字大小的范围;其中,所述第一文字大小为所述设计稿的字体大小,所述预设设计稿的第一文字大小的范围为12px~44px,且所述第一文字大小为偶数值;Obtain the range of the first text size of the preset design draft; wherein, the first text size is the font size of the design draft, the range of the first text size of the preset design draft is 12px to 44px, and the The first text size is an even value; 根据所述第一文字大小的范围和所述比值,调整与所述屏幕宽度对应的第二文字大小;所述第二文字大小为在所述屏幕上进行渲染时的字体大小;According to the range of the first text size and the ratio, adjust the second text size corresponding to the screen width; the second text size is the font size when rendering on the screen; 根据所述第二文字大小,进行页面渲染;performing page rendering according to the second text size; 所述根据所述第二文字大小,进行页面渲染,包括:根据所述第二文字大小,设置待渲染页面的行内样式;基于所述行内样式,进行页面渲染;所述设置待渲染页面的行内样式包括在渲染模版上写入对应的文字大小样式。The performing page rendering according to the second text size includes: setting the inline style of the page to be rendered according to the second text size; performing page rendering based on the inline style; setting the inline style of the page to be rendered Styles include writing corresponding text size styles on the rendering template. 2.如权利要求1所述的方法,其特征在于,所述根据所述第一文字大小的范围和所述比值,调整与所述屏幕宽度对应的第二文字大小,包括:2. The method according to claim 1, wherein the adjusting the second text size corresponding to the screen width according to the range of the first text size and the ratio comprises: 根据所述第一文字大小的范围,获得所述第一文字大小的集合;obtaining the set of the first character size according to the range of the first character size; 根据所述第一文字大小的集合中每个元素与所述比值之间的乘积,获得与所述屏幕宽度对应的第二文字大小的集合;According to the product between each element in the set of the first text size and the ratio, obtain a set of the second text size corresponding to the screen width; 从所述第二文字大小的集合中选取用于进行渲染的第二文字大小。A second text size for rendering is selected from the set of second text sizes. 3.一种用于页面渲染的调整文字大小的装置,其特征在于,包括:3. A device for adjusting text size for page rendering, characterized in that it comprises: 第一获取模块,获取进行页面渲染的移动设备的屏幕宽度;The first obtaining module obtains the screen width of the mobile device for page rendering; 第二获取模块,用于获取所述移动设备的屏幕宽度与预设设计稿的宽度的比值;其中,预设设计稿是用于页面渲染的设计稿;The second obtaining module is used to obtain the ratio of the screen width of the mobile device to the width of the preset design draft; wherein, the preset design draft is a design draft used for page rendering; 第三获取模块,用于获取所述预设设计稿的第一文字大小的范围;其中,所述第一文字大小为所述设计稿的字体大小,所述预设设计稿的第一文字大小的范围为12px~44px,且所述第一文字大小为偶数值;The third obtaining module is configured to obtain the range of the first text size of the preset design draft; wherein, the first text size is the font size of the design draft, and the range of the first text size of the preset design draft is 12px~44px, and the first text size is an even value; 调整模块,用于根据所述第一文字大小的范围和所述比值,调整与所述屏幕宽度对应的第二文字大小;所述第二文字大小为在所述屏幕上进行渲染时的字体大小;an adjustment module, configured to adjust the second text size corresponding to the screen width according to the range of the first text size and the ratio; the second text size is the font size when rendering on the screen; 渲染模块,用于根据所述第二文字大小,进行页面渲染;所述渲染模块具体用于:根据所述第二文字大小,设置待渲染页面的行内样式;基于所述行内样式,进行页面渲染;所述设置待渲染页面的行内样式包括在渲染模版上写入对应的文字大小样式。a rendering module, configured to perform page rendering according to the second text size; the rendering module is specifically configured to: set the inline style of the page to be rendered according to the second text size; perform page rendering based on the inline style ; The setting of the inline style of the page to be rendered includes writing the corresponding text size style on the rendering template. 4.如权利要求3所述的装置,其特征在于,所述调整模块还用于:4. The device of claim 3, wherein the adjustment module is further used for: 根据所述第一文字大小的范围,获得所述第一文字大小的集合;obtaining the set of the first character size according to the range of the first character size; 根据所述第一文字大小的集合中每个元素与所述比值之间的乘积,获得与所述屏幕宽度对应的第二文字大小的集合;According to the product between each element in the set of the first text size and the ratio, obtain a set of the second text size corresponding to the screen width; 从所述第二文字大小的集合中选取用于进行渲染的的第二文字大小。A second text size for rendering is selected from the set of second text sizes. 5.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现以下步骤:5. A computer-readable storage medium on which a computer program is stored, characterized in that the program realizes the following steps when the program is executed by a processor: 获取进行页面渲染的移动设备的屏幕宽度;Get the screen width of the mobile device for page rendering; 获取所述移动设备的屏幕宽度与预设设计稿的宽度的比值;其中,预设设计稿是用于页面渲染的设计稿;Obtain the ratio of the screen width of the mobile device to the width of the preset design draft; wherein, the preset design draft is a design draft used for page rendering; 获取所述预设设计稿的第一文字大小的范围;其中,所述第一文字大小为所述设计稿的字体大小,所述预设设计稿的第一文字大小的范围为12px~44px,且所述第一文字大小为偶数值;Obtain the range of the first text size of the preset design draft; wherein, the first text size is the font size of the design draft, the range of the first text size of the preset design draft is 12px to 44px, and the The first text size is an even value; 根据所述第一文字大小的范围和所述比值,调整与所述屏幕宽度对应的第二文字大小;所述第二文字大小为在所述屏幕上进行渲染时的字体大小;According to the range of the first text size and the ratio, adjust the second text size corresponding to the screen width; the second text size is the font size when rendering on the screen; 根据所述第二文字大小,进行页面渲染;所述根据所述第二文字大小,进行页面渲染,包括:根据所述第二文字大小,设置待渲染页面的行内样式;基于所述行内样式,进行页面渲染;所述设置待渲染页面的行内样式包括在渲染模版上写入对应的文字大小样式。Performing page rendering according to the second text size; performing page rendering according to the second text size includes: setting an inline style of the page to be rendered according to the second text size; based on the inline style, Perform page rendering; the setting the inline style of the page to be rendered includes writing the corresponding text size style on the rendering template. 6.一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述程序时实现以下步骤:6. A computer device comprising a memory, a processor and a computer program stored on the memory and running on the processor, wherein the processor implements the following steps when executing the program: 获取进行页面渲染的移动设备的屏幕宽度;Get the screen width of the mobile device for page rendering; 获取所述移动设备的屏幕宽度与预设设计稿的宽度的比值;其中,预设设计稿是用于页面渲染的设计稿;Obtain the ratio of the screen width of the mobile device to the width of the preset design draft; wherein, the preset design draft is a design draft used for page rendering; 获取所述预设设计稿的第一文字大小的范围;其中,所述第一文字大小为所述设计稿的字体大小,所述预设设计稿的第一文字大小的范围为12px~44px,且所述第一文字大小为偶数值;Obtain the range of the first text size of the preset design draft; wherein, the first text size is the font size of the design draft, the range of the first text size of the preset design draft is 12px to 44px, and the The first text size is an even value; 根据所述第一文字大小的范围和所述比值,调整与所述屏幕宽度对应的第二文字大小;所述第二文字大小为在所述屏幕上进行渲染时的字体大小;According to the range of the first text size and the ratio, adjust the second text size corresponding to the screen width; the second text size is the font size when rendering on the screen; 根据所述第二文字大小,进行页面渲染;所述根据所述第二文字大小,进行页面渲染,包括:根据所述第二文字大小,设置待渲染页面的行内样式;基于所述行内样式,进行页面渲染;所述设置待渲染页面的行内样式包括在渲染模版上写入对应的文字大小样式。Performing page rendering according to the second text size; performing page rendering according to the second text size includes: setting an inline style of the page to be rendered according to the second text size; based on the inline style, Perform page rendering; the setting the inline style of the page to be rendered includes writing the corresponding text size style on the rendering template.
CN201710822553.9A 2017-09-13 2017-09-13 Method and device for adjusting size of characters for page rendering Active CN107590240B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710822553.9A CN107590240B (en) 2017-09-13 2017-09-13 Method and device for adjusting size of characters for page rendering

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710822553.9A CN107590240B (en) 2017-09-13 2017-09-13 Method and device for adjusting size of characters for page rendering

Publications (2)

Publication Number Publication Date
CN107590240A CN107590240A (en) 2018-01-16
CN107590240B true CN107590240B (en) 2021-01-01

Family

ID=61051282

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710822553.9A Active CN107590240B (en) 2017-09-13 2017-09-13 Method and device for adjusting size of characters for page rendering

Country Status (1)

Country Link
CN (1) CN107590240B (en)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110532488A (en) * 2018-05-23 2019-12-03 腾讯科技(深圳)有限公司 Webpage rendering method, device and electronic equipment
CN113761421B (en) * 2021-01-29 2025-08-19 北京沃东天骏信息技术有限公司 Page character size adjusting method and device, electronic equipment and storage medium
CN113987380A (en) * 2021-10-21 2022-01-28 上海淇玥信息技术有限公司 Method, device and electronic device for web page layout

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105045893A (en) * 2015-07-31 2015-11-11 北京奇虎科技有限公司 Adaptation method and apparatus for picture in webpage

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102436452A (en) * 2010-09-29 2012-05-02 英业达股份有限公司 Webpage providing system and method for dynamically adjusting font size
US9195637B2 (en) * 2010-11-03 2015-11-24 Microsoft Technology Licensing, Llc Proportional font scaling
CN102930851A (en) * 2012-10-16 2013-02-13 深圳市融创天下科技股份有限公司 Font size self-adapting method, system and terminal equipment
CN104978433A (en) * 2015-07-16 2015-10-14 无锡天脉聚源传媒科技有限公司 Web page display method and device
CN106557501B (en) * 2015-09-28 2020-03-17 腾讯科技(深圳)有限公司 Screen adaptation method and device for page module

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105045893A (en) * 2015-07-31 2015-11-11 北京奇虎科技有限公司 Adaptation method and apparatus for picture in webpage

Also Published As

Publication number Publication date
CN107590240A (en) 2018-01-16

Similar Documents

Publication Publication Date Title
WO2017088509A1 (en) Page customization method and device
US20180082450A1 (en) Data drawing method and apparatus, terminal, and storage medium
CN105741334B (en) Thermodynamic chart providing method and device
CN103064691B (en) Make the method and apparatus of desktop icon of electronic equipment
CN107590240B (en) Method and device for adjusting size of characters for page rendering
CN106776969A (en) Page adaptation method, device and electronic equipment
CN107516290B (en) Image conversion network acquisition method, device, computing device and storage medium
US20190138899A1 (en) Processing apparatus, processing method, and nonvolatile recording medium
WO2016058156A1 (en) Method and apparatus for aligning form elements of web page
CN104517307B (en) A kind of animation method and device
WO2017148057A1 (en) Software version generation method and apparatus
CN104424620B (en) Image processing device and image processing program
CN108399605B (en) Image processing method, terminal device and computer-readable storage medium
US10127001B2 (en) Virtualizing applications for per-monitor displaying
CN107977923B (en) Image processing method, image processing device, electronic equipment and computer readable storage medium
CN119961546A (en) An intelligent adaptive layout engine and page component reconstruction method and device
JP2010262559A (en) GUI adjustment program, GUI adjustment apparatus, and information processing method.
CN105843631B (en) A method of improving system firmware burn writing speed
CN119834963A (en) Verification code generation method, device, equipment, medium and product
CN102739699A (en) Map display method under browser/server mode and client thereof
CN103543974A (en) Method and system for improving font clarity
DE112016006020T5 (en) PICTORIAL PROCESSOR FOR PORTABLE DEVICE
US9213681B2 (en) Method and system to modify source content to fit into a target display area in a browser
CN103744832B (en) A kind of data multiplexing method and device
CN105373380A (en) Picture slicing method and picture slicing 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
TR01 Transfer of patent right

Effective date of registration: 20250917

Address after: 100098 Beijing City Haidian District Zhongguancun South Street No. 10 Yinhai Building 5th Floor South 513 Room

Patentee after: Beijing Green Wheat Field Technology Development Co.,Ltd.

Country or region after: China

Address before: 430000 East Lake Development Zone, Wuhan City, Hubei Province, No. 1 Software Park East Road 4.1 Phase B1 Building 11 Building

Patentee before: WUHAN DOUYU NETWORK TECHNOLOGY Co.,Ltd.

Country or region before: China