CN110532488A - Webpage rendering method, device and electronic equipment - Google Patents
Webpage rendering method, device and electronic equipment Download PDFInfo
- Publication number
- CN110532488A CN110532488A CN201810500680.1A CN201810500680A CN110532488A CN 110532488 A CN110532488 A CN 110532488A CN 201810500680 A CN201810500680 A CN 201810500680A CN 110532488 A CN110532488 A CN 110532488A
- Authority
- CN
- China
- Prior art keywords
- webpage
- electronic equipment
- root element
- font size
- mentioned
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
The application provides a kind of webpage rendering method, device and electronic equipment, and above-mentioned webpage rendering method includes: to obtain webpage to be rendered；Obtain the screen width of electronic equipment；The document properties label of the webpage is obtained, the document properties label includes configuration information；According to the configuration information, the webpage viewport to match with the screen width of electronic equipment is rendered；Obtain the ratio of the pixel of the webpage and the font size of webpage root element；When the screen width of the electronic equipment is less than or equal to predetermined threshold, according to the ratio of the font size of the screen width of the electronic equipment, the pixel of the webpage and webpage root element and the predetermined threshold, the font size of required webpage root element is calculated；Processing is zoomed in and out to the webpage according to the font size of the webpage root element.The application may be implemented webpage and show on different devices unanimously, optimize user experience, and reduce webpage and show abnormal risk in special equipment.
Description
Technical field
This application involves mobile terminal technical field of webpage processing more particularly to a kind of webpage rendering methods, device and electronics
Equipment.
Background technique
Webpage (Web) front-end technology of mobile terminal includes: HyperText Markup Language (HyperText Markup
Language；Hereinafter referred to as: HTML), cascading style sheets (Cascading Style Sheets；Hereinafter referred to as: CSS) with
Javascript.Due to electronic equipment size, resolution ratio and/or device pixel ratio (Device Pixel Ratio on the market；
It is hereinafter referred to as: DPR) all irregular, and browser itself is without from adaption function and interface, to make different sizes and DPR
HTML5 page performance in equipment is consistent, and existing related art scheme is to have used media (media) the inquiry cooperation of CSS3 more
Part CSS resource file and more parts of picture resource files reach optimal display effect.
But the existing most important defect of the relevant technologies is to need while coordinating front end engineer and designer, is setting
It counts and cuts the figure stage, designer needs to provide the design original text of adaptation different schemes in design, and marks and give front end engineer
It uses, and another side, in the written in code stage, front end engineer needs to write code to different screen sizes, thus needs
More parts of CSS files, the either human cost of exploitation or design, all greatly slattern, and huge size of code also will
Lead to the inconvenience in maintenance；On the other hand, existing the relevant technologies can only reach best adaptation for the screen of specific dimensions, no
Expression effect with size screens may be inconsistent, or even exception is showed under the screen of certain off-brand computers, this is not only difficult to survey
Examination, it is also possible to which unsightly, user experience is poor for the page for causing user to see；In addition, in the page rendering stage, media inquiry
Be not on an electronic device it is completely compatible, part type, system or browser need specially treated, this also results in exploitation
It is inconvenient.
Summary of the invention
To overcome the problems in correlation technique, the application provides a kind of webpage rendering method, device and electronic equipment.
Embodiments herein adopts the following technical scheme that
In a first aspect, the embodiment of the present application provides a kind of webpage rendering method, comprising: obtain webpage to be rendered；It obtains
The screen width of electronic equipment, wherein the screen of the electronic equipment is for showing the webpage to be rendered；Obtain the net
The document properties label of page, wherein the document properties label includes configuration information, and the configuration information is for characterizing webpage view
The corresponding relationship of the screen width of the width and electronic equipment of mouth；According to the configuration information, rendering is set with the electronics
The webpage viewport that standby screen width matches；Obtain the ratio of the pixel of the webpage and the font size of webpage root element；
When the screen width of the electronic equipment is less than or equal to predetermined threshold, according to the screen width of the electronic equipment, described
The ratio of the font size of the pixel and webpage root element of webpage and the predetermined threshold, calculate the word of required webpage root element
Body size；Processing is zoomed in and out to the webpage according to the font size of the webpage root element, in the electronic equipment
The rendering page after scaling processing is shown on screen.
In above-mentioned webpage rendering method, after obtaining webpage to be rendered, the screen width of electronic equipment is obtained, and obtain
The document properties label of above-mentioned webpage, above-mentioned document properties label includes configuration information, and above-mentioned configuration information is for characterizing webpage
The corresponding relationship of the screen width of the width of viewport and the electronic equipment, according to above-mentioned configuration information, rendering and above-mentioned electronics
Then the webpage viewport that the screen width of equipment matches obtains the pixel of above-mentioned webpage and the font size of webpage root element
Ratio, when the screen width of above-mentioned electronic equipment be less than or equal to predetermined threshold when, according to the screen width of above-mentioned electronic equipment,
The ratio of the font size of the pixel and webpage root element of above-mentioned webpage and above-mentioned predetermined threshold, calculate required webpage root element
Font size, processing is finally zoomed in and out to above-mentioned webpage according to the font size of above-mentioned webpage root element, so as to reality
Existing webpage shows unanimously on different devices, optimizes user experience, and reduce webpage showed in special equipment it is abnormal
Risk.
Second aspect, the embodiment of the present application provide a kind of webpage rendering device, comprising: module are obtained, for obtaining to wash with watercolours
The webpage of dye obtains the screen width of electronic equipment, wherein the screen of the electronic equipment is for showing the net to be rendered
Page；And obtain the document properties label of the webpage, wherein the document properties label includes configuration information, the configuration
Information is used to characterize the corresponding relationship of the width of webpage viewport and the screen width of the electronic equipment；Rendering module is used for root
According to the configuration information, the webpage viewport to match with the screen width of the electronic equipment is rendered；The acquisition module, is also used
In the ratio of the font size for the pixel and webpage root element for obtaining the webpage；When the screen width of the electronic equipment is less than
Or when being equal to predetermined threshold, according to the screen width of the electronic equipment, the font of the pixel of the webpage and webpage root element
The ratio of size and the predetermined threshold calculate the font size of required webpage root element；The rendering module, is also used to root
The font size of the webpage root element calculated according to the acquisition module zooms in and out processing to the webpage, in the electricity
The rendering page after scaling processing is shown on the screen of sub- equipment.
In above-mentioned webpage rendering device, after acquisition module obtains webpage to be rendered, the screen for obtaining electronic equipment is wide
Degree, and the document properties label of above-mentioned webpage is obtained, it include configuration information in above-mentioned document properties label, above-mentioned configuration information is used
In the corresponding relationship of the screen width of the width and electronic equipment of characterization webpage viewport, rendering module matches confidence according to above-mentioned
Breath, the webpage viewport that rendering matches with the screen width of electronic equipment, then obtain module obtain the pixel of above-mentioned webpage with
The ratio of the font size of webpage root element is obtained when the screen width of above-mentioned electronic equipment is less than or equal to predetermined threshold
Module according to the ratio of the font size of the screen width of above-mentioned electronic equipment, the pixel of above-mentioned webpage and webpage root element and on
Predetermined threshold is stated, calculates the font size of required webpage root element, last rendering module is according to the word of above-mentioned webpage root element
Body size zooms in and out processing to above-mentioned webpage, so as to realize that webpage shows unanimously on different devices, optimizes user
Experience, and reduce webpage and show abnormal risk in special equipment.
The third aspect, the embodiment of the present application provide a kind of electronic equipment, including memory, processor and are stored in described deposit
On reservoir and the computer program that can run on the processor, when the processor executes the computer program, realize
Method as described above.
Fourth aspect, the embodiment of the present application provide a kind of non-transitorycomputer readable storage medium, are stored thereon with meter
Calculation machine program, the computer program realize method as described above when being executed by processor.
It should be understood that above general description and following detailed description be only it is exemplary and explanatory, not
The application can be limited.
Detailed description of the invention
The drawings herein are incorporated into the specification and forms part of this specification, and shows the implementation for meeting the application
Example, and together with specification it is used to explain the principle of the application.
Fig. 1 is the flow chart of the application webpage rendering method one embodiment；
Fig. 2 (a)~Fig. 2 (c) is the display effect of webpage under different sized devices in the application webpage rendering method；
Fig. 3 is the flow chart of another embodiment of the application webpage rendering method；
Fig. 4 is the flow chart of the application webpage rendering method further embodiment；
Fig. 5 is the flow chart of the application webpage rendering method further embodiment；
Fig. 6 (a) is not illustrated using the comparison of normal page when webpage rendering method provided by the present application and the excessive page
Figure；
Fig. 6 (b) is the comparison of normal page and the too small entanglement page when not using webpage rendering method provided by the present application
Schematic diagram；
Fig. 7 (a)~(d) is to show on various sizes of electronic equipment using after webpage rendering method provided by the present application
Webpage；
Fig. 8 is the structural schematic diagram of the application webpage rendering device one embodiment；
Fig. 9 is the structural schematic diagram of another embodiment of the application webpage rendering device；
Figure 10 is the structural schematic diagram of the application electronic equipment one embodiment.
Through the above attached drawings, it has been shown that the specific embodiment of the application will be hereinafter described in more detail.These attached drawings
It is not intended to limit the range of the application design in any manner with verbal description, but is by referring to specific embodiments
Those skilled in the art illustrate the concept of the application.
Specific embodiment
Example embodiments are described in detail here, and the example is illustrated in the accompanying drawings.Following description is related to
When attached drawing, unless otherwise indicated, the same numbers in different drawings indicate the same or similar elements.Following exemplary embodiment
Described in embodiment do not represent all embodiments consistent with the application.On the contrary, they be only with it is such as appended
The example of the consistent device and method of some aspects be described in detail in claims, the application.
The application provides a kind of webpage rendering method, and webpage may be implemented and show on different devices unanimously, optimize use
Family experience, and reduce webpage and show abnormal risk in special equipment.Webpage rendering method provided by the present application can be with
For on the market adaptation in need mobile web front-end development in, such as the HTML5 page of product official website, public platform
The HTML5 page, the mobile network space HTML5 page and other HTML5 leading page etc..Because can accomplish to be adapted to certainly,
So that page performance is consistent on distinct device, therefore can allow webpage to become beautiful, and reduce it is certain it is uncommon, be difficult to test
Equipment on show entanglement risk.Webpage rendering method provided by the present application may operate in the browser of electronic equipment installation
On, rely on browser kernel and carry out webpage rendering, for example, above-mentioned browser kernel can for Webkit kernel,
Trident kernel, Gecko kernel, Presto kernel or Blink kernel etc..
Fig. 1 is the flow chart of the application webpage rendering method one embodiment, as shown in Figure 1, above-mentioned webpage rendering method
May include:
Step 101, webpage to be rendered is obtained.
Wherein, above-mentioned webpage to be rendered can only provide a design original text in the design phase, cut figure by design original text
When, it need to only cut out a picture resource.When stating webpage to be rendered in design, it can be designed according to preset original width
Webpage to be rendered is stated, above-mentioned preset original width can in specific implementation, according to system performance and/or realization demand etc.
Sets itself, the present embodiment are not construed as limiting the size of above-mentioned preset original width, for example, above-mentioned preset initial width
Degree can be 640 pixel (pixel；Hereinafter referred to as: px).
Specifically, after receiving for the operation information of the link of the webpage to be rendered showed on electronic equipment,
The browser of electronic equipment obtains above-mentioned webpage to be rendered.Wherein, above-mentioned for the net to be rendered showed on electronic equipment
The operation information of the link of page can be the operation of user's click or the link of the above-mentioned webpage to be rendered of long-pressing, the present embodiment pair
The concrete operations form of aforesaid operations information is not construed as limiting.
Step 102, the screen width of electronic equipment is obtained.
Wherein, the screen of above-mentioned electronic equipment can be clothes for showing above-mentioned webpage to be rendered, above-mentioned electronic equipment
Business device, such as: cloud server；It may be smart phone, tablet computer, smartwatch, personal computer (Personal
Computer；Hereinafter referred to as: PC) or the intelligent terminals such as vehicle intelligent terminal, shape of the present embodiment to above-mentioned electronic equipment
State is not construed as limiting.
Step 103, the document properties label of above-mentioned webpage is obtained, wherein above-mentioned document properties label includes configuration information,
Above-mentioned configuration information is used to characterize the corresponding relationship of the width of webpage viewport and the screen width of above-mentioned electronic equipment.
Wherein, the document properties label of above-mentioned webpage can be meta label, and meta label is in html web page source code
In an important html tag, meta label can be used to describe the attribute of a html web page document, such as author, date
With time, webpage description, keyword, page furbishing etc..In the present embodiment, above-mentioned meta label includes configuration information, above-mentioned to match
Confidence ceases the corresponding relationship for characterizing the width of webpage viewport and the screen width of above-mentioned electronic equipment.
Specifically, the corresponding relationship of the screen width of the width and above-mentioned electronic equipment of above-mentioned webpage viewport can be with are as follows: on
State the width and above-mentioned electronics of the width webpage viewport equal or above-mentioned with the screen width of above-mentioned electronic equipment of webpage viewport
The ratio of the screen width of equipment is 1:2 etc., and the present embodiment is not construed as limiting this, but the present embodiment is with above-mentioned webpage viewport
It is illustrated for width is equal with the screen width of above-mentioned electronic equipment.
Step 104, according to above-mentioned configuration information, the webpage viewport to match with the screen width of above-mentioned electronic equipment is rendered
(viewport)。
Wherein, it is used to show the region of above-mentioned webpage to be rendered on webpage viewport, that is, electronic equipment screen, more specifically
Ground, webpage viewport are to be used to show the part region of above-mentioned webpage to be rendered on browser, but webpage viewport does not limit to again
Size in browser visible area, may be bigger than browser visible area, it is also possible to smaller than browser visible area.
Step 105, the ratio of the pixel of above-mentioned webpage and the font size of webpage root element is obtained.
Specifically, the font size of above-mentioned webpage root element can be indicated with CSS length unit (rem).
The ratio of the font size of the pixel and webpage root element of above-mentioned webpage can in specific implementation, according to systematicness
The sets itselfs such as energy and/or realization demand, ratio of the present embodiment to the pixel of above-mentioned webpage and the font size of webpage root element
The size of example is not construed as limiting, for example, the ratio of the font size of the pixel and webpage root element of above-mentioned webpage can be
100:1, i.e. 100px correspond to 1rem, if there is a word is 32px size on design original text, then should write when writing code
At 0.32rem.
Specifically, it in JavaScript (JS), can be used
" document.documentElement.clientWidth " obtains the page width cw of above-mentioned webpage from webpage, due to this
The width of the webpage rendered in embodiment and the screen width of electronic equipment are equal, therefore the page width of the above-mentioned webpage obtained
Degree is the screen width of above-mentioned electronic equipment.
Step 106, when the screen width of above-mentioned electronic equipment is less than or equal to predetermined threshold, according to above-mentioned electronic equipment
Screen width, above-mentioned webpage pixel and webpage root element font size ratio and above-mentioned predetermined threshold, needed for calculating
Webpage root element font size.
Wherein, the size of above-mentioned predetermined threshold can in specific implementation, certainly according to system performance and/or realization demand etc.
Row setting, the present embodiment are not construed as limiting the size of above-mentioned predetermined threshold, for example, above-mentioned predetermined threshold can be 640px.
Specifically, the font according to the screen width of above-mentioned electronic equipment, pixel and the webpage root element of above-mentioned webpage is big
Small ratio and above-mentioned predetermined threshold, the font size for calculating required webpage root element can be with are as follows: needed for calculating according to formula (1)
Webpage root element font size.
Fs=m × cw/n (1)
In formula (1), fs is the font size of required webpage root element；Cw is the screen width of above-mentioned electronic equipment；M is
The ratio of the font size of the pixel and webpage root element of above-mentioned webpage, in the present embodiment, taking m is 100；N is above-mentioned predetermined threshold
It is worth, in the present embodiment, taking n is 640.
It, can be by webpage root element (html element) after the font size for calculating the webpage root element needed for obtaining
Font size is set as fs.
In this step, fs is set by the font size of webpage root element, is affected by this, it is assumed that the size of a word is
0.32rem, then its size will be arranged to 0.32 × fs=32cw/640, and the ratio of it and web width is then
32cw/640/cw=32/640=1/20, this ratio do not change with cw, that is to say, that no matter user is in what equipment
This webpage, the size of this word are the 1/20 of the screen size of electronic equipment always, even if user forces to have scaled webpage, this
A ratio will not become, and ensure that so in any case, and the practical visual effect of webpage is unified beautiful.
Since the present embodiment only needs a secondary design, figure is once cut, code is once write, 100% adaptation can be reached
Effect, therefore scheme reduces the cost designed and developed compared with the existing technology, shortens the iteration cycle of product, optimizes use
Family experience, also reduces and shows abnormal risk in special equipment.
Step 107, processing is zoomed in and out to above-mentioned webpage according to the font size of above-mentioned webpage root element, in above-mentioned electricity
The rendering page after scaling processing is shown on the screen of sub- equipment.
It specifically, can be according to the above-mentioned webpage root member of acquisition after the font size for obtaining above-mentioned webpage root element
The font size of element, zooms in and out processing to above-mentioned webpage to be rendered, so that above-mentioned webpage to be rendered be made to be scaled to conjunction
Suitable size.
(a)~Fig. 2 (c) referring to fig. 2, Fig. 2 (a)~Fig. 2 (c) is under sized devices different in the application webpage rendering method
The display effect of webpage, from Fig. 2 (a)~Fig. 2 (c) as can be seen that using after above-mentioned webpage rendering method, webpage to be rendered
Suitable size can be scaled on various sizes of electronic equipment.
In above-mentioned webpage rendering method, after obtaining webpage to be rendered, the screen width of electronic equipment is obtained, is then obtained
The document properties label of above-mentioned webpage is taken, includes configuration information in above-mentioned document properties label, above-mentioned configuration information is for characterizing
The corresponding relationship of the screen width of the width of webpage viewport and above-mentioned electronic equipment, according to above-mentioned configuration information, rendering and electronics
The webpage viewport that the screen width of equipment matches obtains the ratio of the pixel of above-mentioned webpage and the font size of webpage root element
Example, when the screen width of above-mentioned electronic equipment be less than or equal to predetermined threshold when, according to the screen width of above-mentioned electronic equipment, on
State the pixel of webpage and the font size of webpage root element ratio and above-mentioned predetermined threshold, calculate required webpage root element
Font size finally zooms in and out processing to above-mentioned webpage according to the font size of above-mentioned webpage root element, so as to realize
Webpage shows unanimously on different devices, optimizes user experience, and reduce webpage showed in special equipment it is abnormal
Risk.
Fig. 3 is the flow chart of another embodiment of the application webpage rendering method, as shown in figure 3, real shown in the application Fig. 1
After applying a step 105, can also include:
Step 301, when the screen width of above-mentioned electronic equipment is greater than predetermined threshold, by the font of above-mentioned webpage root element
It is dimensioned to intended pixel, the numerical value of above-mentioned intended pixel is equal to the pixel of above-mentioned webpage and the font size of webpage root element
Ratio.
Step 302, processing is zoomed in and out to above-mentioned webpage according to the font size of the above-mentioned webpage root element of setting, with
The rendering page after scaling processing is shown on the screen of above-mentioned electronic equipment.
By taking the ratio of the pixel of above-mentioned webpage and the font size of webpage root element is 100:1 as an example, when above-mentioned electronics is set
When standby screen width is greater than predetermined threshold, 100px can be set by the font size of above-mentioned webpage root element.Then, then
Above-mentioned webpage is zoomed in and out according to the font size of the above-mentioned webpage root element of setting.
Fig. 4 is the flow chart of the application webpage rendering method further embodiment, as shown in figure 4, real shown in the application Fig. 1
Before applying a step 105, can also include:
Step 401, it monitors webpage and scales trigger event, above-mentioned webpage scaling trigger event includes direction handover event, net
Page document views size adjustment event and/or web document load completion event.
If listening to above-mentioned webpage scales trigger event, 105 are thened follow the steps.
Specifically, the rem.js file that browser can be scaled and be calculated by the processing of introducing, when being loaded to webpage
Webpage scaling trigger event is monitored, and an event in webpage scaling trigger event is direction switching
(orientationchange) event, this is webpage transverse screen/vertical screen switching (changing direction) Shi Fasheng event；Another
Event is web document view size adjustment (resize) event, this is the thing that can be triggered when web document view is sized
Part；Another event is that (DOMContentLoaded) event is completed in web document load, this is when initial html document quilt
The event being triggered after loading and be parsed completely.When above-mentioned webpage scaling trigger event occurs, the page can all become
Change, at this time browser should dynamically go to update the size of web page element, so that the page is beautiful, therefore browser will use
Rem.js file monitors above three event.As long as one of event occurs, it is necessary to execute the picture for obtaining above-mentioned webpage
The step of element and the ratio of the font size of webpage root element.
Fig. 5 is the flow chart of the application webpage rendering method further embodiment, as shown in figure 5, real shown in the application Fig. 1
It applies in example, step 105 may include:
Step 501, CSS attribute in web page files is obtained.
Wherein, above-mentioned web page files may include JS script file, html file or CSS file, certainly above-mentioned webpage text
Part can also include other web page files, and the present embodiment is not construed as limiting this.
Step 502, the pixel of preset above-mentioned webpage and the font of webpage root element are obtained from above-mentioned CSS attribute
The ratio of size.
Specifically, in the present embodiment, the web page files that processing is calculated and scaled are introduced, stating web page files herein above is JS
It is illustrated for script file, above-mentioned JS script file can be rem.js file.CSS attribute in setting web page files
When, the pixel of above-mentioned webpage is write according to the ratio of the font size with webpage root element, for example, the picture of above-mentioned webpage
Element and the ratio of the font size of webpage root element can be 100:1, i.e. 100px corresponds to 1rem, in this way, if having one in webpage
Size of a word on design original text is 32px, then when CSS attribute is arranged, it should be arranged to 0.32rem.
Specifically, when introducing rem.js file, rem.js file can be passed through to the src attribute for setting script to be somebody's turn to do
The mode of file path introduces, and can also be directly placed into PHP: HyperText Preprocessor (PHP:Hypertext
Preprocessor；Hereinafter referred to as: php) in head page piece, perhaps directly it will be internally provided in the page or pass through
ES6module is introduced.In addition, rem.js is not necessarily intended to be introduced directly into, other scripting languages such as typescript can also be passed through
Compiling obtains.
Webpage rendering method provided by the present application can be used on the market adaptation in need mobile web front-end exploitation produce
In product, as the HTML5 page of product official website, the HTML5 page of public platform, the mobile network space HTML5 page and other
The HTML5 leading page etc..Because can accomplish from being adapted to, so that page performance is consistent on distinct device, therefore net can be allowed
Page becomes beautiful, and reduces in certain risks that are uncommon, being difficult to performance entanglement in the equipment tested.
In the case where any adaptation scheme of no use, mobile terminal browser is inconsistent to the performance of same page
, this, which will lead to, there is scroll bar or typesetting entanglement, is finally difficult to see.
Fig. 6 (a) is not illustrated using the comparison of normal page when webpage rendering method provided by the present application and the excessive page
Figure, Fig. 6 (b) are not illustrated using the comparison of normal page when webpage rendering method provided by the present application and the too small entanglement page
Figure.In Fig. 6 (a) and Fig. 6 (b), left hand view is normal page, and right part of flg is respectively the excessive page and the too small entanglement page, from
When Fig. 6 (a)~(b) be can be seen that no using webpage rendering method provided by the present application, the mobile terminal of sugared doctor official website is first
There is abnormal show in page.
Fig. 7 (a)~(d) is to show on various sizes of electronic equipment using after webpage rendering method provided by the present application
Webpage, from Fig. 7 (a)~(d) as can be seen that using after webpage rendering method provided by the present application, various sizes of
When browser on electronic equipment renders same web page, achieve the effect that from adaptation.
Fig. 8 is the structural schematic diagram of the application webpage rendering device one embodiment, the webpage wash with watercolours in the embodiment of the present application
Webpage rendering method provided by the embodiments of the present application may be implemented in dye device.As shown in figure 8, above-mentioned webpage rendering device can wrap
It includes: obtaining module 81 and rendering module 82；
Wherein, it obtains module 81 and obtains the screen width of electronic equipment, wherein above-mentioned for obtaining webpage to be rendered
The screen of electronic equipment is for showing above-mentioned webpage to be rendered；And obtain the document properties label of above-mentioned webpage, wherein on
Stating document properties label includes configuration information, and above-mentioned configuration information is used to characterize the width and above-mentioned electronic equipment of webpage viewport
The corresponding relationship of screen width；In the present embodiment, above-mentioned webpage to be rendered can only provide a design in the design phase
Original text need to only cut out a picture resource when cutting figure by design original text.It, can be according to pre- when stating webpage to be rendered in design
If original width design above-mentioned webpage to be rendered, above-mentioned preset original width can in specific implementation, according to system
The sets itselfs such as performance and/or realization demand, the present embodiment are not construed as limiting the size of above-mentioned preset original width, and citing comes
It says, above-mentioned preset original width can be 640px.
Specifically, after receiving for the operation information of the link of the webpage to be rendered showed on electronic equipment,
It obtains module 81 and obtains above-mentioned webpage to be rendered.Wherein, the above-mentioned chain for the webpage to be rendered showed on electronic equipment
The operation information connect can be the operation of user's click or the link of the above-mentioned webpage to be rendered of long-pressing, and the present embodiment is to above-mentioned behaviour
The concrete operations form for making information is not construed as limiting.
Wherein, the document properties label of above-mentioned webpage can be meta label, and meta label is in html web page source code
In an important html tag, meta label can be used to describe the attribute of a html web page document, such as author, date
With time, webpage description, keyword, page furbishing etc..In the present embodiment, above-mentioned meta label includes configuration information, above-mentioned to match
Confidence ceases the corresponding relationship for characterizing the width of webpage viewport and the screen width of above-mentioned electronic equipment.
Specifically, the corresponding relationship of the screen width of the width and above-mentioned electronic equipment of above-mentioned webpage viewport can be with are as follows: on
State the width and above-mentioned electronics of the width webpage viewport equal or above-mentioned with the screen width of above-mentioned electronic equipment of webpage viewport
The ratio of the screen width of equipment is 1:2 etc., and the present embodiment is not construed as limiting this, but the present embodiment is with above-mentioned webpage viewport
It is illustrated for width is equal with the screen width of above-mentioned electronic equipment.
Above-mentioned electronic equipment can be server, such as: cloud server；It may be smart phone, tablet computer, intelligence
Intelligent terminals, the present embodiment such as energy wrist-watch, PC or vehicle intelligent terminal are not construed as limiting the form of above-mentioned electronic equipment.
Rendering module 82, for according to the configuration information in above-mentioned document properties label, the screen of rendering and electronic equipment
The webpage viewport that width matches.
Wherein, it is used to show the region of above-mentioned webpage to be rendered on webpage viewport, that is, electronic equipment screen, more specifically
Ground, webpage viewport are to be used to show the part region of above-mentioned webpage to be rendered on browser, but webpage viewport does not limit to again
Size in browser visible area, may be bigger than browser visible area, it is also possible to smaller than browser visible area.
Module 81 is obtained, is also used to obtain the ratio of the pixel of above-mentioned webpage and the font size of webpage root element；When upper
When stating the screen width of electronic equipment less than or equal to predetermined threshold, according to the screen width of above-mentioned electronic equipment, above-mentioned webpage
Pixel and webpage root element font size ratio and above-mentioned predetermined threshold, the font for calculating required webpage root element it is big
It is small.
Specifically, the font size of above-mentioned webpage root element can be indicated with CSS length unit (rem).
The ratio of the font size of the pixel and webpage root element of above-mentioned webpage can in specific implementation, according to systematicness
The sets itselfs such as energy and/or realization demand, ratio of the present embodiment to the pixel of above-mentioned webpage and the font size of webpage root element
The size of example is not construed as limiting, for example, the ratio of the font size of the pixel and webpage root element of above-mentioned webpage can be
100:1, i.e. 100px correspond to 1rem, if there is a word is 32px size on design original text, then should write when writing code
At 0.32rem.
Specifically, obtaining module 81 can be used " document.documentElement.clientWidth " from webpage
The upper page width cw for obtaining above-mentioned webpage, the screen by the width of webpage and electronic equipment that are rendered in this present embodiment are wide
Spend it is equal, therefore obtain above-mentioned webpage page width be above-mentioned electronic equipment screen width.
Wherein, the size of above-mentioned predetermined threshold can in specific implementation, certainly according to system performance and/or realization demand etc.
Row setting, the present embodiment are not construed as limiting the size of above-mentioned predetermined threshold, for example, above-mentioned predetermined threshold can be 640px.
Specifically, module 81 is obtained according to the screen width of above-mentioned electronic equipment, the pixel of above-mentioned webpage and webpage root member
The ratio of the font size of element and above-mentioned predetermined threshold, the font size for calculating above-mentioned webpage root element can be with are as follows: according to formula (1)
Calculate the font size of above-mentioned webpage root element.
Rendering module 82 is also used to zoom in and out processing to above-mentioned webpage according to the font size of above-mentioned webpage root element,
To show the rendering page after scaling processing on the screen of above-mentioned electronic equipment.
After obtaining module 81 and calculating the font size for obtaining above-mentioned webpage root element, rendering module 82 can be by webpage
The font size of root element (html element) is set as fs.
In this step, the font size of webpage root element is set fs by rendering module 82, is affected by this, it is assumed that a word
Size be 0.32rem, then its size will be arranged to 0.32 × fs=32cw/640, and the ratio of it and web width
It is then 32cw/640/cw=32/640=1/20, this ratio does not change with cw, that is to say, that no matter user is in what equipment
On see this webpage, the size of this word is the 1/20 of the screen size of electronic equipment always, though user force scaled net
Page, this ratio will not become, ensure that so in any case, and the practical visual effect of webpage is unified beautiful.
After the font size for obtaining above-mentioned webpage root element, rendering module 82 can be according to the above-mentioned webpage root of acquisition
The font size of element zooms in and out processing to above-mentioned webpage to be rendered, so that above-mentioned webpage to be rendered be made to be scaled to
Suitable size.
From Fig. 2 (a)~Fig. 2 (c) as can be seen that webpage to be rendered is in difference using after above-mentioned webpage rendering device
Suitable size can be scaled on the electronic equipment of size.
Since the present embodiment only needs a secondary design, figure is once cut, code is once write, 100% adaptation can be reached
Effect, therefore scheme reduces the cost designed and developed compared with the existing technology, shortens the iteration cycle of product, optimizes use
Family experience, also reduces and shows abnormal risk in special equipment.
Fig. 9 is the structural schematic diagram of another embodiment of the application webpage rendering device, renders and fills with webpage shown in Fig. 8
It sets and compares, the difference is that, webpage rendering device shown in Fig. 9 can also include: setup module 83；
Setup module 83, for when the screen width of above-mentioned electronic equipment is greater than predetermined threshold, by above-mentioned webpage root member
The font size of element is set as intended pixel, and the numerical value of above-mentioned intended pixel is equal to the pixel and webpage root element of above-mentioned webpage
The ratio of font size；
Rendering module 82, the font size for the above-mentioned webpage root element for being also used to be arranged according to setup module 83 is to above-mentioned net
Page zooms in and out processing, to show the rendering page after scaling processing on the screen of above-mentioned electronic equipment.
By taking the ratio of the pixel of above-mentioned webpage and the font size of webpage root element is 100:1 as an example, when above-mentioned electronics is set
When standby screen width is greater than predetermined threshold, setup module 83 can be set the font size of above-mentioned webpage root element to
100px.Then, rendering module 82 again zooms in and out above-mentioned webpage according to the font size of the above-mentioned webpage root element of setting.
Further, above-mentioned webpage rendering device can also include:
Module 84 is monitored, for monitoring webpage scaling trigger event, above-mentioned webpage scaling trigger event includes direction switching
Event, web document view size adjustment event and/or web document load completion event；
Module 81 is obtained, specifically for executing when monitoring module 84 listens to above-mentioned webpage scaling trigger event generation
The step of obtaining the ratio of the screen width of above-mentioned electronic equipment and the pixel of above-mentioned webpage and the font size of webpage root element.
Specifically, the rem.js file that module 84 can be scaled and be calculated by the processing of introducing is monitored, webpage is loaded
When webpage scaling trigger event monitored, webpage scaling trigger event in an event be direction switching
(orientationchange) event, this is webpage transverse screen/vertical screen switching (changing direction) Shi Fasheng event；Another
Event is web document view size adjustment (resize) event, this is the thing that can be triggered when web document view is sized
Part；Another event is that (DOMContentLoaded) event is completed in web document load, this is when initial html document quilt
The event being triggered after loading and be parsed completely.When above-mentioned webpage scaling trigger event occurs, the page can all become
Change, at this time browser should dynamically go to update the size of web page element, so that the page is beautiful, therefore monitoring module 84 will use
Rem.JS file monitors above three event.As long as one of event occurs, obtains module 81 and need to be implemented in acquisition
The step of stating the ratio of the pixel of webpage and the font size of webpage root element.
In the present embodiment, module 81 is obtained, is specifically used for obtaining CSS attribute in web page files；And from above-mentioned CSS attribute
The ratio of the middle pixel for obtaining preset above-mentioned webpage and the font size of webpage root element.
Specifically, in the present embodiment, in the written in code stage, introduce processing and calculate and the web page files of scaling, here with
For above-mentioned web page files to be illustrated for JS script file, above-mentioned JS script file can be rem.js file.It is being arranged
When CSS attribute in rem.js file, the pixel of above-mentioned webpage is write according to the ratio of the font size with webpage root element,
For example, the ratio of the pixel of above-mentioned webpage and the font size of webpage root element can be 100:1, i.e. 100px is corresponding
1rem, in this way, if having size of the word on design original text in webpage is 32px, when CSS attribute is arranged, it should write
At 0.32rem.
Specifically, when introducing rem.js file, rem.js file can be passed through to the src attribute for setting script to be somebody's turn to do
The mode of file path introduces, and can also be directly placed into the page piece of the head php, perhaps be directly placed into the page or pass through
ES6module is introduced.In addition, rem.js is not necessarily intended to be introduced directly into, other scripting languages such as typescript can also be passed through
Compiling obtains.
Webpage rendering device provided by the present application can be used on the market adaptation in need mobile web front-end exploitation produce
In product, as the HTML5 page of product official website, the HTML5 page of public platform, the mobile network space HTML5 page and other
The HTML5 leading page etc..Because can accomplish from being adapted to, so that page performance is consistent on distinct device, therefore net can be allowed
Page becomes beautiful, and reduces in certain risks that are uncommon, being difficult to performance entanglement in the equipment tested.
In the case where any adaptation scheme of no use, mobile terminal browser is inconsistent to the performance of same page
, this, which will lead to, there is scroll bar or typesetting entanglement, is finally difficult to see.
When can be seen that no from Fig. 6 (a)~(b) using webpage rendering device provided by the present application, sugared doctor official website
Mobile terminal homepage there is abnormal show.And from Fig. 7 (a)~(d) as can be seen that being rendered using webpage provided by the present application
After device, when the browser on various sizes of electronic equipment renders same web page, achieve the effect that from adaptation.
Figure 10 is the structural schematic diagram of the application electronic equipment one embodiment, and the electronic equipment in the present embodiment can wrap
It includes memory, processor and is stored in the computer program that can be run on above-mentioned memory and on above-mentioned processor, above-mentioned place
When managing the device above-mentioned computer program of execution, webpage rendering method provided by the embodiments of the present application may be implemented.
Wherein, above-mentioned electronic equipment can be server, such as: cloud server；Or smart phone, plate electricity
Brain, smartwatch, personal computer (Personal Computer；Hereinafter referred to as: PC) or the intelligent terminals such as vehicle intelligent terminal
Equipment, the present embodiment are not construed as limiting the form of above-mentioned electronic equipment.
Figure 10 shows the block diagram for being suitable for the example electronic device 12 for being used to realize the application embodiment.Figure 10 is shown
Electronic equipment 12 be only an example, should not function to the embodiment of the present application and use scope bring any restrictions.
As shown in Figure 10, electronic equipment 12 is showed in the form of universal computing device.The component of electronic equipment 12 can wrap
Include but be not limited to: one or more processor or processing unit 16, system storage 28 connect different system component (packets
Include system storage 28 and processing unit 16) bus 18.
Bus 18 indicates one of a few class bus structures or a variety of, including memory bus or Memory Controller,
Peripheral bus, graphics acceleration port, processor or the local bus using any bus structures in a variety of bus structures.It lifts
For example, these architectures include but is not limited to industry standard architecture (Industry Standard
Architecture；Hereinafter referred to as: ISA) bus, microchannel architecture (Micro Channel Architecture；Below
Referred to as: MAC) bus, enhanced isa bus, Video Electronics Standards Association (Video Electronics Standards
Association；Hereinafter referred to as: VESA) local bus and peripheral component interconnection (Peripheral Component
Interconnection；Hereinafter referred to as: PCI) bus.
Electronic equipment 12 typically comprises a variety of computer system readable media.These media can be it is any can be electric
The usable medium that sub- equipment 12 accesses, including volatile and non-volatile media, moveable and immovable medium.
System storage 28 may include the computer system readable media of form of volatile memory, such as arbitrary access
Memory (Random Access Memory；Hereinafter referred to as: RAM) 30 and/or cache memory 32.Electronic equipment 12 can
To further comprise other removable/nonremovable, volatile/non-volatile computer system storage mediums.Only as act
Example, storage system 34 can be used for reading and writing immovable, non-volatile magnetic media, and (Figure 10 does not show that commonly referred to as " hard disk drives
Dynamic device ").Although being not shown in Figure 10, the magnetic for reading and writing to removable non-volatile magnetic disk (such as " floppy disk ") can be provided
Disk drive, and to removable anonvolatile optical disk (such as: compact disc read-only memory (Compact Disc Read Only
Memory；Hereinafter referred to as: CD-ROM), digital multi CD-ROM (Digital Video Disc Read Only
Memory；Hereinafter referred to as: DVD-ROM) or other optical mediums) read-write CD drive.In these cases, each driving
Device can be connected by one or more data media interfaces with bus 18.Memory 28 may include that at least one program produces
Product, the program product have one group of (for example, at least one) program module, and it is each that these program modules are configured to perform the application
The function of embodiment.
Program/utility 40 with one group of (at least one) program module 42 can store in such as memory 28
In, such program module 42 includes --- but being not limited to --- operating system, one or more application program, other programs
It may include the realization of network environment in module and program data, each of these examples or certain combination.Program mould
Block 42 usually executes function and/or method in embodiments described herein.
Electronic equipment 12 can also be with one or more external equipments 14 (such as keyboard, sensing equipment, display 24 etc.)
Communication, can also be enabled a user to one or more equipment interact with the electronic equipment 12 communicate, and/or with make the electricity
Any equipment (such as network interface card, modem etc.) that sub- equipment 12 can be communicated with one or more of the other calculating equipment
Communication.This communication can be carried out by input/output (I/O) interface 22.Also, electronic equipment 12 can also be suitable by network
Orchestration 20 and one or more network (such as local area network (Local Area Network；Hereinafter referred to as: LAN), wide area network
(Wide Area Network；Hereinafter referred to as: WAN) and/or public network, for example, internet) communication.As shown in Figure 10, network
Adapter 20 is communicated by bus 18 with other modules of electronic equipment 12.It should be understood that although being not shown in Figure 10, Ke Yijie
It closes electronic equipment 12 and uses other hardware and/or software module, including but not limited to: microcode, device driver, redundancy processing
Unit, external disk drive array, RAID system, tape drive and data backup storage system etc..
Processing unit 16 by the program that is stored in system storage 28 of operation, thereby executing various function application and
Data processing, such as realize webpage rendering method provided by the embodiments of the present application.
The embodiment of the present application also provides a kind of non-transitorycomputer readable storage medium, the meter in above-mentioned storage medium
Calculation machine executable instruction by computer processor when being executed, for executing webpage rendering method provided by the embodiments of the present application.
Above-mentioned non-transitorycomputer readable storage medium can appointing using one or more computer-readable media
Meaning combination.Computer-readable medium can be computer-readable signal media or computer readable storage medium.Computer can
Reading storage medium for example may be-but not limited to-the system of electricity, magnetic, optical, electromagnetic, infrared ray or semiconductor, device
Or device, or any above combination.The more specific example (non exhaustive list) of computer readable storage medium includes:
Electrical connection, portable computer diskette, hard disk, random access memory (RAM), read-only storage with one or more conducting wires
Device (Read Only Memory；Hereinafter referred to as: ROM), erasable programmable read only memory (Erasable
Programmable Read Only Memory；Hereinafter referred to as: EPROM) or flash memory, optical fiber, portable compact disc are read-only deposits
Reservoir (CD-ROM), light storage device, magnetic memory device or above-mentioned any appropriate combination.In this document, computer
Readable storage medium storing program for executing can be any tangible medium for including or store program, which can be commanded execution system, device
Either device use or in connection.
Computer-readable signal media may include in a base band or as carrier wave a part propagate data-signal,
Wherein carry computer-readable program code.The data-signal of this propagation can take various forms, including --- but
It is not limited to --- electromagnetic signal, optical signal or above-mentioned any appropriate combination.Computer-readable signal media can also be
Any computer-readable medium other than computer readable storage medium, which can send, propagate or
Transmission is for by the use of instruction execution system, device or device or program in connection.
The program code for including on computer-readable medium can transmit with any suitable medium, including --- but it is unlimited
In --- wireless, electric wire, optical cable, RF etc. or above-mentioned any appropriate combination.
Can with one or more programming languages or combinations thereof come write for execute the application operation computer
Program code, described program design language include object oriented program language-such as Java, Smalltalk, C++,
It further include conventional procedural programming language-such as " C " language or similar programming language.Program code can be with
It fully executes, partly execute on the user computer on the user computer, being executed as an independent software package, portion
Divide and partially executes or executed on a remote computer or server completely on the remote computer on the user computer.In
It is related in the situation of remote computer, remote computer can pass through the network of any kind --- including local area network (Local
Area Network；Hereinafter referred to as: LAN) or wide area network (Wide Area Network；Hereinafter referred to as: WAN) it is connected to user
Computer, or, it may be connected to outer computer (such as being connected using ISP by internet).
The embodiment of the present application also provides a kind of computer program product, when the instruction in above-mentioned computer program product by
When managing device execution, webpage rendering method provided by the embodiments of the present application is executed.
It should be noted that term " first ", " second " etc. are used for description purposes only in the description of the present application, without
It can be interpreted as indication or suggestion relative importance.In addition, in the description of the present application, unless otherwise indicated, the meaning of " multiple "
It is two or more.
Any process described otherwise above or method description are construed as in flow chart or herein, and expression includes
It is one or more for realizing specific logical function or process the step of executable instruction code module, segment or portion
Point, and the range of the preferred embodiment of the application includes other realization, wherein can not press shown or discussed suitable
Sequence, including according to related function by it is basic simultaneously in the way of or in the opposite order, Lai Zhihang function, this should be by the application
Embodiment person of ordinary skill in the field understood.
It should be appreciated that each section of the application can be realized with hardware, software, firmware or their combination.Above-mentioned
In embodiment, software that multiple steps or method can be executed in memory and by suitable instruction execution system with storage
Or firmware is realized.It, and in another embodiment, can be under well known in the art for example, if realized with hardware
Any one of column technology or their combination are realized: having a logic gates for realizing logic function to data-signal
Discrete logic, with suitable combinational logic gate circuit specific integrated circuit, programmable gate array
(Programmable Gate Array；Hereinafter referred to as: PGA), field programmable gate array (Field Programmable
Gate Array；Hereinafter referred to as: FPGA) etc..
Those skilled in the art are understood that realize all or part of step that above-described embodiment method carries
It suddenly is that relevant hardware can be instructed to complete by program, the program can store in a kind of computer-readable storage medium
In matter, which when being executed, includes the steps that one or a combination set of embodiment of the method.
In addition, each functional module in each embodiment of the application can integrate in a processing module, it is also possible to
Modules physically exist alone, and can also be integrated in a module with two or more modules.Above-mentioned integrated module
Both it can take the form of hardware realization, can also have been realized in the form of software function module.If the integrated module
In the form of software function module realize and when sold or used as an independent product, also can store can in a computer
It reads in storage medium.
Storage medium mentioned above can be read-only memory, disk or CD etc..
In the description of this specification, reference term " one embodiment ", " some embodiments ", " example ", " specifically show
The description of example " or " some examples " etc. means specific features, structure, material or spy described in conjunction with this embodiment or example
Point is contained at least one embodiment or example of the application.In the present specification, schematic expression of the above terms are not
Centainly refer to identical embodiment or example.Moreover, particular features, structures, materials, or characteristics described can be any
One or more embodiment or examples in can be combined in any suitable manner.
Although embodiments herein has been shown and described above, it is to be understood that above-described embodiment is example
Property, it should not be understood as the limitation to the application, those skilled in the art within the scope of application can be to above-mentioned
Embodiment is changed, modifies, replacement and variant.
Claims (10)
1. a kind of webpage rendering method characterized by comprising
Obtain webpage to be rendered；
Obtain the screen width of electronic equipment, wherein the screen of the electronic equipment is for showing the webpage to be rendered；
Obtain the document properties label of the webpage, wherein the document properties label includes configuration information, the configuration information
For characterizing the corresponding relationship of the width of webpage viewport and the screen width of the electronic equipment；
According to the configuration information, the webpage viewport to match with the screen width size of the electronic equipment is rendered；
Obtain the ratio of the pixel of the webpage and the font size of webpage root element；
When the screen width of the electronic equipment be less than or equal to predetermined threshold when, according to the screen width of the electronic equipment,
The ratio of the font size of the pixel and webpage root element of the webpage and the predetermined threshold, calculate required webpage root element
Font size；
Processing is zoomed in and out to the webpage according to the font size of the webpage root element, in the screen of the electronic equipment
The rendering page after upper displaying scaling processing.
2. the method according to claim 1, wherein the pixel for obtaining the webpage and webpage root element
After the ratio of font size, further includes:
When the screen width of the electronic equipment is greater than predetermined threshold, set pre- for the font size of the webpage root element
Determine pixel, the numerical value of the intended pixel is equal to the ratio of the pixel of the webpage and the font size of webpage root element；
Processing is zoomed in and out to the webpage according to the font size of the webpage root element of setting, in the electronic equipment
Screen on show scaling processing after the rendering page.
3. the method according to claim 1, wherein the pixel for obtaining the webpage and webpage root element
Before the ratio of font size, further includes:
It monitors webpage and scales trigger event, webpage scaling trigger event includes that direction handover event, web document view are big
Small adjustment event and/or web document load completion event；
If listening to the webpage scales trigger event, the pixel for obtaining the webpage and webpage root member are executed
The step of ratio of the font size of element.
4. method according to claim 1 to 3, which is characterized in that the pixel and net for obtaining the webpage
The ratio of font size of page root element includes:
Obtain web page files middle layer stacking style table property；
The pixel of the preset webpage and the font size of webpage root element are obtained from the cascading style Table Properties
Ratio.
5. a kind of webpage rendering device characterized by comprising
It obtains module and obtains the screen width of electronic equipment for obtaining webpage to be rendered, wherein the electronic equipment
Screen is for showing the webpage to be rendered；And obtain the document properties label of the webpage, wherein the document properties
Label includes configuration information, and the configuration information is used to characterize the width of webpage viewport and the screen width of the electronic equipment
Corresponding relationship；
Rendering module is regarded for according to the configuration information, rendering the webpage to match with the screen width of the electronic equipment
Mouthful；
The acquisition module is also used to obtain the ratio of the pixel of the webpage and the font size of webpage root element；When described
When the screen width of electronic equipment is less than or equal to predetermined threshold, according to the screen width of the electronic equipment, the webpage
The ratio and the predetermined threshold of pixel and the font size of webpage root element, the font for calculating required webpage root element are big
It is small；
The rendering module, the font size for the webpage root element for being also used to be calculated according to the acquisition module is to the net
Page zooms in and out processing, to show the rendering page after scaling processing on the screen of the electronic equipment.
6. device according to claim 5, which is characterized in that further include:
Setup module, for when the screen width of the electronic equipment be greater than predetermined threshold when, by the word of the webpage root element
Body is dimensioned to intended pixel, and the numerical value of the intended pixel is big equal to the pixel of the webpage and the font of webpage root element
Small ratio；
The rendering module, the font size for the webpage root element for being also used to be arranged according to the setup module is to the net
Page zooms in and out processing, to show the rendering page after scaling processing on the screen of the electronic equipment.
7. device according to claim 5, which is characterized in that further include:
Module is monitored, for monitoring webpage scaling trigger event, the webpage scaling trigger event includes direction handover event, net
Page document views size adjustment event and/or web document load completion event；
The acquisition module, specifically for executing when the monitoring module listens to the webpage scaling trigger event generation
The step of ratio of the pixel for obtaining the webpage and the font size of webpage root element.
8. according to device described in claim 5-7 any one, which is characterized in that
The acquisition module is specifically used for obtaining web page files middle layer stacking style table property；And from the cascading style sheets category
The ratio of the pixel of the preset webpage and the font size of webpage root element is obtained in property.
9. a kind of electronic equipment, which is characterized in that including memory, processor and be stored on the memory and can be described
The computer program run on processor when the processor executes the computer program, is realized as appointed in claim 1-4
Method described in one.
10. a kind of non-transitorycomputer readable storage medium, is stored thereon with computer program, which is characterized in that the meter
The method as described in any in claim 1-4 is realized when calculation machine program is executed by processor.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810500680.1A CN110532488A (en) | 2018-05-23 | 2018-05-23 | Webpage rendering method, device and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810500680.1A CN110532488A (en) | 2018-05-23 | 2018-05-23 | Webpage rendering method, device and electronic equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110532488A true CN110532488A (en) | 2019-12-03 |
Family
ID=68656576
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810500680.1A Pending CN110532488A (en) | 2018-05-23 | 2018-05-23 | Webpage rendering method, device and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110532488A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111198999A (en) * | 2020-01-03 | 2020-05-26 | 北京字节跳动网络技术有限公司 | Method, device, medium and electronic equipment for loading pictures of webpage end |
| CN111324835A (en) * | 2020-02-06 | 2020-06-23 | 北京字节跳动网络技术有限公司 | Method and device for rendering user interface component, electronic equipment and storage medium |
| CN111984351A (en) * | 2020-08-07 | 2020-11-24 | 中移（杭州）信息技术有限公司 | Page adaptation method, electronic device and computer-readable storage medium |
| CN112269620A (en) * | 2020-11-17 | 2021-01-26 | 深圳市商汤科技有限公司 | Display method and device, electronic equipment and storage medium |
| CN112395033A (en) * | 2020-11-18 | 2021-02-23 | 中国平安人寿保险股份有限公司 | Webpage self-adaption method and related product |
| CN113076480A (en) * | 2021-04-21 | 2021-07-06 | 百度在线网络技术（北京）有限公司 | Page recommendation method and device, electronic equipment and medium |
| CN114385102A (en) * | 2021-12-17 | 2022-04-22 | 深圳积木易搭科技技术有限公司 | Interface element self-adaptive display method, equipment and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120192063A1 (en) * | 2011-01-20 | 2012-07-26 | Koren Ziv | On-the-fly transformation of graphical representation of content |
| CN106776969A (en) * | 2016-12-05 | 2017-05-31 | 乐视控股（北京）有限公司 | Page adaptation method, device and electronic equipment |
| CN107402757A (en) * | 2017-07-11 | 2017-11-28 | 北京潘达互娱科技有限公司 | Page rendering method and device |
| CN107590240A (en) * | 2017-09-13 | 2018-01-16 | 武汉斗鱼网络科技有限公司 | A kind of method and device of adjustment word size for page rendering |
-
2018
- 2018-05-23 CN CN201810500680.1A patent/CN110532488A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120192063A1 (en) * | 2011-01-20 | 2012-07-26 | Koren Ziv | On-the-fly transformation of graphical representation of content |
| CN106776969A (en) * | 2016-12-05 | 2017-05-31 | 乐视控股（北京）有限公司 | Page adaptation method, device and electronic equipment |
| CN107402757A (en) * | 2017-07-11 | 2017-11-28 | 北京潘达互娱科技有限公司 | Page rendering method and device |
| CN107590240A (en) * | 2017-09-13 | 2018-01-16 | 武汉斗鱼网络科技有限公司 | A kind of method and device of adjustment word size for page rendering |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111198999A (en) * | 2020-01-03 | 2020-05-26 | 北京字节跳动网络技术有限公司 | Method, device, medium and electronic equipment for loading pictures of webpage end |
| CN111198999B (en) * | 2020-01-03 | 2023-07-07 | 北京字节跳动网络技术有限公司 | Picture loading method and device for webpage end, medium and electronic equipment |
| CN111324835A (en) * | 2020-02-06 | 2020-06-23 | 北京字节跳动网络技术有限公司 | Method and device for rendering user interface component, electronic equipment and storage medium |
| CN111984351A (en) * | 2020-08-07 | 2020-11-24 | 中移（杭州）信息技术有限公司 | Page adaptation method, electronic device and computer-readable storage medium |
| CN111984351B (en) * | 2020-08-07 | 2024-05-03 | 中移（杭州）信息技术有限公司 | Page adaptation method, electronic device and computer readable storage medium |
| CN112269620A (en) * | 2020-11-17 | 2021-01-26 | 深圳市商汤科技有限公司 | Display method and device, electronic equipment and storage medium |
| CN112395033A (en) * | 2020-11-18 | 2021-02-23 | 中国平安人寿保险股份有限公司 | Webpage self-adaption method and related product |
| CN113076480A (en) * | 2021-04-21 | 2021-07-06 | 百度在线网络技术（北京）有限公司 | Page recommendation method and device, electronic equipment and medium |
| CN114385102A (en) * | 2021-12-17 | 2022-04-22 | 深圳积木易搭科技技术有限公司 | Interface element self-adaptive display method, equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110532488A (en) | Webpage rendering method, device and electronic equipment | |
| US11790158B1 (en) | System and method for using a dynamic webpage editor | |
| US10878175B2 (en) | Portlet display on portable computing devices | |
| US20120306930A1 (en) | Techniques for zooming in and out with dynamic content | |
| US9342493B2 (en) | Transient, real-time position tracking interface for user activity in a document editing application | |
| CN104699602A (en) | Method for detecting influence and computer | |
| JP2011159284A (en) | Website font previewing | |
| US11061541B2 (en) | Apparatus, method, and computer-readable recording medium for compactedly displaying popup content | |
| US10803236B2 (en) | Information processing to generate screen based on acquired editing information | |
| CN110012165B (en) | Method and device for presenting session list page and readable medium | |
| CN110347349A (en) | The method, apparatus and computer equipment of specified content are printed in browser | |
| CN111488096B (en) | Method and equipment for displaying interactive presentation information in reading application | |
| US20170169043A1 (en) | Apparatus, method and computer program for displaying web pages | |
| CN103744932A (en) | Page processing method and device | |
| CN107533568A (en) | It is determined that the system and method using zoom level | |
| CN105955593A (en) | Method and device for presenting discussion information | |
| WO2015088996A1 (en) | Web page rendering on wireless devices | |
| CN107451163B (en) | Animation display method and device | |
| US20170031889A1 (en) | Creating a communication editable in a browser independent of platform and operating system | |
| Vo | Mining social media: finding stories in Internet data | |
| US9582574B2 (en) | Generating navigable content overviews | |
| CN103226475A (en) | Method and device for realizing control replacement during transcoding | |
| CN107943475A (en) | Method and apparatus based on CSS displayed web pages | |
| CN113849164A (en) | Data processing method and device, electronic equipment and memory | |
| CN113849257A (en) | Page processing method, device, medium and electronic equipment |
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 |