Cross-end page adaptive processing method and device and electronic equipment

Abstract

The invention provides a cross-end page adaptive processing method and device and electronic equipment, and relates to the technical field of computers. Comprising the steps of loading and running a target code according to script label information of the target code in the starting process of a target page project; when the target code runs, according to the screen size of the target equipment, the reference screen size, a preset font conversion proportion and a target display proportion of fonts in the page under the target page project, determining an initial font size when each text in at least one page under the target page project is displayed on the target equipment; and according to the initial font size, the device type of the target device and the screen size of the target device, determining a target font size when each text in the at least one page is displayed on the target device, thereby performing page display according to the target font size. According to the method, the font proportion consistency display of the same set of page engineering on the mobile terminal and the PC equipment can be realized through one set of codes, and the development efficiency of the page engineering is improved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and more specifically, to a cross-platform page adaptive processing method, apparatus, and electronic device. Background Technology

[0002] In page engineering development, a page system is usually required to have a consistent overall page layout on both personal computer (PC) and mobile devices. This means that the relative positions of page blocks, the font positions within blocks, and the font size ratio relative to the page size must be consistent. It can be understood that the mobile device is a proportionally scaled-down version of the PC.

[0003] Currently, it is common practice to develop a separate page system for PC and a separate one for mobile devices. When using the page system in a batch page project, each project needs to import it separately.

[0004] Overall, the above methods result in low page development efficiency and a poor user experience. Summary of the Invention

[0005] The purpose of this application is to address the shortcomings of the prior art by providing a cross-platform page adaptive processing method, apparatus, and electronic device to improve development efficiency during cross-platform page development.

[0006] To achieve the above objectives, the technical solutions adopted in the embodiments of this application are as follows: In a first aspect, embodiments of this application provide a cross-platform page adaptive processing method, comprising: in response to a user's launch operation on a target page project on a target device, during the launch process of the target page project, loading and running target code according to script tag information of the target code; the target device is a mobile device or a desktop device; When the target code is executed, the initial font size of each text in at least one page of the target page project is determined on the target device based on the screen size of the target device, the preset baseline screen size, the preset font conversion ratio, and the target display ratio of the font in the page under the target page project. Based on the initial font size, the device type of the target device, and the screen size of the target device, determine the target font size for each text in the at least one page when displayed on the target device; Based on the target font size, display at least one page under the target page project on the target device.

[0007] Optionally, before the target page project is started, the process further includes: Generate the target code and the script tag information corresponding to the target code; the script tag information includes address information pointing to the target code; By configuring the platform, the script tag information corresponding to the target code is injected in batches into the source code of each page project.

[0008] Optionally, determining the initial font size of each text in at least one page of the target page project when displayed on the target device, based on the screen size of the target device, a preset baseline screen size, a preset font conversion ratio, and the target display ratio of the fonts in the pages under the target page project, includes: Based on the screen size of the target device and the reference screen size, determine the scaling ratio of the screen size of the target device relative to the reference screen size; Based on the scaling ratio of the target device's screen size relative to the reference screen size and the font conversion ratio, determine the font size of the target device at the corresponding unit display ratio; Based on the font size at the unit display ratio corresponding to the target device and the target display ratio, determine the initial font size of each text in at least one page of the target page project when it is displayed on the target device.

[0009] Optionally, determining the target font size for each text in the at least one page when displayed on the target device, based on the initial font size, the device type of the target device, and the screen size of the target device, includes: Based on the device type of the target device, determine whether the target device has font constraint size; If the target device has a font constraint size, then the target font size for each text in the at least one page when displayed on the target device is determined based on the initial font size, the font constraint size, and the screen size of the target device.

[0010] Optionally, determining the target font size for each text in the at least one page when displayed on the target device, based on the initial font size, the font constraint size, and the screen size of the target device, includes: If the initial font size is smaller than the font constraint size, and the screen size of the target device is smaller than the preset size, then the target font size of each text in the at least one page when displayed on the target device is determined according to the font constraint size and the preset scaling ratio.

[0011] Optionally, determining the target font size for each text in the at least one page when displayed on the target device, based on the initial font size, the font constraint size, and the screen size of the target device, includes: If the initial font size is greater than or equal to the font constraint size, and the screen size of the target device is less than the preset size, then the initial font size will be used as the target font size when each text in the at least one page is displayed on the target device.

[0012] Optionally, determining the target font size for each text in the at least one page when displayed on the target device, based on the initial font size, the font constraint size, and the screen size of the target device, includes: If the screen size of the target device is greater than or equal to the preset size, then the initial font size is used as the target font size when each text in the at least one page is displayed on the target device.

[0013] Optionally, it further includes: if the target device does not have font constraint size, then the initial font size is used as the target font size when each text in the at least one page is displayed on the target device.

[0014] Secondly, embodiments of this application also provide a cross-platform page adaptive processing device, including: a running module, a processing module, and a display module; The running module is used to respond to the user's startup operation on the target page project on the target device. During the startup process of the target page project, the target code is loaded and run according to the script tag information of the target code; the target device is a mobile device or a desktop device. The processing module is used to determine the initial font size of each text in at least one page of the target page project when it is displayed on the target device, based on the screen size of the target device, the preset baseline screen size, the preset font conversion ratio, and the target display ratio of the font in the page under the target page project. The processing module is used to determine the target font size of each text in the at least one page when it is displayed on the target device, based on the initial font size, the device type of the target device, and the screen size of the target device; The display module is used to display at least one page under the target page project on the target device according to the target font size.

[0015] Optionally, the processing module is further configured to generate the target code and script tag information corresponding to the target code; the script tag information includes address information pointing to the target code; By configuring the platform, the script tag information corresponding to the target code is injected in batches into the source code of each page project.

[0016] Optionally, the processing module is specifically configured to determine the scaling ratio of the target device's screen size relative to the reference screen size based on the target device's screen size and the reference screen size; Based on the scaling ratio of the target device's screen size relative to the reference screen size and the font conversion ratio, determine the font size of the target device at the corresponding unit display ratio; Based on the font size at the unit display ratio corresponding to the target device and the target display ratio, determine the initial font size of each text in at least one page of the target page project when it is displayed on the target device.

[0017] Optionally, the processing module is specifically used to determine whether the target device has font constraint size based on the device type of the target device; If the target device has a font constraint size, then the target font size for each text in the at least one page when displayed on the target device is determined based on the initial font size, the font constraint size, and the screen size of the target device.

[0018] Optionally, the processing module is specifically configured to determine the target font size of each text in the at least one page when displayed on the target device, based on the font constraint size and the preset scaling ratio, if the initial font size is smaller than the font constraint size and the screen size of the target device is smaller than the preset size.

[0019] Optionally, the processing module is specifically configured to use the initial font size as the target font size when each text in the at least one page is displayed on the target device if the initial font size is greater than or equal to the font constraint size and the screen size of the target device is less than the preset size.

[0020] Optionally, the processing module is specifically configured to, if the screen size of the target device is greater than or equal to the preset size, use the initial font size as the target font size when each text in the at least one page is displayed on the target device.

[0021] Optionally, the processing module is further configured to, if the target device does not have font constraint size, use the initial font size as the target font size when each text in the at least one page is displayed on the target device.

[0022] Thirdly, embodiments of this application provide an electronic device, including: a processor, a storage medium, and a bus. The storage medium stores machine-readable instructions executable by the processor. When the electronic device is running, the processor communicates with the storage medium via the bus, and the processor executes the machine-readable instructions to implement the cross-platform page adaptive processing method provided in the first aspect.

[0023] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program that, when executed by a processor, performs the cross-platform page adaptive processing method as provided in the first aspect.

[0024] The beneficial effects of this application are: This application provides a cross-platform page adaptive processing method, apparatus, and electronic device, comprising: responding to a user's startup operation on a target page project on a target device, during the startup process of the target page project, loading and running target code according to the script tag information of the target code; during the execution of the target code, determining the initial font size of each text in at least one page under the target page project when displayed on the target device based on the screen size of the target device, a preset baseline screen size, a preset font conversion ratio, and the target display ratio of the font in the pages under the target page project; determining the target font size of each text in at least one page when displayed on the target device based on the initial font size, the device type of the target device, and the screen size of the target device; and displaying at least one page under the target page project on the target device according to the target font size. This method injects the script tag information of the target code into the source code of the page project, so that when the page project is started on a mobile device or PC device, upon reaching the script tag information, it triggers the loading and execution of the target code from an external source, thereby enabling the target code to adaptively determine the initial font size of the text font in each page under the page project according to the screen size of the mobile device or PC device, and displaying the page according to the determined initial font size. This method allows for consistent font ratio display across mobile and PC devices using a single codebase, improving development efficiency. Furthermore, for devices with minimum font size limitations, a target font size can be determined based on the initial font size, device type, and screen size. The page is then displayed according to this target font size, effectively addressing the issue of compatibility across different device types when displaying the minimum font size that a device can accept, thus achieving universal adaptation.

[0025] Secondly, by using the configuration platform, the target code can be injected in batches into multiple front-end page projects in the form of script tag information, thus avoiding the time-consuming process of injecting one by one. At the same time, by injecting in the form of script tag information, when the target code changes, there is no need to modify each page project individually. You only need to reference the updated target code in the configuration platform, which reduces the development cost of page projects and improves development efficiency. Attached Figure Description

[0026] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0027] Figure 1 A flowchart illustrating a cross-platform page adaptive processing method provided in this application embodiment. Figure 1 ; Figure 2 A flowchart illustrating a cross-platform page adaptive processing method provided in this application embodiment. Figure 2 ; Figure 3 A flowchart illustrating a cross-platform page adaptive processing method provided in this application embodiment. Figure 3 ; Figure 4 A flowchart illustrating a cross-platform page adaptive processing method provided in this application embodiment. Figure 4 ; Figure 5 A schematic diagram of a cross-platform page adaptive processing device provided in an embodiment of this application; Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0028] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. It should be understood that the accompanying drawings in this application are for illustrative and descriptive purposes only and are not intended to limit the scope of protection of this application. Furthermore, it should be understood that the schematic drawings are not drawn to scale. The flowcharts used in this application illustrate operations implemented according to some embodiments of this application. It should be understood that the operations in the flowcharts may not be implemented in sequence, and steps without logical contextual relationships may be reversed or implemented simultaneously. In addition, those skilled in the art, guided by the content of this application, may add one or more other operations to the flowcharts, or remove one or more operations from the flowcharts.

[0029] Furthermore, the described embodiments are merely some, not all, of the embodiments of this application. The components of the embodiments of this application described and illustrated herein can typically be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this application provided in the accompanying drawings is not intended to limit the scope of the claimed application, but merely to illustrate selected embodiments of the application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0030] It should be noted that the term "comprising" will be used in the embodiments of this application to indicate the presence of the features declared thereafter, but does not exclude the addition of other features.

[0031] In web page development scenarios, it is usually required that the same web page system can be displayed normally on both desktop (PC) and mobile devices. The font size on the mobile page can be smaller, but the visual proportions and layout structure must be completely consistent. You can think of the mobile page as a scaled-down version of the PC page. When the same page is zoomed in on the mobile device, it can be directly transformed into the PC page.

[0032] Currently, it's common practice to develop one set of page code for PC and another set for mobile. However, this development cost is relatively high. When delivery time is tight, a more convenient approach is to have an adaptation solution that can enable the page to display correctly on both PC and mobile devices using a single set of code.

[0033] To address this need, this solution provides a cross-platform page adaptive processing method. By injecting target code's script tag information into the page project's source code, when the page project starts on a mobile or PC device, the execution of the target code is triggered upon reaching the script tag information. This target code then adaptively determines the text font display size of each page within the page project based on the screen size of the mobile or PC device, and displays the page according to the determined size. This method allows for consistent font ratio display across mobile and PC devices using a single codebase, improving page project development efficiency.

[0034] Figure 1 A flowchart illustrating a cross-platform page adaptive processing method provided in this application embodiment. Figure 1 ;like Figure 1 As shown, the method includes: S101. In response to the user's startup operation on the target page project on the target device, during the startup process of the target page project, the target code is loaded and run according to the script tag information of the target code.

[0035] The target device is a mobile device or a desktop device.

[0036] The target device is the device that needs to be launched and loaded with the target page project. The target page project can refer to any page system, such as a page system for an e-commerce shopping platform or an automated office page system. A page project can contain one or more pages that need to be displayed. By launching the target page project on the target device, the source code of the target page project can be executed, and after successful launch, the specific pages under the target page project can be displayed on the target device.

[0037] Multiple page project identifiers can be displayed on the target device, allowing different page projects to be launched on the target device. The target page project to be launched can be determined based on the user's operation.

[0038] The target device can be a mobile device or a desktop device. Mobile devices can refer to smartphones, small tablets, or other devices that primarily use touchscreens for interaction and are characterized by small screens and high portability. Desktop devices can refer to PCs, such as desktop computers, laptops, and large-screen tablets, which use a combination of mouse and keyboard for interaction and are characterized by large screens and high resolution.

[0039] In some embodiments, during the startup of the target page project, the target code can be loaded and run from a specified address based on the script tag information of the target code injected in the source code of the target page project.

[0040] S102. When the target code is running, the initial font size of each text in at least one page of the target page project is determined to be displayed on the target device based on the screen size of the target device, the preset baseline screen size, the preset font conversion ratio, and the target display ratio of the font in the page under the target page project.

[0041] The target code's function is to adaptively determine the display size of the font on the page when it is displayed on the current device, based on the current device's screen size and the pre-set target display ratio of the font. This allows the same page system to adaptively adjust the font display size when displayed on devices of different sizes, ensuring that the font occupies the same proportion of the page when displayed on different devices.

[0042] During execution, the target code can adaptively determine the initial font size of the text in the target page project when it is displayed on the target device, based on the target device's screen size, the preset baseline screen size, the preset font conversion ratio, and the target display ratio of the font in the page project.

[0043] The preset baseline screen size can be set to the maximum screen size, that is, the maximum screen size of the PC, 1920, is used as the baseline screen size; subsequent screen sizes are all based on the baseline screen size to calculate the font scaling ratio, so as to ensure that the font size can be adapted proportionally as the screen size changes.

[0044] The preset font conversion ratio can refer to the ratio between the relative length unit rem and the absolute pixel unit px. The target display ratio of the font in the target page project can refer to the proportion of the font in the page or screen size. For example, in an office page, the font size occupies 10% of the page size. By setting the target display ratio of the font, the proportion of the font size to the page size can be kept constant regardless of the screen size, thus ensuring the consistency of the font layout.

[0045] This solution uses rem as the unit of calculation. By calculating the scaling ratio of the current screen size relative to the baseline screen size, and then determining the px size corresponding to the unit rem under the current screen size based on the conversion ratio between rem and px, the initial font size of each text in at least one page of the target page project can be determined when displayed on the target device.

[0046] By dynamically binding rem to screen size, it can be ensured that the fonts on the page maintain the same relative proportions on different screen sizes, thus perfectly adapting to devices with different screen sizes with a single set of page code.

[0047] S103. Based on the initial font size, the device type of the target device, and the screen size of the target device, determine the target font size for each text in at least one page when it is displayed on the target device.

[0048] In some embodiments, some devices have a minimum display font size limit. When the screen size is small and the calculated initial font size is smaller than the minimum display font size, the minimum display font size will be used for display. This will cause the same set of page code to have different display sizes when displaying a font size close to the minimum that the device can accept. Some devices have internal adaptation capabilities and can display the font size normally, while other devices will display the minimum acceptable font size, which will make the font size very large. This will cause the same set of page code to be incompatible with the adaptation of different devices.

[0049] Based on this, this embodiment can also determine the target font size of each text in at least one page when it is displayed on the target device, according to the initial font size, the device type of the target device, and the screen size of the target device.

[0050] S104. Based on the target font size, display at least one page from the target page project on the target device.

[0051] Optionally, on the target device, the text on each page of the target page project can be displayed according to the target font size. This ensures that the font size of each text on the page displayed on the target device accounts for the target display ratio of the screen size.

[0052] In this way, when the target device is changed and the screen size changes, the target font size of each text in at least one page under the target page project can still be calculated according to the above method. This ensures that the font size of each text in at least one page under the target page project can reach the target display ratio under different screen sizes, so that the font ratio and layout of the same page system can remain consistent when displayed on different screen sizes.

[0053] In summary, the cross-platform page adaptive processing method provided in this embodiment includes: responding to a user's startup operation on a target page project on a target device, during the startup process of the target page project, loading and running the target code according to the script tag information of the target code; during the execution of the target code, determining the initial font size of each text in at least one page under the target page project when displayed on the target device based on the screen size of the target device, a preset baseline screen size, a preset font conversion ratio, and the target display ratio of the font in the pages under the target page project; determining the target font size of each text in at least one page when displayed on the target device based on the initial font size, the device type of the target device, and the screen size of the target device; and displaying at least one page under the target page project on the target device based on the target font size. This method injects the script tag information of the target code into the source code of the page project, so that when the page project is started on a mobile device or PC device, when the script tag information is reached, the target code is triggered to be loaded and executed from the outside, thereby achieving adaptive determination of the initial font size of the text font of each page under the page project according to the screen size of the mobile device or PC device, and displaying the page according to the determined initial font size. This method allows for consistent font ratio display across mobile and PC devices using a single codebase, improving development efficiency. Furthermore, for devices with minimum font size limitations, a target font size can be determined based on the initial font size, device type, and screen size. The page is then displayed according to this target font size, effectively addressing the issue of compatibility across different device types when displaying the minimum font size that a device can accept, thus achieving universal adaptation.

[0054] Figure 2 A flowchart illustrating a cross-platform page adaptive processing method provided in this application embodiment. Figure 2 Optionally, step S101, before starting the target page project, further includes: S201. Generate the target code and the corresponding script tag information.

[0055] Script tag information includes address information pointing to the target code.

[0056] In some embodiments, the target code does not need to be written separately into the source code of each page project. Instead, the target code can be injected in batches into the source code of different page projects in the form of script tag information through the configuration platform.

[0057] First, target code can be generated. The target code can be written in a front-end scripting language (JavaScript, JS code). Based on the storage address of the target code and the application environment of the target code, the script tag information corresponding to the target code can be generated, that is, the script tag corresponding to the target code can be obtained.

[0058] S202. By configuring the platform, the script tag information corresponding to the target code is injected in batches into the source code corresponding to each page project.

[0059] By configuring the platform, target code can be injected in batches into the source code of each page project in the form of script tags. Specifically, it can be done by... <script src="源码地址">< / script> Injected into the page project, the source code address can indicate the address information of the target code, that is, the source code address points to the actual storage location of the target code, so that when this parameter is executed, the target code can be loaded and run from the source code address.

[0060] In this way, the target code's source code doesn't need to be injected into the page project's source code; only the corresponding script tag information needs to be injected. During the page project's source code execution, the target code can be loaded and executed externally through the script tag information. Compared to injecting the target code's source code into each page project, this saves injection time. Furthermore, when the target code's source code is updated, only the configuration platform needs to be updated to reference the changed target code; there's no need to replace and redeploy the target code's source code in each page project. This reduces development costs and improves development efficiency.

[0061] Figure 3 A flowchart illustrating a cross-platform page adaptive processing method provided in this application embodiment. Figure 3 Optionally, the step of determining the initial font size of each text in at least one page of the target page project when displayed on the target device, based on the screen size of the target device, a preset baseline screen size, a preset font conversion ratio, and the target display ratio of the fonts in the page under the target page project, includes: S301. Based on the screen size of the target device and the reference screen size, determine the scaling ratio of the target device's screen size relative to the reference screen size.

[0062] Optionally, the ratio of the target device's screen size to the reference screen size can be calculated to obtain the scaling ratio of the target device's screen size relative to the reference screen size.

[0063] For example, if the target device's screen size is 1920, since the reference screen size is set to 1920, the scaling ratio of the target device's screen size relative to the reference screen size can be determined as rem=1.

[0064] When the target device's screen size is 860, since the reference screen size is set to 1920, the scaling ratio of the target device's screen size relative to the reference screen size can be determined to be rem=0.5.

[0065] S302. Determine the font size of the target device at the unit display ratio based on the scaling ratio of the target device's screen size relative to the reference screen size and the font conversion ratio.

[0066] In this embodiment, the font conversion ratio is set to 1:1, that is, 1rem = 1px. This allows rem to be directly converted to px without additional multiplication and division, thus reducing the amount of computation.

[0067] Based on the scaling ratio calculated above, and the font conversion ratio 1rem = 1px, the font size under the unit display ratio of the target device can be determined. In other words, it determines how many pixels 1rem actually corresponds to on the target device, ensuring that the actual size of 1rem can automatically adjust as the screen size changes.

[0068] For example, when the target device's screen size is 1920, the scaling ratio of the target device's screen size relative to the base screen size is rem=1, so 1rem actually corresponds to 1px; when the target device's screen size is 860, the scaling ratio of the target device's screen size relative to the base screen size is rem=0.5, so 1rem actually corresponds to 0.5px.

[0069] In other words, as the screen size is reduced proportionally, the pixels (px) that 1rem actually corresponds to are also reduced proportionally. To put it another way, on a 1920p screen, 1rem corresponds to 1px, and 1px corresponds to 2 pixels. On an 860p screen, since the screen size is halved, 1rem corresponds to 0.5px, and 0.5px corresponds to 1 pixel. This means that the same text will occupy 2 pixels on a 1920p screen and 1 pixel on an 860p screen. However, regardless of whether the screen size is 1920p or 860p, the proportion of the same text on the screen remains consistent, thus achieving consistent font proportions on different screen sizes for the same page.

[0070] S303. Based on the font size under the unit display ratio corresponding to the target device and the target display ratio, determine the initial font size of each text in at least one page of the target page project when it is displayed on the target device.

[0071] The actual pixel size corresponding to 1rem on the target device has been determined above. The target display ratio is the proportion of the screen size that the text needs to occupy as required by the target page project, which is assumed to be 12rem. Since the actual pixel size corresponding to 1rem is known, the pixel size corresponding to 12rem can be determined.

[0072] For example, if the font size under the unit display ratio of the target device determined above is 0.5px, that is, under the screen size of the target device, 1rem actually corresponds to 0.5px, then 12rem corresponds to 6px, and 6px is the initial font size of each text in at least one page of the target page project when displayed on the target device.

[0073] Figure 4 A flowchart illustrating a cross-platform page adaptive processing method provided in this application embodiment. Figure 4 Optionally, in step S104, determining the target font size for each text element on at least one page when displayed on the target device, based on the initial font size, the device type of the target device, and the screen size of the target device, includes: S401. Determine whether the target device has font size constraints based on the device type of the target device.

[0074] In some embodiments, when the device screen size is too small, the determined initial font size will also be small. When the device sets a font constraint size, i.e., a minimum font size, some device models are system-compatible and can automatically scale to display the desired effect when the initial font size is smaller than the font constraint size. However, some device models are not compatible; when the initial font size is smaller than the font constraint size, it may not be displayed at the initial font size but directly at the font constraint size. This makes the font appear very large.

[0075] In this embodiment, a compatibility mode for small screen sizes can be configured to ensure that the minimum font size is not displayed by default on small screens due to the limitation of the minimum font size, thereby improving the page display effect.

[0076] First, determine whether the target device has font size constraints based on its device type. Some device models do not have font size constraints, while others do.

[0077] S402. If the target device has font constraint size, then determine the target font size of each text in at least one page when it is displayed on the target device, based on the initial font size, the font constraint size and the screen size of the target device.

[0078] If the target device has font size constraints, the final target font size is determined by combining the initial font size, font constraint size, and the target device's screen size. Finally, the text information of each page in the target page project is displayed on the target device using the target font size.

[0079] Optionally, in step S402, determining the target font size of each text in at least one page when displayed on the target device based on the initial font size, font constraint size, and the screen size of the target device includes: if the initial font size is smaller than the font constraint size and the screen size of the target device is smaller than a preset size, then determining the target font size of each text in at least one page when displayed on the target device based on the font constraint size and a preset scaling ratio.

[0080] The preset size can be set to 400. In one case, when the target device's screen size is less than 400 and the initial font size is less than the font constraint size, the font constraint size can be scaled according to the preset scaling ratio to obtain the target font size.

[0081] This additional processing for screen sizes smaller than the preset size can be achieved by configuring the non-standard Cascading Style Sheets (CSS) property: zoom.

[0082] The zoom setting can be configured to 0.5. Its main recognition method is media response. Zoom is activated when the target device's screen size is smaller than the preset size of 400. Assuming the font constraint size is 12px, the target font size can be determined to be 6px based on the font constraint size and the preset zoom ratio of 0.5, thus reducing the visual scaling of the font and achieving the expected display effect.

[0083] Optionally, in step S402, determining the target font size of each text in at least one page when displayed on the target device based on the initial font size, font constraint size, and the screen size of the target device includes: if the initial font size is greater than or equal to the font constraint size, and the screen size of the target device is less than a preset size, then the initial font size is used as the target font size of each text in at least one page when displayed on the target device.

[0084] In another scenario, if the target device's screen size is found to be smaller than the preset size, but the determined initial font size is greater than or equal to the font constraint size, it is considered that the font constraint size has not been met, and the display can still be performed according to the determined initial font size. In this case, the initial font size is taken as the target font size.

[0085] Optionally, in step S402, determining the target font size of each text in at least one page when displayed on the target device based on the initial font size, font constraint size, and the screen size of the target device includes: if the screen size of the target device is greater than or equal to a preset size, then the initial font size is used as the target font size of each text in at least one page when displayed on the target device.

[0086] In another scenario, if the target device's screen size is detected to be greater than or equal to the preset size, zoom will not take effect. In this case, the initial font size will also be used as the target font size.

[0087] Optionally, the method further includes: if the target device does not have font constraint size, then using the initial font size as the target font size when each text in at least one page is displayed on the target device.

[0088] In some cases, when the target device does not have font size constraints, the initial font size can be directly used as the target font size for each text on at least one page when displayed on the target device.

[0089] The above method can effectively solve the problem that on small screens, the font size is limited by the minimum font size, which means that when the actual font size to be displayed is smaller than the minimum font size, the minimum font size can only be displayed by default and cannot be adaptively scaled. This effectively solves the font size compatibility problem for devices with different types and screen sizes.

[0090] In summary, the cross-platform page adaptive processing method provided in this embodiment includes: responding to a user's startup operation on a target page project on a target device, during the startup process of the target page project, loading and running the target code according to the script tag information of the target code; during the execution of the target code, determining the initial font size of each text in at least one page under the target page project when displayed on the target device based on the screen size of the target device, a preset baseline screen size, a preset font conversion ratio, and the target display ratio of the font in the pages under the target page project; determining the target font size of each text in at least one page when displayed on the target device based on the initial font size, the device type of the target device, and the screen size of the target device; and displaying at least one page under the target page project on the target device based on the target font size. This method injects the script tag information of the target code into the source code of the page project, so that when the page project is started on a mobile device or PC device, when the script tag information is reached, the target code is triggered to be loaded and executed from the outside, thereby achieving adaptive determination of the initial font size of the text font of each page under the page project according to the screen size of the mobile device or PC device, and displaying the page according to the determined initial font size. This method allows for consistent font ratio display across mobile and PC devices using a single codebase, improving development efficiency. Furthermore, for devices with minimum font size limitations, a target font size can be determined based on the initial font size, device type, and screen size. The page is then displayed according to this target font size, effectively addressing the issue of compatibility across different device types when displaying the minimum font size that a device can accept, thus achieving universal adaptation.

[0091] Secondly, by using the configuration platform, the target code can be injected in batches into multiple front-end page projects in the form of script tag information, thus avoiding the time-consuming process of injecting one by one. At the same time, by injecting in the form of script tag information, when the target code changes, there is no need to modify each page project individually. You only need to reference the updated target code in the configuration platform, which reduces the development cost of page projects and improves development efficiency.

[0092] The following describes the apparatus, device, and storage medium used to implement the cross-platform page adaptive processing method provided in this application. The specific implementation process and technical effects are described above and will not be repeated below.

[0093] Figure 5This diagram illustrates a cross-platform page adaptive processing device provided in an embodiment of this application. The functions implemented by this device correspond to the steps performed by the method described above. This device can be a computer or server, or a server's processor, or it can be understood as a component that implements the functions of this application under server control, independent of the aforementioned server or processor, such as... Figure 5 As shown, the device may include: an operation module 100, a processing module 200, and a display module 300; The execution module 100 is used to respond to the user's startup operation on the target page project on the target device. During the startup process of the target page project, the target code is loaded and run according to the script tag information of the target code; the target device is a mobile device or a desktop device. The processing module 200 is used to determine the initial font size of each text in at least one page of the target page project when it is displayed on the target device, based on the screen size of the target device, the preset baseline screen size, the preset font conversion ratio, and the target display ratio of the font in the page under the target page project. The processing module 200 is used to determine the target font size of each text in at least one page when it is displayed on the target device, based on the initial font size, the device type of the target device, and the screen size of the target device; The display module 300 is used to display at least one page under the target page project on the target device according to the target font size.

[0094] Optionally, the processing module 200 is also used to generate target code and script tag information corresponding to the target code; the script tag information includes address information pointing to the target code; By configuring the platform, the script tag information corresponding to the target code is injected in batches into the source code of each page project.

[0095] Optionally, the processing module 200 is specifically used to determine the scaling ratio of the target device's screen size relative to the reference screen size based on the target device's screen size and the reference screen size; Determine the font size at the unit display ratio of the target device based on the scaling ratio of the target device's screen size relative to the reference screen size and the font conversion ratio; Based on the font size at the unit display ratio of the target device and the target display ratio, determine the initial font size of each text in at least one page of the target page project when it is displayed on the target device.

[0096] Optionally, the processing module 200 is specifically used to determine whether the target device has font constraint size based on the device type of the target device; If the target device has font constraint sizes, then based on the initial font size, font constraint sizes, and the screen size of the target device, determine the target font size for each text in at least one page when displayed on the target device.

[0097] Optionally, the processing module 200 is specifically used to determine the target font size of each text in at least one page when it is displayed on the target device, based on the font constraint size and the preset scaling ratio, if the initial font size is smaller than the font constraint size and the screen size of the target device is smaller than the preset size.

[0098] Optionally, the processing module 200 is specifically used to use the initial font size as the target font size when each text in at least one page is displayed on the target device if the initial font size is greater than or equal to the font constraint size and the screen size of the target device is less than the preset size.

[0099] Optionally, the processing module 200 is specifically used to use the initial font size as the target font size when each text in at least one page is displayed on the target device if the screen size of the target device is greater than or equal to the preset size.

[0100] Optionally, the processing module 200 is further configured to use the initial font size as the target font size when each text in at least one page is displayed on the target device if the target device does not have font constraint size.

[0101] The above-described device is used to execute the method provided in the foregoing embodiments, and its implementation principle and technical effect are similar, so they will not be described again here.

[0102] These modules can be one or more integrated circuits configured to implement the above methods, such as one or more Application Specific Integrated Circuits (ASICs), one or more digital signal processors (DSPs), or one or more Field Programmable Gate Arrays (FPGAs). Alternatively, when a module is implemented using processing element scheduler code, the processing element can be a general-purpose processor, such as a Central Processing Unit (CPU) or other processor capable of calling program code. Furthermore, these modules can be integrated together as a system-on-a-chip (SOC).

[0103] The modules described above can be connected or communicate with each other via wired or wireless connections. Wired connections may include metal cables, optical fibers, hybrid cables, or any combination thereof. Wireless connections may include connections via LAN, WAN, Bluetooth, ZigBee, or NFC, or any combination thereof. Two or more units can be combined into a single module, and any module can be divided into two or more units. Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working processes of the systems and devices described above can be referred to the corresponding processes in the method embodiments, and will not be repeated here.

[0104] Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. The device may be a computing device with data processing capabilities.

[0105] The device includes a processor 801, a storage medium 802, and a bus 803. The storage medium 802 stores program instructions that can be executed by the processor 801. When the electronic device is running, the processor 801 communicates with the storage medium 802 through the bus 803. The processor 801 executes the program instructions to implement the cross-end page adaptive processing method as described in the embodiment.

[0106] The storage medium 802 stores program code, which, when executed by the processor 801, causes the processor 801 to perform various steps in the cross-platform page adaptive processing method according to various exemplary embodiments of this application as described in the "Exemplary Methods" section above.

[0107] The processor 801 can be a general-purpose processor, such as a central processing unit (CPU), digital signal processor (DSP), application-specific integrated circuit (ASIC), field-programmable gate array (FPGA), or other programmable logic device, discrete gate or transistor logic device, or discrete hardware component, capable of implementing or executing the methods, steps, and logic block diagrams disclosed in the embodiments of this application. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the methods disclosed in the embodiments of this application can be directly manifested as being executed by a hardware processor, or executed by a combination of hardware and software modules within the processor.

[0108] Storage medium 802, as a non-volatile computer-readable storage medium, can be used to store non-volatile software programs, non-volatile computer-executable programs, and modules. The storage medium can include at least one type of storage medium, such as flash memory, hard disk, multimedia card, card-type storage medium, random access memory (RAM), static random access memory (SRAM), programmable read-only memory (PROM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), magnetic storage medium, magnetic disk, optical disk, etc. The storage medium is any other medium capable of carrying or storing desired program code in the form of instructions or data structures that can be accessed by a computer, but is not limited thereto. In the embodiments of this application, storage medium 802 can also be a circuit or any other device capable of implementing storage functions for storing program instructions and / or data.

[0109] Optionally, this application also provides a program product, such as a computer-readable storage medium, including a program that, when executed by a processor, performs the above-described method embodiments.

[0110] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0111] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0112] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or in a combination of hardware and software functional units.

[0113] The integrated units implemented as software functional units described above can be stored in a computer-readable storage medium. These software functional units, stored in a storage medium, include several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute some steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

Claims

1. A cross-platform page adaptive processing method, characterized in that, include: In response to a user's launch operation on a target page project on a target device, during the launch process of the target page project, the target code is loaded and run according to the script tag information of the target code; The target device is a mobile device or a desktop device; When the target code is executed, the initial font size of each text in at least one page of the target page project is determined on the target device based on the screen size of the target device, the preset baseline screen size, the preset font conversion ratio, and the target display ratio of the font in the page under the target page project. Based on the initial font size, the device type of the target device, and the screen size of the target device, determine the target font size for each text in the at least one page when displayed on the target device; Based on the target font size, display at least one page under the target page project on the target device.

2. The method according to claim 1, characterized in that, Before the target page project is started, the following is also included: Generate the target code and the script tag information corresponding to the target code; the script tag information includes address information pointing to the target code; By configuring the platform, the script tag information corresponding to the target code is injected in batches into the source code of each page project.

3. The method according to claim 1, characterized in that, The step of determining the initial font size of each text in at least one page of the target page project when displayed on the target device, based on the screen size of the target device, a preset baseline screen size, a preset font conversion ratio, and the target display ratio of the fonts in the pages under the target page project, includes: Based on the screen size of the target device and the reference screen size, determine the scaling ratio of the screen size of the target device relative to the reference screen size; Based on the scaling ratio of the target device's screen size relative to the reference screen size and the font conversion ratio, determine the font size of the target device at the corresponding unit display ratio; Based on the font size at the unit display ratio corresponding to the target device and the target display ratio, determine the initial font size of each text in at least one page of the target page project when it is displayed on the target device.

4. The method according to claim 1, characterized in that, Determining the target font size for each text in the at least one page when displayed on the target device, based on the initial font size, the device type of the target device, and the screen size of the target device, includes: Based on the device type of the target device, determine whether the target device has font constraint size; If the target device has a font constraint size, then the target font size for each text in the at least one page when displayed on the target device is determined based on the initial font size, the font constraint size, and the screen size of the target device.

5. The method according to claim 4, characterized in that, Determining the target font size for each text in the at least one page when displayed on the target device, based on the initial font size, the font constraint size, and the screen size of the target device, includes: If the initial font size is smaller than the font constraint size, and the screen size of the target device is smaller than the preset size, then the target font size of each text in the at least one page when displayed on the target device is determined according to the font constraint size and the preset scaling ratio.

6. The method according to claim 4, characterized in that, Determining the target font size for each text in the at least one page when displayed on the target device, based on the initial font size, the font constraint size, and the screen size of the target device, includes: If the initial font size is greater than or equal to the font constraint size, and the screen size of the target device is less than the preset size, then the initial font size will be used as the target font size when each text in the at least one page is displayed on the target device.

7. The method according to claim 4, characterized in that, Determining the target font size for each text in the at least one page when displayed on the target device, based on the initial font size, the font constraint size, and the screen size of the target device, includes: If the screen size of the target device is greater than or equal to the preset size, then the initial font size is used as the target font size when each text in the at least one page is displayed on the target device.

8. The method according to claim 4, characterized in that, Also includes: If the target device does not have font size constraints, then the initial font size is used as the target font size when each text in the at least one page is displayed on the target device.

9. A cross-platform page adaptive processing device, characterized in that, include: The module consists of a runtime module, a processing module, and a display module. The running module is used to respond to the user's startup operation on the target page project on the target device. During the startup process of the target page project, the target code is loaded and run according to the script tag information of the target code. The target device is a mobile device or a desktop device; The processing module is used to determine the initial font size of each text in at least one page of the target page project when it is displayed on the target device, based on the screen size of the target device, the preset baseline screen size, the preset font conversion ratio, and the target display ratio of the font in the page under the target page project. The processing module is used to determine the target font size of each text in the at least one page when it is displayed on the target device, based on the initial font size, the device type of the target device, and the screen size of the target device; The display module is used to display at least one page under the target page project on the target device according to the target font size.

10. An electronic device, characterized in that, include: The device includes a processor, a storage medium, and a bus, wherein the storage medium stores program instructions executable by the processor, and when the electronic device is running, the processor communicates with the storage medium via the bus, and the processor executes the program instructions to implement the method as described in any one of claims 1 to 8.

Images