CN112149021B - Compatible method for using self-adaptive layout unit in CSS Sprites technology of router - Google Patents
Compatible method for using self-adaptive layout unit in CSS Sprites technology of router Download PDFInfo
- Publication number
- CN112149021B CN112149021B CN202011010695.3A CN202011010695A CN112149021B CN 112149021 B CN112149021 B CN 112149021B CN 202011010695 A CN202011010695 A CN 202011010695A CN 112149021 B CN112149021 B CN 112149021B
- Authority
- CN
- China
- Prior art keywords
- css
- information
- real
- identification
- size
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; 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
-
- 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/953—Querying, e.g. by the use of web search engines
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/01—Protocols
- H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Computer Networks & Wireless Communication (AREA)
- Signal Processing (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a compatible method for using a self-adaptive layout unit in a router CSS Sprites technology, which comprises the following steps: s1: a page first initialization process; s2: and (5) on the basis of the step S1, a page adjusting process when the window size is changed. Aiming at the problem that the browser such as IE10 and the like has poor support on CSS writes and self-adaptive layout units, the compatibility problem can be solved by adding corresponding processing functions during page initialization and window adjustment without greatly adjusting the original design of the page, and the contradiction between the new technology and the browser compatibility in the page development process is effectively solved.
Description
Technical Field
The invention belongs to the technical field of embedded communication equipment software configuration interface development, and particularly relates to a compatible method for using a self-adaptive layout unit in a router CSS Sprites technology.
Background
The WiFi alliance recently published a new network protocol, WiFi6 protocol, and existing WiFi systems are based on this protocol, so if the router module implements communication with external devices, the existing router module is equipped with a WiFi6 system. In the practical application process, because the single-frequency device comprises the plurality of single-frequency modules and the double-frequency device comprises the plurality of double-frequency modules, the WiFi6 system can be provided with a plurality of data channels, the transmission rate is ensured, the data throughput of the WiFi6 system is improved, and the transmission data volume of the WiFi6 system is more sufficient.
The data transmission already has a considerable transmission rate, but when the data cannot be compatible, the data compatibility defect cannot be overcome even if the data transmission is faster, and the interface display speed is increased; such as: the variety of browsers is very large, and the version of each browser is also very large. For the configuration interface of the embedded communication device, the compatibility problem of the browser needs to be considered as much as possible. Meanwhile, in order to develop the configuration interface system quickly and conveniently, new technologies are adopted for design as far as possible. Often times, a conflict between new technology and browser compatibility arises. In order to optimize the page loading speed, a page is integrated into one image file by using a plurality of small images by using the CSS Sprites technology, and then background positioning is carried out by using background-position, background-size and the like to obtain a required picture. The CSS adaptive layout can perfectly match the window sizes of various terminals and can dynamically adjust the size and position of elements as the window size is adjusted. But when CSS Sprites technology is combined with adaptive layout, compatibility issues for a particular browser are encountered.
Aiming at the scene that the following two points are simultaneously met, namely 1, in order to optimize the interface display speed, a CSS Sprites technology is used; 2. in order to dynamically adjust the size of the picture according to the change of the window size, window units of adaptive vw and vh are used in background-position and background-size.
The problems with the above defined scenario: for an IE browser, for example, the adaptive layout units of vw and vh are used in background-position and background-size, the browser version above IE11 is required to be well supported, and the support of IE10 and the following versions is not good, so that the same set of page codes cannot be compatible with browsers such as IE 10.
Therefore, a compatible method using an adaptive layout unit in the CSS Sprites technology of the router needs to be designed to solve the above problem.
Disclosure of Invention
The invention aims to provide a compatible method for using a self-adaptive layout unit in a router CSS Sprites technology, which is used for solving the technical problems in the prior art, such as: in order to optimize the interface display speed, the CSS Sprites technology is used, the size of a picture is dynamically adjusted to adapt to the change of the window size, window units of adaptive vw and vh are used in background-position and background-size, and adaptive layout units of vw and vh are used in background-position and background-size, for example, for an IE browser, the browser version above IE11 is required to be well supported, and the IE10 and the following versions are not well supported, so that the same set of page codes cannot be compatible with browsers such as IE 10.
In order to achieve the purpose, the technical scheme of the invention is as follows:
a compatible method using an adaptive layout unit in a CSS Sprites technology of a router comprises the following steps:
s1: a page first initialization process;
s2: a page adjustment process when the window size changes on the basis of step S1;
wherein step S1 includes the following substeps:
s11: matching the browser; the matching of the browsers is carried out after the page is loaded, the process identifies and screens out the browsers using the self-adaptive layout unit in the CSS Sprites, and the subsequent processes are executed for the browsers of the types;
s12: backing up picture position information; the position information backup process saves the original page window size after the initial page and the original element picture position information related by using CSS writes;
the information to be backed up includes:
1. the window sizes of the original pages, namely originWinWidth and originWinHeight;
2. all elements using the CSS background-position attribute establish an original picture position information database; the form fields of the original picture position information database are defined as follows:
class is defined as the name of the element CSS class;
bg _ width is defined as the width of the original background-position, and the unit is px;
bg _ height is defined as height of original background-position, and the unit is px;
the establishment process of the original picture position information database is as follows, when the jquery code is adopted:
a. screening and acquiring an original position parameter containing a background-position attribute element;
originPosition＝$(this).css('background-position')；
b. generating an original picture position information database;
bg_position_array[i].class＝$(this).attr("class")；
bg_position_array[i].bg_width＝originPosition.split(“”)[0]；
bg_position_array[i].bg_height＝originPosition.split(“”)[1]；
through the picture position information backup process, the position information originally using vw and vh self-adaptive layout units can be automatically converted into the position information taking pixel px as a unit for subsequent process calling;
c. in the case where the picture size is explicitly set using background-size and the unit of background-size is also the vw and vh adaptive layout unit, it is necessary to reset background-size according to the original window size:
origin_bg_size＝originWinWidth*vw％+originWinHeight*vh％；
wherein vw% is the ratio of the picture width to the window width, and vh% is the ratio of the picture height to the window height;
s13: CSS reloading; by jquery-like against a database of raw location information
$ (this). css ("background-position", "translated position information") and optionally $ (this). css ("background-size", origin _ bg _ size) calls to reload the translated picture position information to get the desired picture;
wherein step S2 includes the following substeps:
s21: matching the browser for the second time;
registering an event processing function of window resize in a page control code, performing an action of matching a browser when detecting that a window is changed, and performing subsequent recalculation of picture position information and CSS reloading after matching;
s22: recalculating picture position information;
1. acquiring the current sizes of windows, namely currentWiWidth and currentWiHeight, and calculating the change proportion of the acquired windows with the window information in the original position information database:
ratio_x＝currentWinWidth/originWinWidth；
ratio_y＝currentWinHeight/originWinHeight；
ratio _ x is a change ratio in the width direction, and ratio _ y is a change ratio in the height direction;
2. for each table entry i in the original position information database, a new background-position value is recalculated, that is:
new_position_array[i].class＝bg_position_array[i].class；
new_position_array[i].bg_width＝bg_position_array[i].bg_width*ratio_x；
new_position_array[i].bg_height＝bg_position_array[i].bg_height*ratio_y；
through the above calculation, a new position information data set new _ position _ array is generated;
3. for the case of using the picture file size explicitly set by background-size and using the adaptive layout unit, the picture size under the new window needs to be recalculated, that is:
new_bg_size＝currentWinWidth*vw％+currentWinHeight*vh％；
s23: CSS reloading for the third time;
for each table entry in the new location information data, a new css format is generated, that is:
new_css[i]＝new_position_array[i].bg_width+new_position_array[i].bg_height；
calling a cs instruction, reloading the style of the corresponding element, and when the jquery code is used:
$(new_position_array[i].class).css(“background-position”,new_css[i])；
for the case where the picture size is explicitly set using background-size, an additional reload is required, namely:
$(this).css(“background-size”,new_bg_size)。
further, at step S11: in the matched browser, the identification and screening process comprises the following steps:
receiving real-time browser information and calling standard browser information using a self-adaptive layout unit in CSS Sprites;
performing first comparison analysis on the real-time browser information and the standard browser information, and screening and retaining the real-time browser information if the first comparison analysis result shows that the real-time browser information is matched with the standard browser information; and if the first contrastive analysis result is that the real-time browser information is not matched with the standard browser information, performing second contrastive analysis on the real-time browser information and the standard browser information in the first contrastive analysis, if the second contrastive analysis result is that the real-time browser information is not matched with the standard browser information, screening and filtering the real-time browser information, and if the second contrastive analysis result is that the real-time browser information is matched with the standard browser information, screening and retaining the real-time browser information.
Further, the identification screening process is completed by a first identification screening module and a second identification screening module; wherein the content of the first and second substances,
the first comparison analysis process and the second comparison analysis process are respectively completed in the first identification screening module and the second identification screening module;
and the comparison analysis algorithms adopted by the first identification screening module and the second identification screening module are different.
Further, at step S11: in the matched browser, the identification and screening process comprises the following steps:
receiving real-time browser information, and identifying whether the real-time browser information meets the requirement of using a self-adaptive layout unit in CSS Sprites;
performing first identification on the real-time browser information, and screening and retaining the real-time browser information if the first identification result shows that the real-time browser information meets the requirement of using a self-adaptive layout unit in CSS Sprites;
if the first recognition result is that the real-time browser information does not meet the condition that the self-adaptive layout unit used in the CSS Sprites exists, performing second recognition on the real-time browser information in the first recognition, and if the second recognition result is that the real-time browser information meets the condition that the self-adaptive layout unit used in the CSS Sprites exists, screening and retaining the real-time browser information; and if the second recognition result shows that the real-time browser information still does not meet the requirement of using the self-adaptive layout unit in the CSS Sprites, screening and filtering the real-time browser information.
Further, the identification screening process is completed by the first identification screening unit and the second identification screening unit; wherein the content of the first and second substances,
the first identification process and the second identification process are respectively completed in the first identification screening unit and the second identification screening unit;
and the identification algorithms adopted by the first identification screening unit and the second identification screening unit are different.
Compared with the prior art, the invention has the beneficial effects that:
one innovation point of the scheme is that in the method provided by the invention, aiming at the problem that the support of browsers such as IE10 and the like to CSS writes and adaptive layout units is not good, the compatibility problem can be solved by adding corresponding processing functions during page initialization and window adjustment, the original design of the page does not need to be adjusted greatly, and the contradiction between the new technology and the browser compatibility in the page development process is effectively solved.
One innovation point of the scheme is that the browser identification screening process is the core of the matched browser, and if an error occurs in the link, key target information can be filtered; therefore, in order to avoid accidental errors of algorithm programs in the identification screening, when the browser is not matched in the first identification screening, the data is not filtered temporarily, the second identification screening is performed, and the algorithm programs (the functions of the identification screening algorithms are the same) adopted in the two identification screening are different, so that the influence of the accidental errors of the algorithm programs on the identification screening process of the browser can be avoided greatly. .
Drawings
FIG. 1 is a diagram illustrating a page first initialization process according to an embodiment of the present invention.
FIG. 2 is a diagram illustrating a page adjustment process when a window size changes according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention are clearly and completely described below with reference to fig. 1-2 of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Example (b):
in the prior art, in order to optimize the interface display speed, a CSS Sprites technology is used, the size of a picture is dynamically adjusted to adapt to the change of the window size, window units of adaptive vw and vh are used in background-position and background-size, and vw and vh adaptive layout units used in background-position and background-size are used for an IE browser, for example, a browser version above IE11 is required to be well supported, and the support of IE10 and the following versions is not good, so that the same set of page codes cannot be compatible with browsers such as IE 10.
As shown in fig. 1 and fig. 2, a compatible method using adaptive layout units in CSS Sprites technology of a router is proposed, which includes the following steps:
s1: a page first initialization process;
s2: a page adjustment process when the window size changes on the basis of step S1;
wherein step S1 includes the following substeps:
s11: matching the browser; the matching of the browsers is carried out after the page is loaded, the process identifies and screens out the browsers using the self-adaptive layout unit in the CSS Sprites, and the subsequent processes are executed for the browsers of the types;
s12: backing up picture position information; the position information backup process saves the original page window size after the initial page and the original element picture position information related by using CSS writes;
the information to be backed up includes:
1. the window sizes of the original pages, namely originWinWidth and originWinHeight;
2. all elements using the CSS background-position attribute establish an original picture position information database; the form fields of the original picture position information database are defined as follows:
class is defined as the name of the element CSS class;
bg _ width is defined as the width of the original background-position, and the unit is px;
bg _ height is defined as height of original background-position, and the unit is px;
the establishment process of the original picture position information database is as follows, when the jquery code is adopted:
a. screening and acquiring an original position parameter containing a background-position attribute element;
originPosition＝$(this).css('background-position')；
b. generating an original picture position information database;
bg_position_array[i].class＝$(this).attr("class")；
bg_position_array[i].bg_width＝originPosition.split(“”)[0]；
bg_position_array[i].bg_height＝originPosition.split(“”)[1]；
through the picture position information backup process, the position information originally using vw and vh self-adaptive layout units can be automatically converted into the position information taking pixel px as a unit for subsequent process calling;
c. in the case where the picture size is explicitly set using background-size and the unit of background-size is also the vw and vh adaptive layout unit, it is necessary to reset background-size according to the original window size:
origin_bg_size＝originWinWidth*vw％+originWinHeight*vh％；
wherein vw% is the ratio of the picture width to the window width, and vh% is the ratio of the picture height to the window height;
s13: CSS reloading; by jquery-like against a database of raw location information
$ (this). css ("background-position", "translated position information") and optionally $ (this). css ("background-size", origin _ bg _ size) calls to reload the translated picture position information to get the desired picture;
wherein step S2 includes the following substeps:
s21: matching the browser for the second time;
registering an event processing function of window resize in a page control code, performing an action of matching a browser when detecting that a window is changed, and performing subsequent recalculation of picture position information and CSS reloading after matching;
s22: recalculating picture position information;
1. acquiring the current sizes of windows, namely currentWiWidth and currentWiHeight, and calculating the change proportion of the acquired windows with the window information in the original position information database:
ratio_x＝currentWinWidth/originWinWidth；
ratio_y＝currentWinHeight/originWinHeight；
ratio _ x is a change ratio in the width direction, and ratio _ y is a change ratio in the height direction;
2. for each table entry i in the original position information database, a new background-position value is recalculated, that is:
new_position_array[i].class＝bg_position_array[i].class；
new_position_array[i].bg_width＝bg_position_array[i].bg_width*ratio_x；
new_position_array[i].bg_height＝bg_position_array[i].bg_height*ratio_y；
through the above calculation, a new position information data set new _ position _ array is generated;
3. for the case of using the picture file size explicitly set by background-size and using the adaptive layout unit, the picture size under the new window needs to be recalculated, that is:
new_bg_size＝currentWinWidth*vw％+currentWinHeight*vh％；
s23: CSS reloading for the third time;
for each table entry in the new location information data, a new css format is generated, that is:
new_css[i]＝new_position_array[i].bg_width+new_position_array[i].bg_height；
calling a cs instruction, reloading the style of the corresponding element, and when the jquery code is used:
$(new_position_array[i].class).css(“background-position”，new_css[i])；
for the case where the picture size is explicitly set using background-size, an additional reload is required, namely:
$(this).css(“background-size”,new_bg_size)。
therefore, in the method provided by the invention, aiming at the problem that the browser such as IE10 and the like has poor support on CSS writes and self-adaptive layout units, the compatibility problem can be solved by adding corresponding processing functions during page initialization and window adjustment without greatly adjusting the original design of the page, and the contradiction between the new technology and the browser compatibility in the page development process is effectively solved.
The browser identification screening process is the core of the matched browser, and if an error occurs in the link, key target information can be filtered; therefore, in order to avoid accidental errors of algorithm programs in the identification screening, when the browser is not matched in the first identification screening, the data is not filtered temporarily, the second identification screening is performed, and the algorithm programs (the functions of the identification screening algorithms are the same) adopted in the two identification screening are different, so that the influence of the accidental errors of the algorithm programs on the identification screening process of the browser can be avoided greatly.
Further, at step S11: in the matched browser, the identification and screening process comprises the following steps:
receiving real-time browser information and calling standard browser information using a self-adaptive layout unit in CSS Sprites;
performing first comparison analysis on the real-time browser information and the standard browser information, and screening and retaining the real-time browser information if the first comparison analysis result shows that the real-time browser information is matched with the standard browser information; and if the first contrastive analysis result is that the real-time browser information is not matched with the standard browser information, performing second contrastive analysis on the real-time browser information and the standard browser information in the first contrastive analysis, if the second contrastive analysis result is that the real-time browser information is not matched with the standard browser information, screening and filtering the real-time browser information, and if the second contrastive analysis result is that the real-time browser information is matched with the standard browser information, screening and retaining the real-time browser information.
Further, the identification screening process is completed by a first identification screening module and a second identification screening module; wherein the content of the first and second substances,
the first comparison analysis process and the second comparison analysis process are respectively completed in the first identification screening module and the second identification screening module;
and the comparison analysis algorithms adopted by the first identification screening module and the second identification screening module are different.
Further, at step S11: in the matched browser, the identification and screening process comprises the following steps:
receiving real-time browser information, and identifying whether the real-time browser information meets the requirement of using a self-adaptive layout unit in CSS Sprites;
performing first identification on the real-time browser information, and screening and retaining the real-time browser information if the first identification result shows that the real-time browser information meets the requirement of using a self-adaptive layout unit in CSS Sprites;
if the first recognition result is that the real-time browser information does not meet the condition that the self-adaptive layout unit used in the CSS Sprites exists, performing second recognition on the real-time browser information in the first recognition, and if the second recognition result is that the real-time browser information meets the condition that the self-adaptive layout unit used in the CSS Sprites exists, screening and retaining the real-time browser information; and if the second recognition result shows that the real-time browser information still does not meet the requirement of using the self-adaptive layout unit in the CSS Sprites, screening and filtering the real-time browser information.
Further, the identification screening process is completed by the first identification screening unit and the second identification screening unit; wherein the content of the first and second substances,
the first identification process and the second identification process are respectively completed in the first identification screening unit and the second identification screening unit;
and the identification algorithms adopted by the first identification screening unit and the second identification screening unit are different.
The above are preferred embodiments of the present invention, and all changes made according to the technical scheme of the present invention that produce functional effects do not exceed the scope of the technical scheme of the present invention belong to the protection scope of the present invention.
Claims (5)
1. A compatible method using an adaptive layout unit in a CSS Sprites technology of a router is characterized by comprising the following steps:
s1: a page first initialization process;
s2: a page adjustment process when the window size changes on the basis of step S1;
wherein step S1 includes the following substeps:
s11: matching the browser; the matching of the browsers is carried out after the page is loaded, the process identifies and screens out the browsers using the self-adaptive layout unit in the CSS Sprites, and the subsequent processes are executed for the browsers of the types;
s12: backing up picture position information; the position information backup process saves the original page window size after the initial page and the original element picture position information related by using CSS writes;
the information to be backed up includes:
(1) the window sizes of the original pages, namely originWinWidth and originWinHeight;
(2) all elements using the CSS background-position attribute establish an original picture position information database; the form fields of the original picture position information database are defined as follows:
class is defined as the name of the element CSS class;
bg _ width is defined as the width of the original background-position, and the unit is px;
bg _ height is defined as height of original background-position, and the unit is px;
the establishment process of the original picture position information database is as follows, when the jquery code is adopted:
a. screening and acquiring an original position parameter containing a background-position attribute element;
originPosition＝$(this).css('background-position')；
b. generating an original picture position information database;
bg_position_array[i].class＝$(this).attr("class")；
bg_position_array[i].bg_width＝originPosition.split(“”)[0]；
bg_position_array[i].bg_height＝originPosition.split(“”)[1]；
through the picture position information backup process, the position information originally using vw and vh self-adaptive layout units can be automatically converted into the position information taking pixel px as a unit for subsequent process calling;
c. in the case where the picture size is explicitly set using background-size and the unit of background-size is also the vw and vh adaptive layout unit, it is necessary to reset background-size according to the original window size:
origin_bg_size＝originWinWidth*vw％+originWinHeight*vh％；
wherein vw% is the ratio of the picture width to the window width, and vh% is the ratio of the picture height to the window height;
s13: CSS reloading; by jquery against a database of raw picture position information
$ (this). css ("background-position", "translated position information") and $ (this). css ("background-size", origin _ bg _ size) call to reload the translated picture position information to get the desired picture;
wherein step S2 includes the following substeps:
s21: matching the browser for the second time;
registering an event processing function of window resize in a page control code, performing an action of matching a browser when detecting that a window is changed, and performing subsequent recalculation of picture position information and CSS reloading after matching;
s22: recalculating picture position information;
(1) acquiring the current sizes of windows, namely currentWiWidth and currentWiHeight, and calculating the change proportion of the acquired windows with the window information in the original picture position information database:
ratio_x＝currentWinWidth/originWinWidth；
ratio_y＝currentWinHeight/originWinHeight；
ratio _ x is a change ratio in the width direction, and ratio _ y is a change ratio in the height direction;
(2) for each table entry i in the original picture position information database, recalculating a new background-position value, namely:
new_position_array[i].class＝bg_position_array[i].class；
new_position_array[i].bg_width＝bg_position_array[i].bg_width*ratio_x；
new_position_array[i].bg_height＝bg_position_array[i].bg_height*ratio_y；
through the above calculation, a new position information data set new _ position _ array is generated;
(3) For the case of using the picture file size explicitly set by background-size and using the adaptive layout unit, the picture size under the new window needs to be recalculated, that is:
new_bg_size＝currentWinWidth*vw％+currentWinHeight*vh％；
s23: CSS reloading for the third time;
for each table entry in the new location information data, a new css format is generated, that is:
new_css[i]＝new_position_array[i].bg_width+new_position_array[i].bg_height；
calling a cs instruction, reloading the style of the corresponding element, and when the jquery code is used:
$(new_position_array[i].class).css(“background-position”,new_css[i])；
for the case where the picture size is explicitly set using background-size, an additional reload is required, namely:
$(this).css(“background-size”,new_bg_size)。
2. the compatible method using the adaptive layout unit in the CSS Sprites technology of the router of claim 1, wherein at step S11: in the matched browser, the identification and screening process comprises the following steps:
receiving real-time browser information and calling standard browser information using a self-adaptive layout unit in CSS Sprites;
performing first comparison analysis on the real-time browser information and the standard browser information, and screening and retaining the real-time browser information if the first comparison analysis result shows that the real-time browser information is matched with the standard browser information; and if the first contrastive analysis result is that the real-time browser information is not matched with the standard browser information, performing second contrastive analysis on the real-time browser information and the standard browser information in the first contrastive analysis, if the second contrastive analysis result is that the real-time browser information is not matched with the standard browser information, screening and filtering the real-time browser information, and if the second contrastive analysis result is that the real-time browser information is matched with the standard browser information, screening and retaining the real-time browser information.
3. The compatible method using adaptive layout units in CSS Sprites technology of claim 2, wherein said identification screening process is performed by a first identification screening module and a second identification screening module; wherein the content of the first and second substances,
the first comparison analysis process and the second comparison analysis process are respectively completed in the first identification screening module and the second identification screening module;
and the comparison analysis algorithms adopted by the first identification screening module and the second identification screening module are different.
4. The compatible method using the adaptive layout unit in the CSS Sprites technology of the router of claim 1, wherein at step S11: in the matched browser, the identification and screening process comprises the following steps:
receiving real-time browser information, and identifying whether the real-time browser information meets the requirement of using a self-adaptive layout unit in CSS Sprites;
performing first identification on the real-time browser information, and screening and retaining the real-time browser information if the first identification result shows that the real-time browser information meets the requirement of using a self-adaptive layout unit in CSS Sprites;
if the first recognition result is that the real-time browser information does not meet the condition that the self-adaptive layout unit used in the CSS Sprites exists, performing second recognition on the real-time browser information in the first recognition, and if the second recognition result is that the real-time browser information meets the condition that the self-adaptive layout unit used in the CSS Sprites exists, screening and retaining the real-time browser information; and if the second recognition result shows that the real-time browser information still does not meet the requirement of using the self-adaptive layout unit in the CSS Sprites, screening and filtering the real-time browser information.
5. The compatible method using adaptive layout units in CSS Sprites technology of claim 4, wherein said identification filtering process is performed by a first identification filtering unit and a second identification filtering unit; wherein the content of the first and second substances,
the first identification process and the second identification process are respectively completed in the first identification screening unit and the second identification screening unit;
and the identification algorithms adopted by the first identification screening unit and the second identification screening unit are different.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011010695.3A CN112149021B (en) | 2020-09-23 | 2020-09-23 | Compatible method for using self-adaptive layout unit in CSS Sprites technology of router |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011010695.3A CN112149021B (en) | 2020-09-23 | 2020-09-23 | Compatible method for using self-adaptive layout unit in CSS Sprites technology of router |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112149021A CN112149021A (en) | 2020-12-29 |
| CN112149021B true CN112149021B (en) | 2021-07-30 |
Family
ID=73896216
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011010695.3A Active CN112149021B (en) | 2020-09-23 | 2020-09-23 | Compatible method for using self-adaptive layout unit in CSS Sprites technology of router |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112149021B (en) |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102622382A (en) * | 2011-03-14 | 2012-08-01 | 北京小米科技有限责任公司 | Webpage rearranging method |
| CN103412928B (en) * | 2013-08-16 | 2017-05-10 | 北京乐动卓越科技有限公司 | Method and device for realizing browser page intelligent response-type layout on mobile terminal |
| CN104537002B (en) * | 2014-12-15 | 2018-04-17 | 山东中创软件商用中间件股份有限公司 | A kind of method and system of CSS compatibility tuning |
| CN104866570A (en) * | 2015-05-22 | 2015-08-26 | 国云科技股份有限公司 | Method for implementing CSS multi-browser compatibility |
| CN109783101A (en) * | 2019-01-25 | 2019-05-21 | 北京字节跳动网络技术有限公司 | The page layout method and device of browser automatic adaptation |
| CN110837617B (en) * | 2019-10-11 | 2024-05-07 | 平安科技（深圳）有限公司 | Webpage self-adaptive layout method, server and computer readable storage medium |
-
2020
- 2020-09-23 CN CN202011010695.3A patent/CN112149021B/en active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN112149021A (en) | 2020-12-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110310229B (en) | Image processing method, image processing apparatus, terminal device, and readable storage medium | |
| EP3474136A1 (en) | Method and apparatus for use in converting building block programming into program code | |
| WO2020248375A1 (en) | Method and system for synchronizing data between databases, computer device and storage medium | |
| WO2017219983A1 (en) | Method and terminal for acquiring application program between terminals | |
| CN110333880B (en) | Configuration updating method, device, equipment and storage medium | |
| CN112925570A (en) | Application operation method and device based on dual systems, electronic equipment and storage medium | |
| CN111324378B (en) | Configuration method, device and equipment for video monitoring application software | |
| US20200379748A1 (en) | Upgrading method and apparatus | |
| CN108776587B (en) | Data acquisition method and device, computer equipment and storage medium | |
| CN111355941A (en) | Image color real-time correction method, device and system | |
| CN112149021B (en) | Compatible method for using self-adaptive layout unit in CSS Sprites technology of router | |
| CN106933932B (en) | Data processing method and device and application server | |
| CN112083925A (en) | Data acquisition method, device, equipment and storage medium based on H5 page development | |
| CN111354050A (en) | Android-based picture compression method and device and storage medium | |
| CN110837500A (en) | Data screening method and device based on local embedded window and computer equipment | |
| CN109005163A (en) | A kind of HTTP dynamic requests service calling method | |
| CN114356330A (en) | Page configuration method and device, electronic equipment and storage medium | |
| CN113784067A (en) | Character superimposing method and device, storage medium and electronic device | |
| CN112650567A (en) | Implementation method and device of global universal timer and computer equipment | |
| WO2022236981A1 (en) | 5g icon display control method and apparatus, and terminal device and storage medium | |
| CN110532070B (en) | Method, storage medium, device and system for method invocation | |
| CN108848187B (en) | Method, device and equipment for establishing communication connection and readable storage medium | |
| CN117294904A (en) | Web end video synthesis method and device | |
| CN111338653B (en) | Data processing method, device, computer equipment and storage medium | |
| CN115348347A (en) | Call information display method, communication terminal, and computer storage medium |
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 |