Page adaptation method, device, electronic device and computer-readable storage medium

Abstract

The embodiment of the present application provides a page adaptation method, device, electronic device and computer-readable storage medium. The method includes: determining the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed; converting the style to be converted based on a preset conversion rule to obtain a converted style; and displaying the page to be displayed based on the converted style. Based on this solution, the size unit corresponding to the style in the page to be displayed can be automatically converted based on the conversion rule, and the page to be displayed can be automatically matched, which reduces the amount of code development and maintenance, and has high development efficiency, which can better meet actual usage needs.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a page adaptation method, device, electronic device and computer-readable storage medium. Background Art

[0002] At present, mobile web pages mainly include H5 pages, hybrid development pages, and mini-program pages. (1) H5 pages: H5 pages running on mobile device browsers. (2) Hybrid development pages: H5 pages embedded in mobile apps, non-native development (Android and iOS development) pages. (3) Mini-program pages: including WeChat mini-programs, Alipay mini-programs, Baidu mini-programs, and Toutiao mini-programs.

[0003] When developers are adapting web pages, they need to write page codes based on the UI design draft and convert them into mobile page codes based on the adaptation algorithm. The converted code can run on H5 pages and mini-program pages; at the same time, it will be displayed consistently on devices with different screen resolutions to achieve the adaptation effect.

[0004] When developers develop H5 pages and mini-program pages, they need to develop H5 pages and mini-program pages separately; in order to adapt to various mobile devices, they often need to develop multiple sets of style codes, and load different style files in the page according to different resolutions to achieve screen adaptation. After the project goes online, it is also necessary to maintain multiple sets of codes. The existing development model has a large development and maintenance workload and low efficiency, and can no longer meet actual usage needs. Summary of the invention

[0005] The purpose of this application is to solve at least one of the above technical defects. The technical solution adopted by this application is as follows:

[0006] In a first aspect, an embodiment of the present application provides a page adaptation method, the method comprising:

[0007] Determine the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed;

[0008] The style to be converted is converted based on a preset conversion rule to obtain a converted style;

[0009] The page to be displayed is displayed based on the converted style.

[0010] Optionally, before determining the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed, the method further includes:

[0011] Verify the conversion parameters corresponding to the conversion rules.

[0012] Optionally, determining the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed includes:

[0013] Determine a candidate style from the styles of the page to be displayed based on a size unit corresponding to the style of the page to be displayed;

[0014] The styles other than the specified style in the candidate styles are determined as styles to be converted.

[0015] Optionally, the style to be converted is converted based on a preset conversion rule, including:

[0016] Convert the size units of the style to be converted based on the preset conversion rules.

[0017] Optionally, displaying the page to be displayed based on the converted style includes:

[0018] Determine whether there is a conversion anomaly in the conversion of the style to be converted;

[0019] If it does not exist, the page to be displayed is displayed based on the converted style.

[0020] Optionally, determining the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed includes:

[0021] Based on the size unit corresponding to the style of the page to be displayed, the style file corresponding to the style of the page to be displayed is matched based on the regular expression, and the style to be converted is determined from the style of the page to be displayed.

[0022] Optionally, the style file includes at least one of the following:

[0023] Html files;

[0024] JavaScript script files;

[0025] CSS Cascading Style Sheet file.

[0026] In a second aspect, an embodiment of the present application provides a page adaptation device, the device comprising:

[0027] A module for determining a style to be converted, used to determine a style to be converted from the style of the page to be displayed based on a size unit corresponding to the style of the page to be displayed;

[0028] A style conversion module, used to convert the style to be converted based on a preset conversion rule to obtain a converted style;

[0029] The page display module is used to display the page to be displayed based on the converted style.

[0030] Optionally, the above device further includes:

[0031] The conversion parameter checking module is used to check the conversion parameters corresponding to the conversion rule before determining the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed.

[0032] Optionally, the module for determining the style to be converted is specifically used for:

[0033] Determine a candidate style from the styles of the page to be displayed based on a size unit corresponding to the style of the page to be displayed;

[0034] The styles other than the specified style in the candidate styles are determined as styles to be converted.

[0035] Optionally, when converting the style to be converted based on a preset conversion rule, the style conversion module is specifically used to:

[0036] Convert the size units of the style to be converted based on the preset conversion rules.

[0037] Optionally, the page display module is specifically used for:

[0038] Determine whether there is a conversion anomaly in the conversion of the style to be converted;

[0039] If it does not exist, the page to be displayed is displayed based on the converted style.

[0040] Optionally, the module for determining the style to be converted is specifically used for:

[0041] Based on the size unit corresponding to the style of the page to be displayed, the style file corresponding to the style of the page to be displayed is matched based on the regular expression, and the style to be converted is determined from the style of the page to be displayed.

[0042] Optionally, the style file includes at least one of the following:

[0043] Html files;

[0044] JavaScript script files;

[0045] CSS Cascading Style Sheet file.

[0046] In a third aspect, an embodiment of the present application provides an electronic device, the electronic device comprising: a processor and a memory;

[0047] A memory, used for storing operation instructions;

[0048] The processor is used to execute the page adaptation method shown in any implementation of the first aspect of the present application by calling an operation instruction.

[0049] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the page adaptation method shown in any implementation of the first aspect of the present application.

[0050] The beneficial effects of the technical solution provided by the embodiment of the present application are:

[0051] The solution provided by the embodiment of the present application determines the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed; converts the style to be converted based on a preset conversion rule to obtain a converted style; and displays the page to be displayed based on the converted style. Based on this solution, the size unit corresponding to the style in the page to be displayed can be automatically converted based on the conversion rule, and the automatic matching of the page to be displayed is realized, which reduces the amount of code development and maintenance, and has high development efficiency, which can better meet actual usage needs. BRIEF DESCRIPTION OF THE DRAWINGS

[0052] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in describing the embodiments of the present application are briefly introduced below.

[0053] Figure 1 A schematic diagram of a flow chart of a page adaptation method provided in an embodiment of the present application;

[0054] Figure 2 A schematic diagram of the structure of a page adaptation device provided in an embodiment of the present application;

[0055] Figure 3 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0056] The embodiments of the present application are described in detail below, and examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain the present application, and cannot be interpreted as limiting the present invention.

[0057] It will be understood by those skilled in the art that, unless expressly stated, the singular forms "one", "said", and "the" used herein may also include plural forms. It should be further understood that the term "comprising" used in the specification of the present application refers to the presence of the features, integers, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or groups thereof. It should be understood that when we refer to an element as being "connected" or "coupled" to another element, it may be directly connected or coupled to the other element, or there may be an intermediate element. In addition, the "connection" or "coupling" used herein may include wireless connection or wireless coupling. The term "and / or" used herein includes all or any unit and all combinations of one or more associated listed items.

[0058] In order to make the objectives, technical solutions and advantages of the present application clearer, the implementation methods of the present application will be further described in detail below with reference to the accompanying drawings.

[0059] The technical solution of the present application and how the technical solution of the present application solves the above-mentioned technical problems are described in detail below with specific embodiments. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of the present application will be described below in conjunction with the accompanying drawings.

[0060] Figure 1 A schematic diagram of a flow chart of a page adaptation method provided in an embodiment of the present application is shown. Figure 1 As shown, the method may mainly include:

[0061] Step S110: determining a style to be converted from the styles of the page to be displayed based on the size unit corresponding to the style of the page to be displayed;

[0062] Step S120: converting the style to be converted based on a preset conversion rule to obtain a converted style;

[0063] Step S130: displaying the page to be displayed based on the converted style.

[0064] In an embodiment of the present application, the page to be displayed may run on an H5 page or a mini-program page. The size units corresponding to the styles in the design draft of the page to be displayed (i.e., input units) and the size units corresponding to the styles when the page to be displayed runs on the H5 page or the mini-program page (i.e., output units) can be pre-acquired, thereby configuring conversion rules for the input units and output units.

[0065] Before displaying the page to be displayed, the style to be converted can be determined from the style of the page to be displayed, and the size units can be converted for the style to be converted to obtain the converted style. The size units corresponding to the converted style can match the size units corresponding to the screen page during output, so that the page to be displayed can be displayed based on the converted style.

[0066] The method provided in the embodiment of the present application determines the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed; converts the style to be converted based on a preset conversion rule to obtain a converted style; and displays the page to be displayed based on the converted style. Based on this solution, the size unit corresponding to the style in the page to be displayed can be automatically converted based on the conversion rule, and the automatic matching of the page to be displayed is realized, which reduces the amount of code development and maintenance, and has high development efficiency, which can better meet actual usage needs.

[0067] In an optional manner of the embodiment of the present application, before determining the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed, the method further includes:

[0068] Verify the conversion parameters corresponding to the conversion rules.

[0069] In an embodiment of the present application, the conversion rule may include conversion parameters. Before performing style conversion, the conversion parameters may be verified to ensure the accuracy of the conversion parameters, and the style conversion may be performed after confirming that the conversion parameters have passed the verification.

[0070] As an example, the conversion parameters in this application may include the design draft width (width), input unit (inUnit), output unit (outUnit), conversion precision (unitPrecision), root element font size (rootValue), style to ignore conversion (selectorBlackList), minimum conversion value (minPixelValue) and mobile device resolution (clientWidth).

[0071] The default value of the design draft width (width) can be 750 (numeric type) or other numbers (such as setting it to 360 logical pixels, that is, 720 physical pixels, that is, the design draft width is 720).

[0072] Input units are mainly divided into two types: pixels (px) and mini-program relative units (rpx). Code written in pixels (px) can be directly displayed on H5 pages and program pages. Code written in rpx relative units can be used on mini-programs (including WeChat, Alipay, Baidu, etc.).

[0073] There are three main output units: vw, rem, and rpx. vw and rem can be directly run on H5 pages, and rpx can be directly run on mini-program pages. If the output unit is rem, web page adaptation requires configuring the root element font size of the web page (the default font size of the root element of the web page is 16px) and setting the mate tag named viewpoint.

[0074] The conversion precision refers to the number of decimal places retained after the conversion. The default is 5, such as 0.00001vw or 0.00001rem.

[0075] When the output unit (outUnit) is set to rem, you need to set the root element font size (rootValue). The default root element font size (rootValue) is 16 (in pixels). When the output unit (outUnit) is set to vw and rpx, the root element font size (rootValue) can be left unchanged.

[0076] The styles that need to be ignored, that is, set the conversion blacklist. The styles in the conversion blacklist will not be converted. The styles that need to be ignored can be configured as an array.

[0077] If the array element is configured as a string, the style containing the passed value will be matched as a style to be ignored. For example, if selectorBlackList is configured as ['color'], the .color-class style will be determined as a style to be ignored.

[0078] If the array element is configured as a regular expression, the style to be ignored can be determined by whether the style sheet matches the regular expression. For example, if selectorBlackList is configured as [ / ^color$ / ], color will be ignored, but .color will not.

[0079] The minimum conversion value, that is, setting the conversion precision, is 1 by default, that is, only values ​​greater than 1 will be converted, and styles less than the conversion value will not be converted.

[0080] The mobile device resolution refers to logical pixels. The default resolution of the mobile device is 375. In actual use, the mobile device resolution can also be obtained through the following script: document.documentElement.clientWidth.

[0081] For mini programs and H5 interfaces, the input units are mainly divided into two types: pixels (px) and mini program relative units (rpx). There are three main output units: vw, rem, and rpx. There are a total of 5 arrangements of input and output, as shown in Table 1.

[0082] Table 1

[0083] Input Units Output Units Pixel Viewport units vw Pixel Relative unit rem Pixel Relative unit rpx Relative units (rpx) Viewport units vw Relative units (rpx) Relative unit rem

[0084] The specific conversion rules are as follows:

[0085] 1. Convert pixel px to viewport unit vw. The conversion formula is:

[0086]

[0087] Among them, width is the value of the design draft width, input is the input value, and value is the value of the viewport unit.

[0088] For example, width=750, input=375px, value=(375*100) / 750=50vw, which occupies 50% of the width of the screen.

[0089] The application scenario of this conversion rule is: H5 pages and mini program pages with px (pixel) as the unit. The converted code style unit is vw (viewport unit), which can be adapted to H5 pages and mini program pages.

[0090] 2. Convert pixel px to relative unit rem. The conversion formula is:

[0091]

[0092] Among them, input is the input value, rootValue is the root font size, and value is the value of the relative unit rem.

[0093] For example, if the input is 375px, the default rootValue is 16, value = 375 / 16 = 23.4375rem.

[0094] The application scenario of this conversion rule is: H5 pages and mini program pages with px (pixel) as the unit. The converted code style unit is rem, which can be run on H5 pages and mini program pages.

[0095] When using this conversion rule, you can configure the viewport attribute of the meta tag. When the mobile web page uses the rem relative unit for adaptation, you can set the meta tag with the name viewport, that is, <meta name＝"viewport"content＝"width＝device-width,initial-scale＝1,minimum-scale＝1,maximum-scale＝1,user-scalable＝no">

[0096] In addition, the default size of rootValue is 16px, so there is no need to configure the font size of the root element of the page. If you configure it to other pixel sizes, you can set the font size (font-size) of the html tag to the corresponding size value.

[0097] 3. Convert pixel px to relative unit rpx. The conversion formula is:

[0098]

[0099] Among them, width is the value of the design draft width, input is the input value, clientWidth is the value of the mobile device resolution, and value is the value of the relative unit rpx.

[0100] For example, width=750, input=375px, clientWidth=375px,

[0101] The application scenario of this conversion rule is: H5 pages and mini program pages with px (pixels) as the unit. The unit of the converted code style is rpx, which can be adapted to the mini program page.

[0102] 4. The relative unit rpx is converted to the viewport unit vw. The conversion formula is:

[0103]

[0104] Among them, input is the input value, width is the value of the design draft width, and value is the value of the viewport unit vw.

[0105] For example, width=750, input=375px, That is, it takes up 50% of the screen width.

[0106] The application scenario of this conversion rule is: for mini program pages with rpx (relative unit), the converted code style unit is vw, which can be adapted to H5 pages and mini program pages.

[0107] 5. The relative unit rpx is converted to the relative unit rem. The conversion formula is:

[0108]

[0109] Among them, input is the input value, rootValue is the root font size, and value is the value of the relative unit rem.

[0110] For example, input = 375px, rootValue defaults to 16.

[0111] Based on the above example, the validation rules for the conversion parameters are as follows:

[0112] 1. Parameter verification of design draft width:

[0113] Design draft width (width): width is a positive integer, and the default value is 750. When width is not a positive integer, the algorithm throws an exception, prompting the developer to check the design draft width (width).

[0114] 2. Parameter verification of input unit (inUnit):

[0115] Input unit (inUnit): inUnit is a string, the value can be 'px' and 'rpx', the default value is 'px' (pixel). When inUnit is not 'px' or 'prx', the algorithm throws an exception, prompting the developer to check the input unit (inUnit).

[0116] 3. Output unit (outUnit) parameter verification:

[0117] Output unit (outUnit): outUnit is a string, with the value 'vw' or 'rem', and the default value is 'vw' (viewport unit width). When outUnit is not 'vw' or 'rem', the algorithm throws an exception, prompting the developer to check the output unit (outUnit).

[0118] 4. Conversion precision (unitPrecision) parameter verification:

[0119] Conversion precision (unitPrecision): unitPrecision is an integer greater than or equal to 0. The default value is 5, which means that 5 decimal places are retained. When it is set to 0, the conversion result is an integer. When unitPrecision is not an integer greater than or equal to 0, the algorithm throws an exception, prompting the developer to check the conversion precision (unitPrecision).

[0120] 5. Verify the root element font size (rootValue) parameter:

[0121] Root element font size (rootValue): rootValue is a positive integer, and the default value is 16, which means the font size of the root element (i.e., html tag) is 16 pixels. When rootValue is not a positive integer, the algorithm throws an exception, prompting the developer to check the conversion precision (unitPrecision).

[0122] 6. Ignore the conversion style (selectorBlackList) parameter verification:

[0123] Ignore conversion styles (selectorBlackList): selectorBlackList is an array, selectorBlackList indicates styles that do not need to be converted, and uses the original input unit (inUnit). When the ignore conversion style (selectorBlackList) is not an array, the algorithm throws an exception, prompting the developer to check the ignore conversion style (selectorBlackList); if the ignore conversion style (selectorBlackList) is an array, but each element of the array is not a string or a regular expression, the algorithm throws an exception, prompting the developer to check the ignore conversion style (selectorBlackList).

[0124] 7. Minimum conversion value (minPixelValue) parameter verification:

[0125] Minimum conversion value (minPixelValue): minPixelValue is a positive integer, and the default value is 1, that is, only values ​​greater than 1 will be converted. When minPixelValue is not a positive integer, the algorithm throws an exception, prompting the developer to check the minimum conversion value (minPixelValue).

[0126] 8. Verify the mobile device resolution (clientWidth) parameter:

[0127] Mobile device resolution (clientWidth): clientWidth is a positive integer, and the default value is 375. When clientWidth is not a positive integer, the algorithm throws an exception, prompting the developer to check the mobile device resolution (clientWidth).

[0128] In an optional manner of the embodiment of the present application, determining the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed includes:

[0129] Determine a candidate style from the styles of the page to be displayed based on a size unit corresponding to the style of the page to be displayed;

[0130] The styles other than the specified style in the candidate styles are determined as styles to be converted.

[0131] In the embodiment of the present application, when determining the style to be converted, the candidate styles can be first found based on the size unit corresponding to the style and the input unit configured in the conversion rule, and then the specified style in the candidate styles is ignored to obtain the style to be converted. The specified style is the style ignored for conversion.

[0132] In an optional manner of the embodiment of the present application, converting the to-be-converted style based on a preset conversion rule includes:

[0133] Convert the size units of the style to be converted based on the preset conversion rules.

[0134] In the embodiment of the present application, the size unit of the style to be converted can be converted based on the above conversion rules to obtain the style to be converted.

[0135] In an optional manner of the embodiment of the present application, displaying the page to be displayed based on the converted style includes:

[0136] Determine whether there is a conversion anomaly in the conversion of the style to be converted;

[0137] If it does not exist, the page to be displayed is displayed based on the converted style.

[0138] In the embodiment of the present application, it can be determined whether there is an abnormality in the above-mentioned style conversion process. When it is determined that there is no conversion abnormality, the page to be displayed can be displayed based on the converted style.

[0139] In an optional manner of the embodiment of the present application, determining the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed includes:

[0140] Based on the size unit corresponding to the style of the page to be displayed, the style file corresponding to the style of the page to be displayed is matched based on the regular expression, and the style to be converted is determined from the style of the page to be displayed.

[0141] In the embodiment of the present application, a regular expression may be used to match the size units in the content of the style file, thereby determining the style to be converted.

[0142] In an optional manner of the embodiment of the present application, the style file includes at least one of the following:

[0143] Html files;

[0144] JavaScript script files,

[0145] CSS Cascading Style Sheet file.

[0146] Web pages are mainly divided into structure (html in H5, template in mini-program page), interaction (JavaScript script) and style sheet (css). In the embodiment of the present application, the styles to be converted in structure (html in H5, template in mini-program page), interaction (JavaScript script) and style sheet (css) are converted, including inline styles in html and dynamic styles in JavaScript.

[0147] Inline styles are styles written directly to tag elements, such as:

[0148] <p style＝"color:red；margin-left:20px">

[0149] This is a paragraph

[0150]

[0151] Dynamic styles are written using JavaScript scripts, such as:

[0152] var div=document.getElementById("div1");

[0153] div.setAttribute("style","font-size:44px;");

[0154] As an example, the core regular expression that matches the pattern to be converted is: new RegExp("\\b\\d+(\\.\\d+)?"+inUnit+"\\b",'g'), where inUnit is the input unit.

[0155] The solution provided in the embodiment of the present application has the following advantages:

[0156] (1) The conversion input and output units are configurable. Developers can configure the algorithm parameters themselves. The input parameters can be 'px' pixels or the mini-program's 'rpx' relative unit; the output parameters can be the window unit 'vw', the relative unit 'rem', or the mini-program's 'rpx' relative unit.

[0157] (2) Root element attributes are optional. When the output unit is 'vw' and 'rpx', there is no need to configure the page root element attributes. When the output unit is 'rem', the default root element font size is 16px, and the developer does not need to configure the root element font size; if the developer configures the root element font size (rootValue) in the input parameter to other numerical sizes, the root element attributes need to be configured.

[0158] (3) Simple conversion. The method provided in the embodiment of the present application can be encapsulated as a plug-in. The developer introduces the plug-in during development, configures the input parameters, and runs the script to convert the corresponding output file. The plug-in is only run during the development phase. The plug-in will not be in the online deployment project file and will not affect the operation of the online system. Developers do not need to write the conversion logic themselves, but only need to configure the parameters to complete the adaptation work, which has high development efficiency and high project robustness.

[0159] (4) High scalability. Developers can configure conversion parameters according to their needs to meet more scenarios.

[0160] (5) Wide range of conversion content. The general adaptation solution only converts the units in the CSS style sheet, while this patent can convert the inline styles in HTML and the dynamic styles in JavaScript.

[0161] (6) High code reuse rate. One set of code can be used to convert code that can be used on H5 pages and mini program pages, and can be adapted to devices with different screen resolutions.

[0162] (7) Good web page performance. The converted code can be directly run on H5 and mini-program pages, and there is no need to execute JavaScript scripts in the web page to dynamically obtain the mobile screen device resolution. There is no need to use JavaScript scripts to set the font size of the root element of the web page (except when the conversion output unit is rem). There is no need to use JavaScript scripts to dynamically scale the page.

[0163] Based on Figure 1 The same principle as shown in the method, Figure 2 A schematic diagram of the structure of a page adaptation device provided in an embodiment of the present application is shown. Figure 2 As shown, the adaptation device 20 of the page may include:

[0164] The to-be-converted style determining module 210 is used to determine the to-be-converted style from the style of the to-be-displayed page based on the size unit corresponding to the style of the to-be-displayed page;

[0165] The style conversion module 220 is used to convert the style to be converted based on a preset conversion rule to obtain a converted style;

[0166] The page display module 230 is used to display the page to be displayed based on the converted style.

[0167] The device provided in the embodiment of the present application determines the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed; converts the style to be converted based on a preset conversion rule to obtain a converted style; and displays the page to be displayed based on the converted style. Based on this solution, the size unit corresponding to the style in the page to be displayed can be automatically converted based on the conversion rule, and the automatic matching of the page to be displayed is realized, which reduces the amount of code development and maintenance, and has high development efficiency, which can better meet actual usage needs.

[0168] Optionally, the above device further includes:

[0169] The conversion parameter checking module is used to check the conversion parameters corresponding to the conversion rule before determining the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed.

[0170] Optionally, the module for determining the style to be converted is specifically used for:

[0171] Determine a candidate style from the styles of the page to be displayed based on a size unit corresponding to the style of the page to be displayed;

[0172] The styles other than the specified style in the candidate styles are determined as styles to be converted.

[0173] Optionally, when converting the style to be converted based on a preset conversion rule, the style conversion module is specifically used to:

[0174] Convert the size units of the style to be converted based on the preset conversion rules.

[0175] Optionally, the page display module is specifically used for:

[0176] Determine whether there is a conversion anomaly in the conversion of the style to be converted;

[0177] If it does not exist, the page to be displayed is displayed based on the converted style.

[0178] Optionally, the module for determining the style to be converted is specifically used for:

[0179] Based on the size unit corresponding to the style of the page to be displayed, the style file corresponding to the style of the page to be displayed is matched based on the regular expression, and the style to be converted is determined from the style of the page to be displayed.

[0180] Optionally, the style file includes at least one of the following:

[0181] Html files;

[0182] JavaScript script files;

[0183] CSS Cascading Style Sheet file.

[0184] It can be understood that the above modules of the page adaptation device in this embodiment have the function of implementing Figure 1 The functions of the corresponding steps of the page adaptation method in the embodiment shown in . The function can be implemented by hardware, or by hardware executing corresponding software. The hardware or software includes one or more modules corresponding to the above functions. The above modules can be software and / or hardware, and the above modules can be implemented separately or integrated with multiple modules. For the functional description of each module of the above page adaptation device, please refer to Figure 1 The corresponding description of the page adaptation method in the embodiment shown in will not be repeated here.

[0185] An embodiment of the present application provides an electronic device, including a processor and a memory;

[0186] A memory, used for storing operation instructions;

[0187] The processor is used to execute the page adaptation method provided in any implementation manner of the present application by calling an operation instruction.

[0188] As an example, Figure 3 A schematic diagram of the structure of an electronic device applicable to the embodiment of the present application is shown. Figure 3 As shown, the electronic device 2000 includes: a processor 2001 and a memory 2003. The processor 2001 and the memory 2003 are connected, such as through a bus 2002. Optionally, the electronic device 2000 may also include a transceiver 2004. It should be noted that in actual applications, the transceiver 2004 is not limited to one, and the structure of the electronic device 2000 does not constitute a limitation on the embodiments of the present application.

[0189] The processor 2001 is applied in the embodiment of the present application to implement the method shown in the above method embodiment. The transceiver 2004 may include a receiver and a transmitter. The transceiver 2004 is applied in the embodiment of the present application to implement the function of the electronic device of the embodiment of the present application communicating with other devices when executed.

[0190] Processor 2001 may be a CPU (Central Processing Unit), a general purpose processor, a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit), an FPGA (Field Programmable Gate Array) or other programmable logic devices, transistor logic devices, hardware components or any combination thereof. It may implement or execute various exemplary logic blocks, modules and circuits described in conjunction with the disclosure of this application. Processor 2001 may also be a combination that implements computing functions, such as a combination of one or more microprocessors, a combination of a DSP and a microprocessor, etc.

[0191] The bus 2002 may include a path to transmit information between the above components. The bus 2002 may be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus. The bus 2002 may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 3 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0192] The memory 2003 can be a ROM (Read Only Memory) or other types of static storage devices that can store static information and instructions, a RAM (Random Access Memory) or other types of dynamic storage devices that can store information and instructions, or an EEPROM (Electrically Erasable Programmable Read Only Memory), a CD-ROM (Compact Disc Read Only Memory) or other optical disk storage, optical disk storage (including compressed optical disk, laser disk, optical disk, digital versatile disk, Blu-ray disk, etc.), a magnetic disk storage medium or other magnetic storage device, or any other medium that can be used to carry or store the desired program code in the form of instructions or data structures and can be accessed by a computer, but is not limited to these.

[0193] Optionally, the memory 2003 is used to store application code for executing the solution of the present application, and the execution is controlled by the processor 2001. The processor 2001 is used to execute the application code stored in the memory 2003 to implement the page adaptation method provided in any embodiment of the present application.

[0194] The electronic device provided in the embodiment of the present application is applicable to any embodiment of the above method and will not be described in detail here.

[0195] The embodiment of the present application provides an electronic device. Compared with the prior art, the style to be converted is determined from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed; the style to be converted is converted based on a preset conversion rule to obtain a converted style; and the page to be displayed is displayed based on the converted style. Based on this solution, the size unit corresponding to the style in the page to be displayed can be automatically converted based on the conversion rule, and the automatic matching of the page to be displayed is realized, which reduces the amount of code development and maintenance, and has high development efficiency, which can better meet actual usage needs.

[0196] An embodiment of the present application provides a computer-readable storage medium, on which a computer program is stored. When the program is executed by a processor, the page adaptation method shown in the above method embodiment is implemented.

[0197] The computer-readable storage medium provided in the embodiments of the present application is applicable to any embodiment of the above method and will not be described in detail here.

[0198] The embodiment of the present application provides a computer-readable storage medium. Compared with the prior art, the style to be converted is determined from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed; the style to be converted is converted based on a preset conversion rule to obtain a converted style; and the page to be displayed is displayed based on the converted style. Based on this solution, the size unit corresponding to the style in the page to be displayed can be automatically converted based on the conversion rule, and the automatic matching of the page to be displayed is realized, which reduces the amount of code development and maintenance, and has high development efficiency, which can better meet actual usage needs.

[0199] It should be understood that, although the steps in the flowchart of the accompanying drawings are displayed in sequence as indicated by the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a part of the sub-steps or stages of other steps.

[0200] The above are only some embodiments of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present invention. These improvements and modifications should also be regarded as the scope of protection of the present invention.

Claims

1. A page adaptation method, It is characterized in that include: Based on the size unit corresponding to the style of the page to be displayed, determine the style to be converted from the style of the page to be displayed, the size unit includes an input unit and an output unit, the input unit includes a pixel px and a relative unit rpx, and the output unit includes a viewport unit vw, a relative unit rem, and a relative unit rpx; The style to be converted is converted based on a preset conversion rule to obtain a converted style, wherein the conversion rule is to convert different input units into required output units to adapt to different pages to be displayed, and the specific conversion rules include: converting pixel px into viewport unit vw; converting pixel px into relative unit rem; converting pixel px into relative unit rpx; converting relative unit rpx into viewport unit vw; converting relative unit rpx into relative unit rem; The conversion rules include: Set the default value of the root element's font size; When the output unit is the relative unit rem, the conversion is performed according to the default value of the font size of the root element; When the output unit is viewport unit vw or relative unit rpx, the root element font size is ignored; The page to be displayed is displayed based on the converted style.

2. The method according to claim 1, It is characterized in that Before determining the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed, the method further includes: The conversion parameters corresponding to the conversion rule are verified.

3. The method according to claim 1, It is characterized in that The step of determining the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed includes: Determining a candidate style from the styles of the page to be displayed based on a size unit corresponding to the style of the page to be displayed; The styles other than the specified style in the candidate styles are determined as styles to be converted.

4. The method according to claim 1, It is characterized in that The converting the style to be converted based on a preset conversion rule includes: The size unit of the style to be converted is converted based on a preset conversion rule.

5. The method according to claim 1, It is characterized in that The displaying of the to-be-displayed page based on the converted style includes: Determine whether there is a conversion anomaly in the conversion of the style to be converted; If it does not exist, the page to be displayed is displayed based on the converted style.

6. The method according to claim 1, It is characterized in that The step of determining the style to be converted from the style of the page to be displayed based on the size unit corresponding to the style of the page to be displayed includes: Based on the size unit corresponding to the style of the page to be displayed, the style file corresponding to the style of the page to be displayed is matched based on a regular expression, and the style to be converted is determined from the style of the page to be displayed.

7. The method according to claim 6, It is characterized in that The style file includes at least one of the following: Html files; JavaScript script files; CSS Cascading Style Sheet file.

8. A page adaptation device, It is characterized in that include: a module for determining a style to be converted, for determining a style to be converted from the style of the page to be displayed based on a size unit corresponding to the style of the page to be displayed, wherein the size unit includes an input unit and an output unit, wherein the input unit includes a pixel px and a relative unit rpx, and the output unit includes a viewport unit vw, a relative unit rem, and a relative unit rpx; The style conversion module is used to convert the style to be converted based on a preset conversion rule to obtain a converted style. The conversion rule is to convert different input units into required output units to adapt to different pages to be displayed. The specific conversion rules include: converting pixel px into viewport unit vw; converting pixel px into relative unit rem; converting pixel px into relative unit rpx; converting relative unit rpx into viewport unit vw; converting relative unit rpx into relative unit rem; The conversion rules include: Set the default value of the root element's font size; When the output unit is the relative unit rem, the conversion is performed according to the default value of the font size of the root element; When the output unit is viewport unit vw or relative unit rpx, the root element font size is ignored; A page display module is used to display the page to be displayed based on the converted style.

9. An electronic device, It is characterized in that including a processor and a memory; The memory is used to store operation instructions; The processor is used to execute the method according to any one of claims 1 to 7 by calling the operation instruction.

10. A computer-readable storage medium, It is characterized in that The storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images