An adaptive dynamic layout system and method based on cross-platform and responsive design

Abstract

The present invention relates to the technical field of cross-platform and responsive design algorithms, and in particular to an adaptive dynamic layout system and method based on cross-platform and responsive design. The present invention detects the device characteristics of a user's device through a device characteristic recognition module, and dynamically adjusts the page layout and resource loading strategy in combination with the user's real-time interaction state and device characteristics, which helps to solve the inconsistency problem of traditional responsive design in a multi-platform and multi-device environment, and improves the performance of web pages and applications, providing users with a smoother, unified and personalized use experience. In addition, the present invention can also automatically adapt to different devices, perform progressive enhancement and real-time resource management according to actual usage and device characteristics, and ensure that the best visual effects and interactive experience are provided in various scenarios.

Description

Technical Field

[0001] The present invention relates to the technical field of cross-platform and responsive design algorithms, and in particular to an adaptive dynamic layout system and method based on cross-platform and responsive design. Background Art

[0002] With the rapid development of the Internet, the types of devices and platforms that users use to access web pages and applications are becoming increasingly diverse, including desktop computers, laptops, tablets, smartphones, and other smart devices. This diversity brings about a huge challenge in front-end development, namely how to provide a consistent and optimized user experience on different devices and platforms.

[0003] Traditional responsive design methods usually rely on fixed breakpoints and media queries. Although they can achieve a certain degree of adaptive layout, they are difficult to provide the best user experience when faced with complex changes in device performance, screen size, user behavior, and cross-platform requirements. Summary of the invention

[0004] In order to solve the technical problems existing in the above-mentioned background technology, the present invention provides an adaptive dynamic layout system and method based on cross-platform and responsive design, which helps to improve the performance of web pages and applications and provide users with a smoother, unified and personalized user experience.

[0005] In order to implement the above technical solution, in a first aspect, the present invention provides an adaptive dynamic layout system based on cross-platform and responsive design, comprising:

[0006] A device characteristic identification module, used to identify device characteristics, wherein the device characteristics include device software characteristics, device hardware characteristics and network status;

[0007] The page layout loading module is used to select a page layout of a suitable mode for resource loading according to the identified device characteristics;

[0008] User behavior monitoring module, which is used to capture the interaction status between users and devices in real time and analyze the interaction status to infer user habits and interests;

[0009] The device optimization module is used to dynamically adjust the page layout and resource loading strategy according to device characteristics and user habits and interests.

[0010] Furthermore, the system also includes: a real-time resource management module, which is used to monitor the resource loading and usage of the page layout, and adjust the resource loading sequence and priority in real time.

[0011] Furthermore, the page layout loading module includes:

[0012] Device characteristic library, used to store preset device characteristics;

[0013] Layout mode library, used to store page layouts of various modes;

[0014] A matching module, for matching the identified device characteristics with the device characteristics in the device characteristic library to determine whether there is a page layout matching the identified device characteristics;

[0015] The loading module is used to select a page layout specific to the device characteristics from the layout pattern library for resource loading if there is a page layout matching the identified device characteristics; if not, select a basic page layout in the layout pattern library for resource loading, and record and provide feedback.

[0016] Furthermore, the real-time resource management module includes:

[0017] The page resource monitoring unit is used to monitor the resource loading and usage of the page layout to evaluate the loading time and memory usage of each resource;

[0018] A resource adjustment unit is used to identify the bottleneck of resource loading according to the resource loading and usage of the monitored page layout, so as to adjust the loading order and priority of resources in real time;

[0019] The resource loading and unloading module is used to load the resources in the current viewport according to the user interaction status and the changes in the page layout, and unload the resources in the viewport area that the user has left;

[0020] A cache adjustment unit, used to dynamically adjust the cache strategy according to the user interaction status and device hardware characteristics;

[0021] The space cleaning unit automatically cleans up unnecessary cache files according to the device hardware characteristics to ensure that the device's storage space is used reasonably.

[0022] Furthermore, the system also includes a cross-device seamless experience module for automatically adapting the web page layout when switching across devices.

[0023] Furthermore, the cross-device seamless experience module includes:

[0024] An interaction recording unit, used to record and store the interaction status between the user and the device;

[0025] The state synchronization unit is used to automatically synchronize these interaction states when the user switches devices;

[0026] Adaptive configuration unit, used for adaptive device page layout;

[0027] The state synchronization optimization unit is used to optimize the state synchronization mechanism according to the user's device switching frequency and behavior pattern.

[0028] In a second aspect, the present invention provides an adaptive dynamic layout method based on cross-platform and responsive design, characterized in that the method comprises the following steps:

[0029] Step 1: Identify device characteristics, where the device characteristics include device software characteristics, device hardware characteristics, and network status;

[0030] Step 2: According to the identified device characteristics, select the appropriate mode of page layout to load resources;

[0031] Step 3: Capture the interaction status between the user and the device in real time and analyze the interaction status to infer the user's habits and interests;

[0032] Step 4: Dynamically adjust page layout and resource loading strategies based on device characteristics and user habits and interests.

[0033] Furthermore, the method further comprises:

[0034] Monitor resource loading and usage of page layout, and adjust resource loading order and priority in real time;

[0035] Automatically adapt the web page layout when switching across devices.

[0036] Furthermore, the step 1 comprises:

[0037] The identified device characteristics are matched with the device characteristics in the device characteristic library to determine whether there is a page layout matching the identified device characteristics. If there is a page layout matching the identified device characteristics, a page layout specific to the device characteristics is selected from the layout pattern library for resource loading. If not, a basic page layout in the layout pattern library is selected for resource loading, and records and feedback are performed.

[0038] In a third aspect, the present invention provides a computer-readable storage medium, which includes a stored program, wherein when the program is running, the device where the computer-readable storage medium is located is controlled to execute the above-mentioned adaptive dynamic layout method based on cross-platform and responsive design.

[0039] The beneficial effects of the present invention are:

[0040] (1) The present invention detects the device characteristics of the user's device through a device characteristic recognition module, and dynamically adjusts the page layout and resource loading strategy in combination with the user's real-time interaction status and device characteristics, which helps to solve the inconsistency problem of traditional responsive design in a multi-platform and multi-device environment, and improves the performance of web pages and applications, providing users with a smoother, unified and personalized user experience.

[0041] (2) The present invention can also automatically adapt to different devices, perform progressive enhancement and real-time resource management according to actual usage and device characteristics, and ensure that the best visual effects and interactive experience are provided in various scenarios. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] The accompanying drawings in the specification, which constitute a part of the present invention, are used to provide a further understanding of the present invention. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute improper limitations on the present invention.

[0043] Figure 1 The schematic diagram of the adaptive dynamic layout system based on cross-platform and responsive design of the present invention is shown in FIG. DETAILED DESCRIPTION

[0044] The present invention will be further described below in conjunction with the accompanying drawings and embodiments.

[0045] It should be noted that the following detailed descriptions are all illustrative and are intended to provide further explanation of the present invention. Unless otherwise specified, each technical and scientific term used in this embodiment has the same meaning as commonly understood by those skilled in the art to which the present invention belongs.

[0046] It should be noted that the terms used herein are only for describing specific embodiments and are not intended to limit exemplary embodiments according to the present invention. As used herein, unless the context clearly indicates otherwise, the singular form is also intended to include the plural form. In addition, it should be understood that when the terms "comprising" and / or "including" are used in this specification, it indicates the presence of features, steps, operations, devices, components and / or combinations thereof.

[0047] In the present invention, terms such as "upper", "lower", "left", "right", "front", "back", "vertical", "horizontal", "side", "bottom", etc. indicate directions or positional relationships based on the directions or positional relationships shown in the accompanying drawings. They are relational words determined only for the convenience of describing the structural relationships of the various parts or elements of the present invention, and do not specifically refer to any part or element in the present invention and should not be understood as limitations on the present invention.

[0048] In the present invention, terms such as "fixed connection", "connected", "connection", etc. should be understood in a broad sense, indicating that it can be fixedly connected, integrally connected or detachably connected; it can be directly connected or indirectly connected through an intermediate medium. Relevant scientific research or technical personnel in this field can determine the specific meanings of the above terms in the present invention according to specific circumstances, and they should not be understood as limiting the present invention.

[0049] Embodiment 1:

[0050] like Figure 1 This embodiment provides an adaptive dynamic layout system based on cross-platform and responsive design, including:

[0051] (I) Device characteristic identification module, used to identify device characteristics.

[0052] Among them, device characteristics include: device software characteristics, device hardware characteristics and network status.

[0053] Device software characteristics include: the operating system installed on the device (such as Windows, iOS, Android), the type and version number of the browser running on the device.

[0054] Device hardware characteristics include: screen size and resolution, CPU performance, memory size, and touch capabilities.

[0055] Network status includes: bandwidth and latency.

[0056] (ii) A page layout loading module, which is used to select a page layout of a suitable mode for resource loading according to the identified device characteristics.

[0057] The page layout loading module includes:

[0058] The device characteristic library is used to store preset characteristic combinations, wherein the device characteristic library may store multiple characteristic combinations.

[0059] The layout mode library is used to store page layouts of various modes.

[0060] A matching module, used for algorithmically matching the identified device characteristics with the characteristic combinations in the device characteristic library to determine whether there is a page layout matching the identified device characteristics;

[0061] The loading module is used to select a page layout specific to the device characteristics from the layout pattern library for resource loading if there is a page layout matching the identified device characteristics; if not, select a basic page layout in the layout pattern library for resource loading, and record and provide feedback.

[0062] The step of loading resources for the page layout or basic page layout specific to the device characteristics comprises the following steps:

[0063] First, the basic functionality and resources for the page layout are loaded to ensure that the page renders quickly and is operational.

[0064] Then, based on the device's hardware features and network status, advanced features and resources, such as high-definition images, animation effects, and complex interactive components, are progressively loaded to ensure that users enjoy a richer experience without affecting performance.

[0065] The resource loading of the page layout or the basic page layout specific to the device characteristics further includes:

[0066] Continuously evaluate the current hardware characteristics of the device and the user interaction status to dynamically adjust the resource loading strategy of the page layout (for example, adjust the complexity, etc.).

[0067] For example, the system might reduce animation effects when users are browsing quickly, but increase visual effects and interaction cues when users are observing.

[0068] It should be noted that each characteristic combination stored in the device characteristic library has a page layout that is in a one-to-one mapping relationship therewith, and the page layout is stored in the layout pattern library.

[0069] The page layout loading module also includes:

[0070] The device type identification module is used to identify the device type, where the device type includes mobile devices and desktop devices.

[0071] The breakpoint detection module is used to determine the device characteristic breakpoint based on the identified device type, compare the determined device characteristic breakpoint with the predetermined breakpoint, and adjust the page layout according to the comparison result. For example: if the screen width is less than a certain threshold (such as 768px), the page layout is adjusted to the mobile device page layout. If the screen width is greater than a certain threshold (such as 1024px), the page layout is adjusted to the desktop device page layout.

[0072] The element arrangement module is used for mobile devices, using a vertical grid layout to arrange all elements in order, and for desktop devices, using a multi-column layout to distribute content in different areas.

[0073] (3) User behavior monitoring module, which is used to capture user interaction status in real time and analyze the user interaction status to infer user habits and interests.

[0074] Among them, the user interaction status includes the user's scrolling, clicking, sliding, window resizing, etc. on the page layout.

[0075] For example, frequent scrolling by a user may indicate that the user is looking for specific content, while staying in a certain section for a long time may indicate that the user is interested in the content, that is, has hobbies.

[0076] (iv) Device optimization module, used to dynamically adjust page layout and resource loading strategies based on device characteristics and user habits and interests.

[0077] For example, if the user frequently zooms in and out of the window, the system will automatically adjust the layout density and content display method to adapt to the user's needs.

[0078] The equipment optimization module includes:

[0079] The first dynamic adjustment module is used to dynamically adjust the page layout and resource loading strategy based on user habits and interests.

[0080] Specifically, based on the user's scrolling and clicking behavior, resources (such as pictures and videos) in the area that the user is interested in are loaded first, and resource loading in other areas is delayed or skipped to optimize page performance.

[0081] The second dynamic adjustment module dynamically adjusts the page layout and resource loading strategy according to the real-time device characteristics to reduce the device burden and ensure that the user experience is not affected.

[0082] For example, based on the device characteristics, decide to enable or disable specific interface effects and functions. When the device characteristics are good, enable dynamic backgrounds and complex animation effects; when the device characteristics are limited, switch to static backgrounds and basic layouts.

[0083] The switching adjustment module is used to automatically and smoothly adjust the page layout when the user switches devices (such as from a mobile phone to a tablet), while maintaining the user's current interaction status and content position to avoid sudden visual jumps.

[0084] (V) Real-time resource management module, which is used to monitor the resource loading and usage of the page layout, and adjust the resource loading order and priority in real time.

[0085] The real-time resource management module includes:

[0086] The page resource monitoring unit is used to monitor the resource loading and usage of the page layout to evaluate the loading time and memory usage of each resource.

[0087] The resource adjustment unit is used to identify the bottleneck of resource loading according to the resource loading and usage of the monitored page layout, so as to adjust the loading order and priority of resources in real time.

[0088] The resource loading and unloading module is used to load the resources in the current viewport according to the user interaction status and the changes in the page layout, and unload the resources in the viewport area that the user has left to save memory and bandwidth.

[0089] Among them, loading the resources in the current viewport includes:

[0090] For large files or high-resolution resources, the system uses lazy loading technology, which only loads them when the user operates to the corresponding location.

[0091] The cache adjustment unit is used to dynamically adjust the cache strategy according to the user interaction status and device hardware characteristics.

[0092] Specifically, for frequently accessed resources, the system will save them in the local cache; for occasionally accessed resources, the system will release the memory immediately after use.

[0093] The space cleaning unit automatically cleans up unnecessary cache files according to the device hardware characteristics to ensure that the device's storage space is used reasonably.

[0094] (VI) Cross-device seamless experience module, used to automatically adapt the web page layout when switching across devices.

[0095] The interaction recording unit is used to record and store the interaction status between the user and the device, and the interaction status also includes: scroll position, opened menus, input form content, etc.

[0096] Among them, the interaction state can be stored via cloud or local storage.

[0097] The state synchronization unit is used to automatically synchronize these interaction states when users switch devices under the same account (such as switching from a mobile phone to a computer), ensuring that users can continue the original operations on the new device.

[0098] Adaptive configuration units are used to adapt the page layout of the device to ensure seamless transition of the user's interaction state on different devices. For example, a sidebar that is expanded on a small-screen device may be automatically collapsed on a large-screen device to save space.

[0099] Among them, the page layout of the adaptive adaptation device includes: providing a consistent user experience by adjusting the page layout and resource loading strategy to ensure the visual and interactive consistency of the interface.

[0100] The state synchronization optimization unit is used to optimize the state synchronization mechanism according to the user's device switching frequency and behavior pattern, reduce unnecessary data transmission, and improve response speed.

[0101] The state synchronization mechanism includes a mechanism for monitoring window changes, which recalculates the page layout in real time. For example, when the user resizes the browser window, the algorithm reapplies the layout rules based on the new window size. The "minimum cost adjustment strategy" is used, that is, only the parts that need to be updated are adjusted to reduce performance consumption.

[0102] The state synchronization mechanism also includes a selective synchronization mechanism. The system synchronizes only the state data related to the current device based on the user's device and current context to avoid unnecessary data transmission.

[0103] For example, if the user is using a mobile device, the system can synchronize only the state required by the mobile device without transmitting data related to the desktop device.

[0104] Embodiment 2:

[0105] This embodiment provides an adaptive dynamic layout method based on cross-platform and responsive design, including the following steps:

[0106] S1: Identify device characteristics, where the device characteristics include device software characteristics, device hardware characteristics, and network status.

[0107] S2: According to the identified device characteristics, select a page layout of a suitable mode to load resources.

[0108] The specific steps include:

[0109] S21: Match the identified device characteristics with the device characteristics in the device characteristic library to determine whether there is a page layout matching the identified device characteristics. If there is a page layout matching the identified device characteristics, select a page layout specific to the device characteristics from the layout pattern library for resource loading; if not, select a basic page layout in the layout pattern library for resource loading, and record and provide feedback.

[0110] The step of loading resources for the page layout or basic page layout specific to the device characteristics comprises the following steps:

[0111] First, load the basic functions and resources of the page layout to ensure that the page is rendered quickly and is operational;

[0112] Then, based on the device's hardware features and network status, advanced features and resources, such as high-definition images, animation effects, and complex interactive components, are progressively loaded to ensure that users enjoy a richer experience without affecting performance.

[0113] The resource loading of the page layout or the basic page layout specific to the device characteristics further includes:

[0114] Continuously evaluate the current hardware characteristics of the device and the user interaction status to dynamically adjust the resource loading strategy of the page layout (for example, adjust the complexity, etc.).

[0115] For example, the system might reduce animation effects when users are browsing quickly, but increase visual effects and interaction cues when users are observing.

[0116] It should be noted that each device characteristic stored in the device characteristic library has a layout mode in a one-to-one mapping relationship therewith, and the layout mode is stored in the layout mode library.

[0117] Wherein, the step S2 further includes:

[0118] Identify the device type, where device types include mobile devices and desktop devices.

[0119] Based on the identified device type, a device characteristic breakpoint is determined, and the determined device characteristic breakpoint is compared with a predetermined breakpoint, and the page layout is adjusted according to the comparison result.

[0120] For mobile devices, a vertical grid layout is used to arrange all elements in order. For desktop devices, a multi-column layout is used to distribute the content in different areas.

[0121] S3: Capture the interaction status between users and devices in real time, and analyze the interaction status to infer user habits and interests.

[0122] S4: Dynamically adjust page layout and resource loading strategies based on device characteristics and user habits and interests.

[0123] S5: Monitor resource loading and usage of page layout, and adjust resource loading order and priority in real time.

[0124] The specific steps include:

[0125] S51: Monitor resource loading and usage of the page layout to evaluate the loading time and memory usage of each resource.

[0126] S52: According to the resource loading and usage of the monitored page layout, the bottleneck of resource loading is identified to adjust the loading order and priority of the resources in real time.

[0127] S53: According to the user interaction status and the change of the page layout, the resources in the current viewport are loaded, and the resources in the viewport area that the user has left are unloaded to save memory and bandwidth.

[0128] Among them, loading the resources in the current viewport includes:

[0129] For large files or high-resolution resources, the system uses lazy loading technology, which only loads them when the user operates to the corresponding location.

[0130] S54: Dynamically adjust the cache strategy according to the user interaction status and device hardware characteristics.

[0131] Specifically, for frequently accessed resources, the system will save them in the local cache; for occasionally accessed resources, the system will release the memory immediately after use.

[0132] S55: Automatically clean up unnecessary cache files based on the device hardware characteristics to ensure that the device's storage space is used reasonably.

[0133] S6: Automatically adapt the web page layout when switching across devices.

[0134] The specific steps include:

[0135] S61: Record and store the interaction status between the user and the device, where the interaction status also includes: scroll position, opened menus, input form content, etc.

[0136] Among them, the interaction state can be stored via cloud or local storage.

[0137] S62: When a user switches devices under the same account (such as switching from a mobile phone to a computer), these interaction states are automatically synchronized to ensure that the user can continue the original operation on the new device.

[0138] S63: Adapt the page layout to the device to ensure seamless transition of the user's interaction state on different devices. For example, a sidebar that is expanded on a small-screen device may be automatically collapsed on a large-screen device to save space.

[0139] Among them, the page layout of the adaptive adaptation device includes: providing a consistent user experience by adjusting the page layout and resource loading strategy to ensure the visual and interactive consistency of the interface.

[0140] S64: Optimize the state synchronization mechanism based on the user's device switching frequency and behavior pattern, reduce unnecessary data transmission, and improve response speed.

[0141] Embodiment 3:

[0142] This embodiment provides a computer-readable storage medium, which includes a stored program, wherein when the program is running, the device where the computer-readable storage medium is located is controlled to execute the adaptive dynamic layout method based on cross-platform and responsive design described in Example 2.

[0143] In this specification, the same or similar parts between the various embodiments can be referred to each other. In particular, for the terminal embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description in the method embodiment.

[0144] In the several embodiments provided by the present invention, it should be understood that the disclosed system and method can

[0145] It can be implemented in other ways. For example, the system embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of systems or units, which can be electrical, mechanical or other forms.

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

[0147] In addition, it should be noted that the flowchart in the accompanying drawings shows the method of the embodiment of the present disclosure. In the corresponding description in the flowchart or block diagram in the accompanying drawings, the operations or steps corresponding to different blocks may also occur in an order different from that disclosed in the description, and sometimes there is no specific order between different operations or steps. For example, two consecutive operations or steps can actually be performed substantially in parallel, or sometimes in the opposite order, which may depend on the functions involved. Each block in the block diagram and / or flow chart, and the combination of blocks in the block diagram and / or flow chart, can be implemented with a dedicated hardware-based system that performs a specified function or action, or can be implemented with a combination of dedicated hardware and computer instructions.

[0148] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. For those skilled in the art, the present invention may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. An adaptive dynamic layout system based on cross-platform and responsive design, characterized in that: include: A device characteristic identification module, used to identify device characteristics, wherein the device characteristics include device software characteristics, device hardware characteristics and network status; The page layout loading module is used to select a page layout of a suitable mode for resource loading according to the identified device characteristics; User behavior monitoring module, which is used to capture the interaction status between users and devices in real time and analyze the interaction status to infer user habits and interests; Device optimization module, which is used to dynamically adjust page layout and resource loading strategies based on device characteristics and user habits and interests; The page layout loading module includes: Device characteristic library, used to store preset device characteristics; Layout mode library, used to store page layouts of various modes; A matching module, for matching the identified device characteristics with the device characteristics in the device characteristic library to determine whether there is a page layout matching the identified device characteristics; A loading module is used to select a page layout specific to the device characteristics from the layout pattern library for resource loading if there is a page layout matching the identified device characteristics; if there is no page layout matching the identified device characteristics, select a basic page layout in the layout pattern library for resource loading, and record and provide feedback; Loading resources for a page layout or base page layout specific to the device's characteristics includes the following steps: First, load the basic functions and resources of the page layout to ensure that the page is rendered quickly and is operational; Then, based on the device's hardware characteristics and network status, advanced features and resources are progressively loaded to ensure that users enjoy a richer experience without compromising performance; Continuously evaluate the current hardware characteristics of the device and the user interaction status to dynamically adjust the resource loading strategy of the page layout; The page layout loading module also includes: A device type identification module, used to identify the device type; The breakpoint detection module is used to determine the device characteristic breakpoint based on the identified device type, compare the determined device characteristic breakpoint with the predetermined breakpoint, and adjust the page layout according to the comparison result.

2. The adaptive dynamic layout system based on cross-platform and responsive design according to claim 1, characterized in that: The system also includes: a real-time resource management module, which is used to monitor the resource loading and usage of the page layout and adjust the resource loading sequence and priority in real time.

3. The adaptive dynamic layout system based on cross-platform and responsive design according to claim 2, characterized in that: The real-time resource management module comprises: The page resource monitoring unit is used to monitor the resource loading and usage of the page layout to evaluate the loading time and memory usage of each resource; A resource adjustment unit is used to identify the bottleneck of resource loading according to the resource loading and usage of the monitored page layout, so as to adjust the loading order and priority of resources in real time; The resource loading and unloading module is used to load the resources in the current viewport according to the user interaction status and the changes in the page layout, and unload the resources in the viewport area that the user has left; A cache adjustment unit, used to dynamically adjust the cache strategy according to the user interaction status and device hardware characteristics; The space cleaning unit automatically cleans up unnecessary cache files according to the device hardware characteristics to ensure that the device's storage space is used reasonably.

4. The adaptive dynamic layout system based on cross-platform and responsive design according to claim 1, characterized in that: The system also includes a cross-device seamless experience module for automatically adapting the web page layout when switching across devices.

5. The adaptive dynamic layout system based on cross-platform and responsive design according to claim 4, characterized in that: The cross-device seamless experience module includes: An interaction recording unit, used to record and store the interaction status between the user and the device; The state synchronization unit is used to automatically synchronize these interaction states when the user switches devices; Adaptive configuration unit, used for adaptive device page layout; The state synchronization optimization unit is used to optimize the state synchronization mechanism according to the user's device switching frequency and behavior pattern.

6. An adaptive dynamic layout method based on cross-platform and responsive design, characterized in that: The method comprises the following steps: Step 1: Identify device characteristics, where the device characteristics include device software characteristics, device hardware characteristics, and network status; Step 2: According to the identified device characteristics, select the appropriate mode of page layout to load resources; Step 3: Capture the interaction status between the user and the device in real time and analyze the interaction status to infer the user's habits and interests; Step 4: Dynamically adjust page layout and resource loading strategies based on device characteristics, user habits, and interests; The step one comprises: Match the identified device characteristics with the device characteristics in the device characteristic library to determine whether there is a page layout matching the identified device characteristics. If there is a page layout matching the identified device characteristics, select a page layout specific to the device characteristics from the layout pattern library for resource loading; if not, select a basic page layout in the layout pattern library for resource loading, and record and provide feedback; Loading resources for a page layout specific to the device's characteristics involves the following steps: First, load the basic functions and resources of the page layout to ensure that the page is rendered quickly and is operational; Then, based on the device's hardware characteristics and network status, advanced features and resources are progressively loaded to ensure that users enjoy a richer experience without compromising performance; Continuously evaluate the current hardware characteristics of the device and the user interaction status to dynamically adjust the resource loading strategy of the page layout; The page layout loading module is also used for: Identify the device type; Based on the identified device type, a device characteristic breakpoint is determined, and the determined device characteristic breakpoint is compared with a predetermined breakpoint, and the page layout is adjusted according to the comparison result.

7. The adaptive dynamic layout method based on cross-platform and responsive design according to claim 6, characterized in that: The method further comprises: Monitor resource loading and usage of page layout, and adjust resource loading order and priority in real time; Automatically adapt the web page layout when switching across devices.

8. A computer-readable storage medium, characterized in that: The computer-readable storage medium includes a stored program, wherein when the program is running, the device where the computer-readable storage medium is located is controlled to execute the adaptive dynamic layout method based on cross-platform and responsive design as described in any one of claims 6 to 7.

Images