CN110020276A - The compatible processing method and processing device of the H5 page is embedded in a kind of APP - Google Patents
The compatible processing method and processing device of the H5 page is embedded in a kind of APP Download PDFInfo
- Publication number
- CN110020276A CN110020276A CN201710724725.9A CN201710724725A CN110020276A CN 110020276 A CN110020276 A CN 110020276A CN 201710724725 A CN201710724725 A CN 201710724725A CN 110020276 A CN110020276 A CN 110020276A
- Authority
- CN
- China
- Prior art keywords
- size
- webview
- page
- function
- html
- 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.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
- Stored Programmes (AREA)
Abstract
The present invention provides the compatible processing method that the H5 page is embedded in a kind of APP, comprising: the JavaScript function for being used to obtain WebView area size size is injected into Webview；The H5 page is loaded according to preconfigured address；It calls the JavaScript function to obtain WebView area size size, and the font size of HTML root element is set according to the size of acquisition；The font size of each HTML child node is set according to the font size of the HTML root element.The present invention obtains the JavaScript function of WebView window size by injecting in WebView, the real information of device screen is passed into the H5 page by this function, it is simple and easy to achieve the purpose that H5 page adaptation difference mobile device, development efficiency can be effectively improved.
Description
Technical field
The present invention relates to field of computer technology, more particularly, to the processing for being embedded in H5 page compatibility in a kind of APP
Method and device.
Background technique
At present due to the needs of raising user's participation, it usually needs pass through WebView (behaviour in APP (application software)
Make the browser component built in system) mode be embedded in H5 (Html5) page, to improve user experience, so that user be guided to join
With activity, the enthusiasm that user participates in is improved.
When being embedded in the H5 page in realizing APP, due to difference (the presently mainly android system of operating system platform
And iOS system), there is different versions, various mobile devices there is different versions, WebView for same operating system
The size of screen is different and screen resolution is there is also different difference, and the presence of these objective factors leads to H5
The page will keep showing that the consistency of pattern and content is less susceptible in different mobile devices, to solve H5 page compatibility and ask
Topic is abnormal troublesome, therefore, need a kind of method make after being embedded in the H5 page in APP, page compatibility issue can obtain very well
Solution.
Summary of the invention
In order to solve to be embedded in the compatibility issue that occurs after the H5 page in APP, the present invention provides in a kind of APP and is embedded in H5 pages
The compatible processing method and processing device in face.
According to an aspect of the present invention, the compatible processing method that the H5 page is embedded in a kind of APP is provided, comprising:
S1 when being embedded in WebView in APP, will be used to obtain the area WebView by initializing JavaScriptBridge
The JavaScript function of domain sizes size is injected into Webview；
S2, after WebView creation is completed and JavaScript function injection is completed, according to preconfiguredly
Location loads the H5 page；
S3 calls the JavaScript function to obtain WebView area size big after the completion of H5 page load
It is small, and according to the font size of the size of acquisition setting HTML root element；
The font size of each HTML child node is arranged according to the font size of the HTML root element by S4.
Wherein, the step of calling the JavaScript function to obtain WebView area size size in S3 is further wrapped
It includes:
S31, the call back function for calling the load of the H5 page to complete pass through parsing Webview's in the call back function
UserAgent determines the system platform of currently running APP；
S32 calls the JavaScript by JavaScriptBridge interface corresponding with the system platform
Function obtains the size in the region WebView.
Wherein, the step S32 further include:
When the calling of the JavaScript function occurs abnormal, pass through calling
The size in Element.getBoundingClientRect () the function acquisition region WebView.
Wherein, the step of font size of HTML root element being arranged according to the size of acquisition in S3 further comprises:
In the initialization function of the H5 page, window.devicePixelRatio is called to obtain active user whole
The screen pixels ratio of end equipment；
According to the size in the region WebView and screen pixels ratio, setFontSize function is called to calculate
The font size of HTML root element out, and the font size is arranged into the font-size CSS attribute of HTML root element.
Wherein, the step S4 further comprises:
Based on the REM mechanism of the primary support of browser, proportionally set the font size of the HTML root element to
The font size of each HTML child node.
Wherein, after step s4 further include:
The font size of font size and each HTML child node based on the HTML root element, displaying are finally set up
The H5 page after.
According to another aspect of the present invention, the compatible processing unit that the H5 page is embedded in a kind of APP is provided, comprising:
Injection module when for being embedded in WebView in APP, will be used to obtain by initializing JavaScript Bridge
The JavaScript function of WebView area size size is taken to be injected into Webview；
Loading module is used for after WebView creation is completed and the JavaScript function injects completion, according to pre-
The address load H5 page first configured；
First size obtains module, for calling the JavaScript function to obtain after the completion of H5 page load
WebView area size size is taken, and the font size of HTML root element is set according to the size of acquisition；
The font of each HTML child node is arranged according to the font size of the HTML root element for second dimension acquisition module
Size.
Wherein, the first size obtains module and is specifically used for:
The call back function for calling the load of the H5 page to complete passes through parsing Webview's in the call back function
UserAgent determines the system platform of currently running APP；
The JavaScript letter is called by JavaScript Bridge interface corresponding with the system platform
Number obtains the size in the region WebView.
According to another aspect of the present invention, the compatible processing equipment that the H5 page is embedded in a kind of APP is provided, comprising:
Memory, processor and bus,
The processor and memory complete mutual communication by the bus；
The memory is stored with the program instruction that can be executed by the processor, and the processor calls the memory
In program instruction, with execute it is preceding it is any as described in method.
According to a further aspect of the invention, a kind of non-transient computer readable storage medium, the non-transient meter are provided
Calculation machine readable storage medium storing program for executing stores computer instruction, the computer instruction make the computer execute it is preceding it is any as described in side
Method.
The compatible processing method and processing device of the H5 page is embedded in a kind of APP proposed by the present invention, by WebView
Injection obtains the JavaScript function of WebView window size, is transmitted the real information of device screen by this function
The H5 page is given, thus reach H5 page adaptation difference mobile device purpose, it is simple and easy, development efficiency can be effectively improved.
Detailed description of the invention
The process that the compatible processing method of the H5 page is embedded in a kind of APP that Fig. 1 provides for one embodiment of the invention is shown
It is intended to；
Fig. 2 be another embodiment of the present invention provides a kind of APP in be embedded in the H5 page compatible processing unit structure
Schematic diagram；
Fig. 3 be another embodiment of the present invention provides a kind of APP in be embedded in the H5 page compatible processing equipment structure
Schematic diagram.
Specific embodiment
With reference to the accompanying drawings and examples, specific embodiments of the present invention will be described in further detail.Implement below
Example is not intended to limit the scope of the invention for illustrating the present invention.
As shown in Figure 1, the compatible processing method of the H5 page is provided in a kind of APP provided for one embodiment of the invention
Flow diagram, comprising:
S1 when being embedded in WebView in APP, will be used to obtain the area WebView by initializing JavaScriptBridge
The JavaScript function of domain sizes size is injected into Webview；
S2, after WebView creation is completed and JavaScript function injection is completed, according to preconfiguredly
Location loads the H5 page；
S3 calls the JavaScript function to obtain WebView area size big after the completion of H5 page load
It is small, and according to the font size of the size of acquisition setting HTML root element；
The font size of each HTML child node is arranged according to the font size of the HTML root element by S4.
Specifically, in step S1, the H5 page is embedded in APP in order to realize, the developer of webpage version APP (WebAPP) is first
First need to be embedded in WebView in APP, WebView is the browser component built in operating system.The embodiment of the present invention is being embedded in
When WebView, it will be used to obtain WebView area size size by initializing JavaScript Bridge
JavaScript function getScreenWidth, is injected into Webview.Currently, being embedded in the H5 page in APP will appear the page
The main reason for compatibility issue is the H5 page where calling Element.getBoundingClientRect () to obtain
When the window size in the region WebView, incorrect result can be obtained.One is injected into WebView for obtaining WebView
The JavaScript function of area size's size can be realized the real information of device screen passing to the H5 page, to reach
To the purpose of H5 page adaptation difference mobility device.Also, JavaScriptBridge is cross-platform open source solution party
Case can be run on Android and iOS, simply be easy to dispose, and provide one to be embedded in the exploitation of the H5 page in APP
Unified solution.
S2 is completed in WebView creation and JavaScript function getScreenWidth is successfully filled with WebView
Later, the end APP loads the corresponding H5 page by preconfigured address using this WebView.APP is being filled with
Just start to load the H5 page after getScreenWidth function, this procedure ensures the timing of page load, therefore can
When guaranteeing to call this JavaScript function of getScreenWidth, this function is had existed, therefore can reduce function
Call the probability occurred extremely.
S3, after the completion of H5 page load, the event handling function that the page load of H5 page binding is completed will be by
It calls, in this event handling function, the getScreenWidth function of the end page invocation APP H5 injection passes through this
JavaScript function can obtain the full-size(d) in the region current Web View, and by this size, the H5 page can be set
HTML root element font size.
Then in step s 4, on the basis of the font size of HTML root element obtained, each HTML section is set
The font size of point, i.e., the corresponding font size of different DOM nodes or element size, to reach the different mobile devices of adaptation
Purpose.
The compatible processing method of the H5 page is embedded in one APP of one kind that the embodiment of the present invention proposes, by WebView
Middle injection obtains the JavaScript function of WebView window size, is passed the real information of device screen by this function
The H5 page is passed, to reach H5 page adaptation difference mobile device purpose, can be run on Android and iOS, it is simple easy
A unified solution is provided in deployment, and to be embedded in the compatibility issue of H5 page development in APP, can be effectively improved
Development efficiency.
Based on the above embodiment, the JavaScript function is called to obtain the step of WebView area size size in S3
Suddenly further comprise:
S31, the call back function for calling the load of the H5 page to complete pass through parsing Webview's in the call back function
UserAgent determines the system platform of currently running APP；
S32 calls the JavaScript by JavaScriptBridge interface corresponding with the system platform
Function obtains the size in the region WebView.
Specifically, after the H5 page is loaded completion, the call back function that specified page load is completed can be called, and return
Letter of transfer number is specifically windows.onload or document.onload, in the call back function, the H5 page first
JavaScript code determines the system platform of currently running APP by parsing the UserAgent of WebView, i.e. judgement is worked as
The APP of preceding operation is Android version or iOS version, is then attempted by corresponding with the system platform
JavaScript Bridge interface calls described for obtaining the JavaScript function of WebView area size size
GetScreenWidth obtains the size in the region current Web View.
The platform of current H5 page operation is judged by the primary support pattern of this browser of UserAgent, efficiently
And it is easy to implement, because only needing to carry out pattern match by regular expression, in addition, being called according to different platforms
Corresponding JavaScriptBridge interface ensure that the professional platform independence and transplantability of method and code.
In one embodiment, when the calling of the JavaScript function occurs abnormal, pass through calling
The size in Element.getBoundingClientRect () the function acquisition region WebView.I.e. when corresponding
JavaScript Bridge does not export this JavaScript function of getScreenWidth, or calls
GetScreenWidth function has been dished out exception, can pass through and Element.getBoundingClientRect () is called to obtain
The size in the region WebView.The fault-tolerance and robustness that program is strengthened by abnormality processing, because working as
After JavaScriptBridge interface calls the failure of getScreenWidth function or APP itself to be abnormal, additionally it is possible to
The size that WebView is obtained by primary the Element.getBoundingClientRect () function of WebView, exists in this way
In most of mobile device, the H5 page being embedded in APP still is able to normally show, significantly enhances embedding in APP
Enter the user experience of the H5 page.
Based on the above embodiment, the step of font size of HTML root element being arranged according to the size of acquisition in S3 is further
Include:
In the initialization function of the H5 page, window.devicePixelRatio is called to obtain active user whole
The screen pixels ratio of end equipment；
According to the size in the region WebView and screen pixels ratio, setFontSize function is called to calculate
The font size of HTML root element out, and the font size is arranged into the font-size CSS attribute of HTML root element.
Specifically, after obtaining the size of WebView, the initialization function of the H5 page can pass through
Window.devicePixelRatio obtains the screen pixels ratio (Device Pixel Ratio) of current device, then currently
The setFontSize function of the H5 page can go out close according to the size of WebView and the screen pixels of current device than combined calculation
Finally this size is arranged onto the font-size CSS attribute of HTML root element for the font size of suitable HTML root element.
Based on the various embodiments described above, the step S4 further comprises:
Based on the REM mechanism of the primary support of browser, proportionally set the font size of the HTML root element to
The font size of each HTML child node.
REM is the newly-increased relative unit (root em, root em) of CSS3, relative to root element (i.e. html element)
The multiple of font-size calculated value is only with respect to the size rem (font size ofthe root element) of root element
Refer to the unit of the font size relative to root element.Briefly it is exactly a relative unit.It may be implemented simply using REM
Response type layout, can use in html element between the size and screen of font ratio setting font-size value, realize
Element is allowed also to change when screen resolution variation.
Since REM is the mechanism of the primary support of browser, and when the font-size CSS attribute of HTML root element is set
After setting or modifying, the font-size of each HTML daughter element can be by browser automatically according to the font- of HTML root element
Size proportionally carries out dynamic modification, ensure that the H5 page can be shown well in different mobile devices.Such pole
The earth guarantees the operational efficiency of the H5 page, and alleviates the workload of developer.
Based on the various embodiments described above, after step s4 further include:
The font size of font size and each HTML child node based on the HTML root element, displaying are finally set up
The H5 page after.
After the font-size of HTML root node and the font-size of each HTML child node are provided with, each html element
The size and location of element is just finalized, and such page can completely be shown, and be set in each movement
Standby upper user experience is with uniformity, and last function code can be performed, even if the later period carries out each element
Addition, modification and deletion, the page can be still best shown.
As shown in Fig. 2, for another embodiment of the present invention provides a kind of APP in be embedded in the H5 page compatible processing unit
Structural schematic diagram, comprising: injection module 21, loading module 22, first size obtain module 22 and the second dimension acquisition module
23, wherein
Injection module 21 when for being embedded in WebView in APP, will be used for by initializing JavaScriptBridge
The JavaScript function for obtaining WebView area size size is injected into Webview；
Loading module 22 is used for after WebView creation is completed and the JavaScript function injects completion, according to
Preconfigured address loads the H5 page；
First size obtains module 23, for calling the JavaScript function to obtain after the completion of the load of the H5 page
WebView area size size, and according to the font size of the size of acquisition setting HTML root element；
The word of each HTML child node is arranged according to the font size of the HTML root element for second dimension acquisition module 24
Body size.
Specifically, the H5 page is embedded in APP in order to realize, the developer of webpage version APP (WebAPP) firstly the need of
WebView is embedded in APP, WebView is the browser component built in operating system.Injection module 21 is for being embedded in
When WebView, it will be used to obtain the JavaScript of WebView area size size by initialization JavaScriptBridge
Function getScreenWidth, is injected into Webview.Currently, being embedded in the H5 page in APP will appear page compatibility issue
The main reason for be the H5 page where calling Element.getBoundingClientRect () to obtain the region WebView
Window size when, incorrect result can be obtained.It is injected into WebView one big for obtaining WebView area size
Small JavaScript function can be realized the real information of device screen passing to the H5 page, so that it is suitable to reach the H5 page
Purpose with different mobility devices.Also, JavaScriptBridge is cross-platform open source solution, can be run
A unified solution party is provided on Android and iOS, being simply easy to dispose, and to be embedded in the exploitation of the H5 page in APP
Case.
Loading module 22 is completed in WebView creation and JavaScript function getScreenWidth is successfully filled with
After WebView, APP loads the H5 page by preconfigured address using this WebView.APP is being filled with
Just start to load the H5 page after getScreenWidth function, this procedure ensures the timing of page load, therefore can
When guaranteeing to call this JavaScript function of getScreenWidth, this function is had existed, therefore can reduce function
Call the probability occurred extremely.
After the completion of H5 page load, the H5 page binds the event handling function that page load is completed first, once
The page is loaded completion, this function will be called, and in this event handling function, first size obtains module 23 for calling
The getScreenWidth function of the end APP injection can obtain the region current Web View by this JavaScript function
The font size of the HTML root element in the face H5 can be set by this size in full-size(d).
Second dimension acquisition module 24, for each HTML child node on the basis of the size of HTML root element, to be arranged
Font size, i.e., the corresponding font size of different DOM nodes or element size, to reach the mesh for being adapted to different mobile devices
's.
The compatible processing unit of the H5 page is embedded in a kind of APP that the embodiment of the present invention proposes, by WebView
Injection obtains the JavaScript function of WebView window size, is transmitted the real information of device screen by this function
The H5 page is given, to reach H5 page adaptation difference mobile device purpose, can run on Android and iOS, simply be easy to
Deployment, and a unified solution is provided to be embedded in the compatibility issue of H5 page development in APP, it can effectively improve open
Send out efficiency.
Based on the above embodiment, the first size obtains module and is specifically used for:
The call back function for calling the load of the H5 page to complete passes through parsing Webview's in the call back function
UserAgent determines the system platform of currently running APP；
The JavaScript letter is called by JavaScript Bridge interface corresponding with the system platform
Number obtains the size in the region WebView.
Specifically, after the H5 page is loaded completion, the call back function that specified page load is completed can be called, and return
Letter of transfer number is specifically windows.onload or document.onload, in the call back function, the H5 page first
JavaScript code determines the system platform of currently running APP by parsing the UserAgent of WebView, i.e. judgement is worked as
The APP of preceding operation is Android version or iOS version, is then attempted by corresponding with the system platform
JavaScript Bridge interface calls described for obtaining the JavaScript function of WebView area size size
GetScreenWidth obtains the size in the region current Web View.
Wherein, the first size obtains module and is also used to:
When the calling of the JavaScript function occurs abnormal, pass through calling
The size in Element.getBoundingClientRect () the function acquisition region WebView.
Based on the above embodiment, the first size obtains module and is used for:
In the initialization function of the H5 page, window.devicePixelRatio is called to obtain active user whole
The screen pixels ratio of end equipment；
According to the size in the region WebView and screen pixels ratio, setFontSize function is called to calculate
The font size of HTML root element out, and the font size is arranged into the font-size CSS attribute of HTML root element.
Wherein, second dimension acquisition module is used for:
Based on the REM mechanism of the primary support of browser, proportionally set the font size of the HTML root element to
The font size of each HTML child node.
Wherein, further includes:
Display module, for the font size of font size and each HTML child node based on the HTML root element,
Show the H5 page after being finally provided with.
As shown in figure 3, for another embodiment of the present invention provides a kind of APP in be embedded in the H5 page compatible processing equipment
Structural schematic diagram, comprising: memory 31, processor 32 and bus 33,
The processor 32 and memory 31 complete mutual communication by the bus 33；
The memory 31 is stored with the program instruction that can be executed by the processor 32, and the processor 32 calls described
Program instruction in memory 31, to execute the method as described in the various embodiments described above, for example, S1 is embedded in APP
When WebView, it will be used to obtain the JavaScript of WebView area size size by initialization JavaScriptBridge
Function call injection is into Webview；S2, after WebView creation is completed and JavaScript function injection is completed, according to
Preconfigured address loads the H5 page；S3 calls the JavaScript function to obtain after the completion of H5 page load
WebView area size size, and according to the font size of the size of acquisition setting HTML root element；S4, according to the HTML
The font size of each HTML child node is arranged in the font size of root element.
According to a further aspect of the invention, a kind of non-transient computer readable storage medium, the non-transient meter are provided
Calculation machine readable storage medium storing program for executing stores computer instruction, and the computer instruction executes the computer such as the various embodiments described above institute
The method stated, for example, S1 when being embedded in WebView in APP, will be used to obtain by initializing JavaScriptBridge
The JavaScript function of WebView area size size is taken to be injected into Webview；S2 creates completion and institute in WebView
After stating JavaScript function injection completion, the H5 page is loaded according to preconfigured address；S3 is loaded in the H5 page
After the completion, it calls the JavaScript function to obtain WebView area size size, and HTML is arranged according to the size of acquisition
The font size of root element；The font size of each HTML child node is arranged according to the font size of the HTML root element by S4.
Those of ordinary skill in the art will appreciate that: realize that all or part of the steps of above method embodiment can pass through
The relevant hardware of program instruction is completed, and program above-mentioned can be stored in a computer readable storage medium, the program
When being executed, step including the steps of the foregoing method embodiments is executed；And storage medium above-mentioned includes: ROM, RAM, magnetic disk or light
The various media that can store program code such as disk.
The compatible processing equipment that the H5 page is embedded in APP described above is only schematical, wherein the work
It may or may not be physically separated for the unit of separate part description, component shown as a unit can be
Or it may not be physical unit, it can it is in one place, or may be distributed over multiple network units.It can be with
Some or all of the modules therein is selected to achieve the purpose of the solution of this embodiment according to the actual needs.The common skill in this field
Art personnel are without paying creative labor, it can understand and implement.
Through the above description of the embodiments, those skilled in the art can be understood that each embodiment can
It realizes by means of software and necessary general hardware platform, naturally it is also possible to pass through hardware.Based on this understanding, on
Stating technical solution, substantially the part that contributes to existing technology can be embodied in the form of software products in other words, should
Computer software product may be stored in a computer readable storage medium, such as ROM/RAM, magnetic disk, CD, including several fingers
It enables and using so that a computer equipment (can be personal computer, server or the network equipment etc.) executes each implementation
Method described in certain parts of example or embodiment.
Finally, method of the invention is only preferable embodiment, it is not intended to limit the scope of the present invention.It is all
Within the spirit and principles in the present invention, any modification, equivalent replacement, improvement and so on should be included in protection of the invention
Within the scope of.
Claims (10)
1. being embedded in the compatible processing method of the H5 page in a kind of APP characterized by comprising
S1 when being embedded in WebView in APP, will be used to obtain the region WebView by initializing JavaScript Bridge
The JavaScript function of size is injected into Webview；
S2 adds after WebView creation is completed and JavaScript function injection is completed according to preconfigured address
Carry the H5 page；
S3 calls the JavaScript function to obtain WebView area size size after the completion of H5 page load,
And the font size of HTML root element is set according to the size of acquisition；
The font size of each HTML child node is arranged according to the font size of the HTML root element by S4.
2. the method according to claim 1, wherein the JavaScript function is called to obtain in S3
The step of WebView area size size, further comprises:
S31, the call back function for calling the load of the H5 page to complete pass through parsing Webview's in the call back function
UserAgent determines the system platform of currently running APP；
S32 calls the JavaScript function by JavaScriptBridge interface corresponding with the system platform,
Obtain the size in the region WebView.
3. according to the method described in claim 2, it is characterized in that, the step S32 further include:
When the calling of the JavaScript function occurs abnormal, call Element.getBoundingClientRect ()
The size in the function acquisition region WebView.
4. according to the method in claim 2 or 3, which is characterized in that HTML root element is arranged according to the size of acquisition in S3
Font size the step of further comprise:
In the initialization function of the H5 page, calls window.devicePixelRatio to obtain active user's terminal and set
Standby screen pixels ratio；
According to the size in the region WebView and screen pixels ratio, setFontSize function is called to calculate
The font size of HTML root element, and the font size is arranged into the font-size CSS attribute of HTML root element.
5. according to the method described in claim 4, it is characterized in that, the step S4 further comprises:
Based on the REM mechanism of the primary support of browser, proportionally set each for the font size of the HTML root element
The font size of HTML child node.
6. the method according to claim 1, wherein after step s4 further include:
The font size of font size and each HTML child node based on the HTML root element is shown after being finally provided with
The H5 page.
7. being embedded in the compatible processing unit of the H5 page in a kind of APP characterized by comprising
Injection module when for being embedded in WebView in APP, will be used to obtain by initializing JavaScriptBridge
The JavaScript function of WebView area size size is injected into Webview；
Loading module, for after WebView creation is completed and JavaScript function injection is completed, according to matching in advance
The address load H5 page set；
First size obtains module, for calling the JavaScript function to obtain after the completion of H5 page load
WebView area size size, and according to the font size of the size of acquisition setting HTML root element；
Second dimension acquisition module, the font that each HTML child node is arranged according to the font size of the HTML root element are big
It is small.
8. device according to claim 7, which is characterized in that the first size obtains module and is specifically used for:
The call back function for calling the load of the H5 page to complete, in the call back function, by the UserAgent for parsing Webview
Determine the system platform of currently running APP；
The JavaScript function is called by JavaScript Bridge interface corresponding with the system platform, is obtained
Take the size in the region WebView.
9. in a kind of APP be embedded in the H5 page compatible processing equipment characterized by comprising memory, processor and
Bus,
The processor and memory complete mutual communication by the bus；
The memory is stored with the program instruction that can be executed by the processor, and the processor calls in the memory
Program instruction, to execute the method as described in claim 1 to 6 is any.
10. a kind of non-transient computer readable storage medium, which is characterized in that the non-transient computer readable storage medium is deposited
Computer instruction is stored up, the computer instruction makes the computer execute the method as described in claim 1 to 6 is any.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710724725.9A CN110020276B (en) | 2017-08-22 | 2017-08-22 | Compatibility processing method and device for embedding H5 page in APP |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710724725.9A CN110020276B (en) | 2017-08-22 | 2017-08-22 | Compatibility processing method and device for embedding H5 page in APP |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110020276A true CN110020276A (en) | 2019-07-16 |
| CN110020276B CN110020276B (en) | 2021-05-28 |
Family
ID=67186131
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710724725.9A Active CN110020276B (en) | 2017-08-22 | 2017-08-22 | Compatibility processing method and device for embedding H5 page in APP |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110020276B (en) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111427645A (en) * | 2020-03-20 | 2020-07-17 | 青岛聚好联科技有限公司 | H5-based cross-terminal adaptive display method and device |
| CN111708573A (en) * | 2020-06-05 | 2020-09-25 | 苏州瑞泰信息技术有限公司 | Technical scheme for H5 to adapt to APP, WeChat and nail |
| CN111984448A (en) * | 2020-08-14 | 2020-11-24 | 北京达佳互联信息技术有限公司 | Page calling method, device, equipment and storage medium |
| CN112905938A (en) * | 2021-02-24 | 2021-06-04 | 上海二三四五网络科技有限公司 | Control method and device for dynamically adjusting H5 page height |
| US11947895B2 (en) * | 2020-07-06 | 2024-04-02 | Canon Kabushiki Kaisha | Information processing apparatus for representing a web page using external fonts, and information processing method, and storage medium thereof |
| WO2024208332A1 (en) * | 2023-04-03 | 2024-10-10 | 抖音视界有限公司 | Page processing method and apparatus, compiling method and apparatus, and rendering method and apparatus |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2015156983A1 (en) * | 2014-04-07 | 2015-10-15 | Dresser, Inc. | Method and system for generating a user interface for device diagnostics of a valve assembly and implementation thereof |
| CN105930464A (en) * | 2016-04-22 | 2016-09-07 | 腾讯科技（深圳）有限公司 | Web rich media multi-screen adaptation method and apparatus |
| CN106021353A (en) * | 2016-05-09 | 2016-10-12 | Tcl集团股份有限公司 | Display adaption method and system of webpage |
| CN106557501A (en) * | 2015-09-28 | 2017-04-05 | 腾讯科技（深圳）有限公司 | A kind of screen adaptation method of page module and device |
| CN106776969A (en) * | 2016-12-05 | 2017-05-31 | 乐视控股（北京）有限公司 | Page adaptation method, device and electronic equipment |
-
2017
- 2017-08-22 CN CN201710724725.9A patent/CN110020276B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2015156983A1 (en) * | 2014-04-07 | 2015-10-15 | Dresser, Inc. | Method and system for generating a user interface for device diagnostics of a valve assembly and implementation thereof |
| CN106557501A (en) * | 2015-09-28 | 2017-04-05 | 腾讯科技（深圳）有限公司 | A kind of screen adaptation method of page module and device |
| CN105930464A (en) * | 2016-04-22 | 2016-09-07 | 腾讯科技（深圳）有限公司 | Web rich media multi-screen adaptation method and apparatus |
| CN106021353A (en) * | 2016-05-09 | 2016-10-12 | Tcl集团股份有限公司 | Display adaption method and system of webpage |
| CN106776969A (en) * | 2016-12-05 | 2017-05-31 | 乐视控股（北京）有限公司 | Page adaptation method, device and electronic equipment |
Non-Patent Citations (3)
| Title |
|---|
| YOU WANG等: "How screen size influences Chinese readability", 《OZCHI "13:PROCEEDINGS OF THE 25TH AUSTRALIAN COMPUTER-HUMAN INTERACTION CONFERENCE:AUGMENTATION,APPLICATION,INNOVATION,COLLABORATION》 * |
| ZSYCHANPIN: "android之获取屏幕的宽度和高度", 《HTTP://WWW.BBSMAX.COM/A/GBJREX1AZ0》 * |
| 艾军: "面向移动终端的Web内容适配研究", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111427645A (en) * | 2020-03-20 | 2020-07-17 | 青岛聚好联科技有限公司 | H5-based cross-terminal adaptive display method and device |
| CN111708573A (en) * | 2020-06-05 | 2020-09-25 | 苏州瑞泰信息技术有限公司 | Technical scheme for H5 to adapt to APP, WeChat and nail |
| CN111708573B (en) * | 2020-06-05 | 2023-09-08 | 苏州瑞泰信息技术有限公司 | System for H5 adaptation has APP, weChat, nail |
| US11947895B2 (en) * | 2020-07-06 | 2024-04-02 | Canon Kabushiki Kaisha | Information processing apparatus for representing a web page using external fonts, and information processing method, and storage medium thereof |
| CN111984448A (en) * | 2020-08-14 | 2020-11-24 | 北京达佳互联信息技术有限公司 | Page calling method, device, equipment and storage medium |
| CN111984448B (en) * | 2020-08-14 | 2023-12-12 | 北京达佳互联信息技术有限公司 | Page calling method, device, equipment and storage medium |
| CN112905938A (en) * | 2021-02-24 | 2021-06-04 | 上海二三四五网络科技有限公司 | Control method and device for dynamically adjusting H5 page height |
| WO2024208332A1 (en) * | 2023-04-03 | 2024-10-10 | 抖音视界有限公司 | Page processing method and apparatus, compiling method and apparatus, and rendering method and apparatus |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110020276B (en) | 2021-05-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110020276A (en) | The compatible processing method and processing device of the H5 page is embedded in a kind of APP | |
| US11741183B2 (en) | Systems and methods for hosted applications | |
| US10726195B2 (en) | Filtered stylesheets | |
| CN110691136B (en) | Data interaction method and device, electronic equipment and storage medium | |
| WO2020019458A1 (en) | Page switching method of hybrid application, framework, computer device and storage medium | |
| US9081757B2 (en) | Systems and methods for tracking and updating hosted applications | |
| CN109933349A (en) | A kind of method to be timely updated based on vue spa, system and equipment | |
| CN102760139A (en) | Webpage processing method and webpage processing system | |
| CN106470360B (en) | Video player calling method and device | |
| CN109101225B (en) | Component construction method and device, component library architecture and computer readable storage medium | |
| CN110045956A (en) | Configuration method, device, equipment and the readable storage medium storing program for executing of component | |
| US11853752B2 (en) | Migration of web applications between different web application frameworks | |
| CN110781425B (en) | Display method, device and equipment of mobile terminal H5 page and storage medium | |
| CN108897889A (en) | A kind of front page optimization method, front page optimization device and computer equipment | |
| CN113468450A (en) | Page control method and device | |
| CN107506597A (en) | Medical files acquisition methods, terminal and server | |
| CN104933019B (en) | A kind of method and device that list generates | |
| CN110599112A (en) | Method and device for developing and maintaining network page | |
| CN113704668B (en) | Data processing method and device for webpage development | |
| CN110704125B (en) | Webpage loading method and device, storage medium and terminal equipment | |
| CN117435182A (en) | Cross-end rendering frame construction method, rendering method device, equipment and medium | |
| CN109634658A (en) | The configuration method and device of Webpage | |
| CN115587269A (en) | Method and device for generating H5 page of client | |
| CN117130616A (en) | Data large screen monitoring platform implementation method and system based on SOA architecture | |
| CN117743552A (en) | Chat intelligent question-answering stream type-out method and system realized by pure front end |
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: 20230907 Address after: Room 503, Building A, No. 2 Taixing Road, Yongping Street, Baiyun District, Guangzhou City, Guangdong Province, 510420 Patentee after: Guangzhou Yaleheng Network Technology Co.,Ltd. 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. |
|
| TR01 | Transfer of patent right |