Adjusting method and device of component display container, electronic equipment and storage medium

Abstract

The invention relates to the field of component display, and discloses a component display container adjusting method and device, electronic equipment and a storage medium, the adjusting method comprises the following steps: obtaining a visual size of a browser page, and determining a zoom ratio between the visual size and a preset display size of a display container of a target component in the browser page; wherein the scaling ratio comprises a first dimension threshold scaling ratio and a second dimension threshold scaling ratio; and under the condition that the full-screen zoom mode is not started, determining a target zoom ratio according to a size relationship between the first dimension threshold zoom ratio and the second dimension threshold zoom ratio, and adjusting the display container based on the target zoom ratio. According to the method, equal-ratio adaptation based on the minimum scaling ratio is achieved, complete display and equal-ratio scaling of component content are achieved, and consistency of cross-device compatibility and user visual experience is improved.

Description

Technical Field

[0001] This application relates to the field of component display, specifically to a method, apparatus, electronic device, and storage medium for adjusting a component display container. Background Technology

[0002] In modern web application development, especially in scenarios such as data visualization dashboards and cross-device displays, how to achieve adaptive display of page content under different resolutions and screen ratios has become a key technical challenge.

[0003] Related technologies typically employ CSS media queries combined with JavaScript dynamic calculations for screen adaptation, or introduce third-party libraries such as transform-based scaling tools for global control. However, the lack of selectable scaling modes and the general practice of scaling the component's display size based on default scaling parameters can lead to issues such as component content overflow, white space, and distortion, resulting in a poor user visual experience. Summary of the Invention

[0004] In view of the above problems, this application provides a method, apparatus, electronic device and storage medium for adjusting component display containers, which solves the technical problem of poor adaptability of component display content and poor user experience caused by the single scaling mode in the browser in the prior art.

[0005] According to one aspect of this application, a method for adjusting a component display container is provided. The method includes: obtaining the visible size of a browser page and determining a scaling ratio between the visible size and a preset display size of a display container of a target component in the browser page; wherein the scaling ratio includes a first-dimensional threshold scaling ratio and a second-dimensional threshold scaling ratio; and, without enabling full-screen scaling mode, determining a target scaling ratio based on the relationship between the first-dimensional threshold scaling ratio and the second-dimensional threshold scaling ratio, and adjusting the display container based on the target scaling ratio.

[0006] In one optional approach, the adjustment method further includes: if the visible size is updated, updating the scaling ratio based on the updated visible size and the preset display size to obtain an updated scaling ratio; determining an updated target scaling ratio based on the enabled scaling mode and the updated scaling ratio; and adjusting the display container based on the updated target scaling ratio.

[0007] In one alternative approach, updating the scaling ratio based on the updated view size and the preset display size includes: if the view size is updated multiple times within a preset time period, determining a target scaling ratio between the view size after the last update within the preset time period and the preset display size, and updating the scaling ratio.

[0008] In an optional embodiment, the adjustment method further includes: when full-screen scaling mode is not enabled, in response to a size adjustment command for the display container, determining an adjustment scaling ratio between the visible size and a specified display size; wherein the specified display size is a parameter in the size adjustment command used to adjust the preset display size; determining an updated target scaling ratio based on the adjustment scaling ratio, and adjusting the display container based on the updated target scaling ratio.

[0009] In one optional embodiment, the visible size includes a first-dimensional visible size and a second-dimensional visible size; the adjustment method further includes: when full-screen scaling mode is not enabled, in response to a position adjustment instruction for the display container, adjusting the position of the display container in the browser page according to an offset specified by the position adjustment instruction; wherein the offset includes a first-dimensional offset and / or a second-dimensional offset, the first-dimensional offset being a parameter determined based on the first-dimensional visible size and a first-dimensional threshold scaling ratio, and the second-dimensional offset being a parameter determined based on the second-dimensional visible size and a second-dimensional threshold scaling ratio.

[0010] In an optional embodiment, the adjustment method further includes: when the full-screen scaling mode is enabled, adjusting the first dimension display size and the second dimension display size of the display container according to the first dimension threshold scaling ratio and the second dimension threshold scaling ratio, respectively.

[0011] In an alternative approach, the adjustment method further includes: if the target component is uninstalled, removing the display container from the browser page and restoring the original settings of the browser page; wherein the original settings include the original page scrolling settings.

[0012] According to another aspect of this application, an adjustment device for a component display container is provided. The adjustment device includes: a determining module, configured to obtain the visible size of a browser page and determine a scaling ratio between the visible size and a preset display size of the display container of a target component in the browser page; wherein the scaling ratio includes a first-dimensional threshold scaling ratio and a second-dimensional threshold scaling ratio; and an adjustment module, configured to determine a target scaling ratio based on the relationship between the first-dimensional threshold scaling ratio and the second-dimensional threshold scaling ratio when full-screen scaling mode is not enabled, and adjust the display container based on the target scaling ratio.

[0013] According to one aspect of this application, an electronic device is provided, comprising: a controller; and a memory for storing one or more programs, which, when executed by the controller, perform the adjustment method described above.

[0014] According to one aspect of this application, a computer-readable storage medium is also provided, on which computer-readable instructions are stored, which, when executed by a computer's processor, cause the computer to perform the above-described adjustment method.

[0015] According to one aspect of this application, a computer program product or computer program is also provided, comprising computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the aforementioned adjustment method.

[0016] This application obtains the browser's visible size and calculates the two-dimensional scaling ratio between it and the preset display size. In non-fullscreen mode, it selects the target scaling ratio based on the size relationship between the two and makes a unified adjustment. This avoids the component from overflowing, leaving blank space, or deforming in different browser pages, and achieves complete display of component content and proportional scaling, improving cross-device compatibility and consistency of user visual experience.

[0017] The above description is only an overview of the technical solution of this application. In order to better understand the technical means of this application and to implement it in accordance with the contents of the specification, and to make the above and other objects, features and advantages of this application more obvious and understandable, the following are specific embodiments of this application. Attached Figure Description

[0018] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application. It is obvious that the drawings described below are merely some embodiments of this application, and those skilled in the art can obtain other drawings based on these drawings without any inventive effort.

[0019] Figure 1 This is a flowchart illustrating an exemplary embodiment of the present application of a method for adjusting a component display container.

[0020] Figure 2 Based on Figure 1 The exemplary embodiment shown illustrates a flowchart of another method for adjusting a component display container.

[0021] Figure 3 Based on Figure 1 The exemplary embodiment shown illustrates a flowchart of another method for adjusting a component display container.

[0022] Figure 4 Based on Figure 1 The exemplary embodiment shown illustrates a flowchart of another method for adjusting a component display container.

[0023] Figure 5 This is a schematic diagram of the structure of an adjustment device shown in an exemplary embodiment of this application.

[0024] Figure 6 This is a schematic diagram of the structure of a computer system for an electronic device illustrated in an exemplary embodiment of this application. Detailed Implementation

[0025] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0026] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0027] The flowcharts shown in the accompanying drawings are merely illustrative and do not necessarily include all content and operations / steps, nor do they necessarily need to be performed in the described order. For example, some operations / steps can be broken down, while others can be combined or partially combined; therefore, the actual execution order may change depending on the specific circumstances.

[0028] In this application, "multiple" refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0029] When displaying web page content on terminal devices with different resolutions, especially for large-screen visualization applications with fixed design sizes (such as monitoring systems and data dashboards), the problem of component display containers not being able to adaptively scale often arises. When the visible area of ​​the browser page is inconsistent with the preset display size of the target component, directly stretching or cropping the container can easily lead to image distortion, content overflow, or excessive white space. If a static layout is used, it is difficult to fully present the design effect on high-resolution or non-standard aspect ratio screens. In addition, although some solutions support scaling functions, they lack intelligent selection mechanisms for multi-dimensional scaling ratios, failing to balance content integrity and screen utilization. Therefore, how to dynamically adjust the scaling strategy of the display container according to the current visual environment has become a key issue in improving cross-device compatibility.

[0030] Therefore, one aspect of this application provides a method for adjusting a component display container. Please refer to [link / reference needed] for details. Figure 1 , Figure 1 This is a flowchart illustrating an exemplary embodiment of a component display container adjustment method. The adjustment method includes at least steps S110 to S120, which are described in detail below: S110: Obtain the visible size of the browser page and determine the scaling ratio between the visible size and the preset display size of the display container of the target component in the browser page; wherein, the scaling ratio includes the first-dimensional threshold scaling ratio and the second-dimensional threshold scaling ratio.

[0031] The visible size refers to the actual area in the current browser window available for rendering content. It is usually obtained through JavaScript's `document.body.clientWidth` and `document.body.clientHeight`, excluding the influence of non-content areas such as scrollbars and toolbars. This size updates dynamically as the user resizes the window, switches devices, or changes between portrait and landscape orientations.

[0032] The display container of the target component refers to the DOM container element used to hold a specific UI component (such as a data chart or video player). Its "preset display size" is the ideal width and height value set by the developer in advance, such as 1920px × 1080px, which represents the base resolution of the design draft.

[0033] The scaling ratio is the ratio of the visible size to the preset size. The first-dimensional threshold scaling ratio and the second-dimensional threshold scaling ratio are scaling factors corresponding to different dimensions. For example, the first-dimensional threshold scaling ratio corresponds to the scaling factor in the horizontal direction (X-axis), which is the quotient obtained by dividing the current visible width by the preset width; the second-dimensional threshold scaling ratio corresponds to the scaling factor in the vertical direction (Y-axis), which is the quotient obtained by dividing the current visible height by the preset height. These two ratios reflect the degree of scaling required to make the container fit the current viewport in their respective dimensions. For example, when the visible width is 1440px and the preset width is 1920px, the first-dimensional threshold scaling ratio is 0.75; if the visible height is 900px and the preset height is 1080px, the second-dimensional threshold scaling ratio is approximately 0.83.

[0034] The two scaling ratios mentioned above can be stored as floating-point numbers in state variables for subsequent logical judgments. Their calculation can be performed initially after the component is mounted and recalculated when the window size change event is triggered, ensuring real-time performance. As an optional implementation, more precise layout size information can be obtained through CSSOM (Cascading Style Sheets Object Model) or the ResizeObserver API (Resize Observer Application Programming Interface), avoiding data deviations caused by reflow delays. Furthermore, the preset display size is not limited to pixels; it can also support relative units (such as relative width and / or relative height) or be dynamically passed through configuration parameters, enhancing flexibility.

[0035] S120: Without enabling full-screen scaling mode, determine the target scaling ratio based on the relationship between the first-dimensional threshold scaling ratio and the second-dimensional threshold scaling ratio, and adjust the display container based on the target scaling ratio.

[0036] The "not full-screen scaling mode" (i.e., non-full-screen scaling mode) is a scaling strategy control state, corresponding to application scenarios that maintain the complete display of content rather than forcibly filling the screen. In this mode, a target scaling ratio must be selected from the first-dimensional threshold scaling ratio and the second-dimensional threshold scaling ratio to determine the final uniform scaling ratio. This selection principle is based on the relationship between the two: the smaller ratio is preferred as the target scaling ratio, i.e., the Math.min(widthScale, heightScale) operation is executed; Math.min represents the minimum value function, widthScale represents the width threshold scaling ratio (i.e., the first-dimensional threshold scaling ratio), and heightScale represents the height threshold scaling ratio (i.e., the second-dimensional threshold scaling ratio).

[0037] The reason for choosing the minimum scaling ratio is that scaling by a larger ratio would cause one dimension to exceed the visible range, resulting in content clipping or scrollbars. Using the minimum scaling ratio ensures that the container does not exceed the current viewport boundary in either direction, achieving a "proportional scaling, complete display" effect. For example, when widthScale = 0.75 and heightScale = 0.83, the target scaling ratio is 0.75. In this case, the container fits perfectly to the edge in the width direction, with a slight gap in the height direction, resulting in a centered display and preventing information loss.

[0038] This embodiment adjusts the display container, primarily by modifying its CSS transform properties. A typical approach is to set `transform: scale(targetScale)`, where `transform` represents the transformation method, `scale()` represents the scaling function, and `targetScale` represents the target scaling ratio. Visual centering is achieved by combining this with the positioning mechanism of the outer container (such as flexbox layout or automatic margin centering). This adjustment can be implemented by directly manipulating DOM element styles or updating React state to drive style changes. As an alternative, scaling can also be applied to the parent wrapper container to isolate interference with the styles of internal child components. Another option is to utilize the SVG viewport (Scalable Vector Graphics Viewport) or canvas scaling mechanism to achieve adaptation at the graphics rendering level, suitable for applications primarily using vector graphics.

[0039] This embodiment obtains the browser's visible size and calculates the two-dimensional scaling ratio between it and the preset display size. In non-fullscreen mode, it compares the scaling ratios of the visible size and the preset size in two orthogonal dimensions, and determines a uniform scaling factor based on the minimum value principle. This ensures that the target content can be displayed completely and without distortion in any screen environment. This embodiment avoids overflow, white space, and distortion of components in different browser pages, achieving complete display and proportional scaling of component content. It improves cross-device compatibility and consistency of user visual experience, and is especially suitable for application scenarios with high requirements for display fidelity, such as large-screen visualization, digital twins, and remote monitoring.

[0040] In another exemplary embodiment, when the full-screen scaling mode is enabled, the first dimension display size and the second dimension display size of the display container are adjusted according to the first dimension threshold scaling ratio and the second dimension threshold scaling ratio, respectively.

[0041] This adjustment method is designed for application environments where component content needs to completely fill the viewport and allows for non-proportional stretching to achieve maximum visual coverage, such as data dashboards and exhibition hall display systems. In such applications, users expect component content to seamlessly fill the entire screen area, avoiding black borders or white space, even if it means sacrificing the original aspect ratio.

[0042] Full-screen scaling mode can be explicitly enabled via configuration parameters (such as `fullScreen: true`), and is typically used in applications requiring extreme visual extensibility. When full-screen scaling mode is enabled, a split scaling strategy is employed, directly applying the first and second dimension threshold scaling ratios to the corresponding dimensions of the display container. For example, the CSS `transform: scale(widthScale, heightScale)` property can be used to scale the display container by `widthScale` on the X-axis and by `heightScale` on the Y-axis; or the actual pixel size can be recalculated by dynamically modifying the display container's `width` and `height` style properties and combining them with the scaling ratios. This adjustment method breaks the constraints of traditional proportional scaling, allowing the display container to stretch at different ratios in different directions, thus achieving the effect of completely filling the visible area.

[0043] In another exemplary embodiment, a technical solution is provided for performing resource cleanup and context restoration at the end of a component's lifecycle. Its core lies in solving the problem of page state remnants caused by incomplete component unloading in existing technologies, particularly the technical defect where global style modifications (such as disabling body overflow scrolling) are not restored, leading to abnormal subsequent page interactions or layout errors. This type of problem is particularly prominent in Single Page Applications (SPAs). When multiple visual dashboard components are frequently mounted and unmounted, the lack of a unified cleanup mechanism can easily lead to irreversible user experience degradation.

[0044] This embodiment, based on the above S110 to S120, further includes at least: if the target component is uninstalled, the display container is removed from the browser page, and the original settings of the browser page are restored; wherein the original settings include the original page scrolling settings.

[0045] The unloading of a target component refers to the event condition triggered by the front-end framework (such as React, Vue, etc.) to activate the component's destruction lifecycle hooks (such as componentWillUnmount or onBeforeUnmount). This condition signifies that the target component and its associated DOM structure are about to be removed from the browser page. At this point, proactive intervention is necessary to ensure that all runtime changes introduced by this component are cleared. The target component specifically refers to a content module that uses adaptive scaling logic for rendering, such as data dashboards, dashboards, and other UI components that have high requirements for display ratio and layout precision.

[0046] Removing the display container refers to removing the outer wrapper container (such as a div element with the class sept-screen-wrapper) bound to the target component from the DOM tree. This container is dynamically created during component initialization and is used to hold style logic such as scaling transformations (transform: scale), size control, and position offsets. Its existence depends on the lifecycle of the target component, so it must be removed synchronously when the component is unloaded to avoid creating isolated DOM nodes without master control, thereby preventing memory leaks and potential style conflicts.

[0047] Restoring the browser page to its original settings means reverting the global page configuration modified during component initialization to its initial state. The most crucial part is the "original page scrolling settings," specifically the value of the `document.body.style.overflow` property. During component mounting, to avoid interference from the browser's default scrollbar in visible area calculations, the `overflow` property of the `body` is usually set to `hidden`. However, if this operation is not reversed when the component is unloaded, the entire page will lose its vertical or horizontal scrolling capability, affecting the normal browsing functionality of other non-fullscreen components. Therefore, the original value of this property (which may be 'visible', 'auto', or 'scroll') needs to be pre-cached during the cleanup phase and reassigned during unloading to ensure that page scrolling behavior returns to normal.

[0048] Furthermore, the original settings can be extended to include, but are not limited to, temporarily modified CSS global styles such as page zoom level, font-smooth strategy, and user-select behavior. The restoration of these settings collectively constitutes a complete context isolation mechanism, ensuring that the side effects of components have clear boundaries.

[0049] Through the above steps, this application achieves automatic cleanup of the display container and reversible restoration of the page environment when the target component is unloaded. Because DOM removal and global style state rollback are performed simultaneously during component destruction, the problem of page scrolling failure caused by style pollution is resolved, thus achieving the technical effect of improving system robustness and component reuse security. It is particularly suitable for application scenarios that require dynamically loading / unloading multiple full-screen visual components, ensuring that the page returns to a consistent and usable state after each component switch.

[0050] In another exemplary embodiment, the method for adjusting the display container after a change in the browser's view size is described in detail; please refer to [link to relevant documentation]. Figure 2 , Figure 2 Based on Figure 1 The exemplary embodiment shown illustrates a flowchart of another method for adjusting a component display container. This adjustment method, as in... Figure 1 Based on S110 to S120 shown, at least S210 to S220 are also included, which are described in detail below: S210: If the visible size is updated, the scaling ratio is updated based on the updated visible size and the preset display size to obtain the updated scaling ratio.

[0051] During browser page operation, when a user resizes the window, rotates the device screen, or performs other actions that change the viewport size, a visible size update event is detected. At this point, the actual visible area size of the current browser page (i.e., the updated visible size) needs to be re-acquired and compared with the preset display size of the target component's display container to recalculate the scaling ratio. This scaling ratio includes a first-dimensional threshold scaling ratio (such as the horizontal ratio) and a second-dimensional threshold scaling ratio (such as the vertical ratio), the specific values ​​of which can be obtained by dividing the current visible width by the preset width and the visible height by the preset height, respectively. This process ensures that it accurately reflects the actual adaptation requirements even under dynamic environmental changes.

[0052] In situations where window size changes frequently (such as when a user continuously drags to resize a browser window), it's crucial to avoid repetitive calculations and rendering stutters caused by high-frequency size update events. To address this, another exemplary embodiment illustrates how to update the scaling ratio based on the updated visible size and the preset display size to obtain the updated scaling ratio: If the visible size is updated multiple times within a preset time period, a target scaling ratio between the last updated visible size and the preset display size within that preset time period is determined, and the scaling ratio is updated accordingly. Here, the preset time period refers to a configurable time threshold used to define whether consecutive size changes belong to the same adjustment process.

[0053] Multiple updates to the visible size refer to receiving two or more notification signals from the browser viewport size within the aforementioned preset time period. These signals are typically triggered by the `window.resize` event, and the latest visible area size is obtained by capturing the current `document.body.clientWidth` and `clientHeight` values ​​through a listener callback function. Since modern operating systems and browsers may send dozens of `resize` events per second during window dragging, intermediate transition states must be filtered through programmatic logic.

[0054] The last updated visible size is the last valid value among all the size data collected within that time window, representing the actual termination state of this adjustment operation. For example, during the process of stretching from 1920×1080 to 2560×1440, multiple intermediate resolutions (such as 2000×1100, 2200×1200, etc.) may be recorded, but only the last reported 2560×1440 is retained as the basis for calculation.

[0055] The target scaling factor here is a scaling factor calculated based on the ratio between the last updated view size and the preset display size of the target component's display container (e.g., 1920×1080). It typically includes the horizontal scaling factor (widthScale = currentWidth / targetWidth) and the vertical scaling factor (heightScale = currentHeight / targetHeight). In non-fullscreen scaling mode, the minimum of the two values ​​is taken to obtain a unified scaling factor, ensuring that the content is displayed completely without overflowing.

[0056] This example implementation can be achieved using debouncing functions in JavaScript. For instance, define a delayed execution function `debouncedUpdate` and bind it to the callback of `window.addEventListener('resize', ...)`, internally encapsulating core processing flows such as `initSize` and `updateScale`. Whenever the `resize` event is triggered, the previous pending task is cleared and the timer is restarted; the scaling update logic is only actually invoked if the timer is not interrupted again during the timeout period. Alternatively, a hybrid strategy combining throttling and debouncing can be used to capture the final stable state while maintaining a basic response frequency.

[0057] Optionally, this mechanism can be optimized by combining requestAnimationFrames, placing size sampling within the browser's repaint cycle to further reduce layout jitter. Another variation introduces a queue caching mechanism: each retrieved visible size is temporarily stored in an array, and the last element is retrieved and processed after a preset duration, while also supporting rollback or interpolation compensation in abnormal situations. The time-window-based debouncing control logic only performs the final scaling update after a set of consecutive size changes has stabilized, effectively reducing system load and improving user experience.

[0058] S220: Determine the updated target scaling ratio based on the enabled scaling mode and the updated scaling ratio, and adjust the display container based on the updated target scaling ratio.

[0059] For different application scenarios, multiple scaling modes can be selected and switched. For example, in non-full-screen scaling mode, a minimum scaling strategy is usually adopted, that is, the smaller of the first-dimensional threshold scaling ratio and the second-dimensional threshold scaling ratio is taken as the target scaling ratio, thus ensuring that the content is displayed completely without being cropped. In full-screen scaling mode, the respective scaling ratios can be applied to achieve independent stretching of width and height, so that the content fills the entire visible area. Therefore, when the scaling ratio is updated, it is necessary to determine the current scaling mode state—that is, the "enabled scaling mode"—and decide how to determine the final target scaling ratio for rendering adjustment from the updated scaling ratio. If it is in non-full-screen mode, proportional scaling logic is executed; if it is in full-screen mode, anisotropic scaling is allowed.

[0060] Subsequently, based on the determined updated target scaling ratio, corresponding transformation styles (such as CSS transform: scale(scaleX, scaleY)) are applied to the display container, thereby dynamically adjusting its visual size. This adjustment process not only covers the scaling of the container's width and height but also updates its position offset to maintain the expected layout effect (such as center alignment or specified alignment). Furthermore, to improve responsiveness and performance stability, this process can incorporate a debouncing mechanism to control the size update frequency, avoiding redundant calculations and frequent DOM repaints caused by continuous high-frequency triggering.

[0061] This embodiment implements a technical approach that automatically detects and updates scaling parameters when the browser's view size changes. By introducing a response mechanism to changes in view size and dynamically determining the target scaling ratio based on the currently enabled scaling mode, it solves the problems of display anomalies, redraw stutters, or inability to adapt in real time caused by changes in window size in existing technologies. Therefore, it achieves the technical effect of improving page adaptability and interactive smoothness. This implementation is applicable to various web applications requiring cross-device compatibility, especially suitable for scenarios with high requirements for display consistency, such as data visualization dashboards, dashboards, and remote monitoring interfaces.

[0062] In another exemplary embodiment, the method of responding to a resizing command for the display container is described in detail when full-screen scaling mode is not enabled. Please refer to [link to relevant documentation]. Figure 3 , Figure 3 Based on Figure 1 The exemplary embodiment shown illustrates a flowchart of another method for adjusting a component display container. This adjustment method, as in... Figure 1 Based on S110 to S120 shown, at least S310 to S320 are also included, as detailed below: S310: When full-screen scaling mode is not enabled, in response to the size adjustment command for the display container, determine the scaling ratio between the visible size and the specified display size; wherein, the specified display size is the parameter used in the size adjustment command to adjust the preset display size.

[0063] Resizing instructions are external trigger signals, such as user actions, script calls, or configuration changes, that explicitly indicate the need to change the design baseline size upon which the current component's display container is based. For example, in multi-project reuse scenarios, developers might dynamically pass in new design resolutions via JavaScript (e.g., switching from 1920×1080 to 1366×768), or load size templates with different layout specifications when switching themes. These instructions can be triggered through React component prop updates, custom event broadcasts, or state management tools (such as Redux and Zustand). Essentially, they are runtime-variable input control signals used to replace the initially set preset display size.

[0064] Specifying the display size is the core parameter in the resizing command, representing the newly set logical size of the target display container. It is typically provided in the form of width and height, supporting pixel units (px) or string format (e.g., "1920px"). This parameter does not directly change the actual pixel size of the DOM element, but rather serves as a reference benchmark for scaling calculations, participating in the subsequent reconstruction of the scaling ratio. In implementation, the specified display size can be statically configured by the developer or dynamically injected through an interface, offering good extensibility. For example, it can be encapsulated using an object structure `{ width: number | string; height:number | string}` for easy parsing and validation. Furthermore, a default fault tolerance mechanism can be set; when a specified size lacks a dimension, it automatically uses the original preset value or the corresponding dimension of the currently visible size, avoiding calculation errors.

[0065] S320: Determine the updated target scaling ratio based on the adjusted scaling ratio, and adjust the display container based on the updated target scaling ratio.

[0066] The scaling factor is recalculated based on the updated specified display size and the current viewport size, reflecting the adaptation ratio of the current viewport relative to the new design baseline. The specific calculation process involves obtaining the independent scaling factor in two dimensions: Horizontal scaling ratio = Current visible width / Specify display width; Vertical zoom ratio = Current view height / Specify display height; This set of ratios constitutes a complete set of adjustment scaling ratios, preserving independent information in both dimensions and providing a data foundation for subsequent selection of the target scaling ratio. In non-full-screen scaling mode, the smaller scaling ratio is preferentially selected as the target scaling ratio (i.e., scale = Math.min(widthScale, heightScale)) to ensure that the content is displayed completely without overflowing. This strategy is suitable for large-screen visualization applications that need to maintain consistent screen proportions, preventing image cropping or text truncation.

[0067] The updated target scaling ratio is the application-level scaling factor finally determined based on the adjusted scaling ratio and the current scaling control strategy. If independent scaling control along the X and Y axes is supported (e.g., through the `autoScale` configuration option), it's possible to decide whether to enable proportional constraints for each dimension separately. For example, when only horizontal scaling is allowed, the target scaling ratio is adjusted in the horizontal direction, while the original size remains unchanged in the vertical direction. This mechanism improves layout flexibility and supports non-center alignment requirements such as left alignment and top alignment.

[0068] Adjusting the display container involves applying the updated target scaling ratio to the outer wrapper of the target component, typically achieved through CSS transform properties such as `transform: scale(scaleValue)`. Simultaneously, if center offset is enabled, the container's position offset (margin or translate) must be calculated and set to maintain visual center alignment. In the React environment, such style updates can be directly manipulated through DOM nodes using `ref`, reducing unnecessary virtual DOM re-rendering and improving performance. Furthermore, the adjustment process can be combined with CSS transition animations to achieve smooth scaling effects, enhancing the user experience.

[0069] This embodiment enables responsiveness to external size adjustment commands in non-full-screen mode, resolving the issue of fixed design baselines and inability to dynamically switch between displays in traditional adaptive solutions. By allowing runtime modification of specified display sizes, it flexibly handles complex application scenarios such as multi-resolution design template switching, cross-project component reuse, and dynamic theme loading, improving component versatility and maintainability. Therefore, it achieves the technical effect of enhancing system configurability and improving adaptability, making it particularly suitable for data visualization platforms or enterprise-level front-end framework integration environments that require frequent changes to design specifications.

[0070] In another exemplary embodiment, the method of responding to a position adjustment command for the display container is described in detail when full-screen scaling mode is not enabled. Please refer to [link to relevant documentation]. Figure 4 , Figure 4 Based on Figure 1The exemplary embodiment shown illustrates a flowchart of another method for adjusting a component display container. This adjustment method, as in... Figure 1 Based on S110 to S120 shown, at least S410 is also included; wherein, the visible size includes the first dimension visible size and the second dimension visible size, which are described in detail below: S410: When full-screen scaling mode is not enabled, in response to a position adjustment command for the display container, adjust the position of the display container in the browser page according to the offset specified by the position adjustment command; wherein, the offset includes a first-dimensional offset and / or a second-dimensional offset, the first-dimensional offset being a parameter determined based on the first-dimensional visible size and the first-dimensional threshold scaling ratio, and the second-dimensional offset being a parameter determined based on the second-dimensional visible size and the second-dimensional threshold scaling ratio.

[0071] Position adjustment directives are behavioral signals triggered by external logic to change the positioning of a display container within the page. They can be emitted via JavaScript function calls, React prop changes, or DOM events. These directives carry at least one dimension of offset control requirements, allowing developers to customize the container's alignment according to actual layout needs. For example, in a hybrid layout where the left navigation is fixed and the right main content area needs to be horizontally centered but top-aligned, precise positioning can be achieved by enabling only the first dimension offset and disabling the second dimension offset.

[0072] Offsets are used to compensate for positional deviations caused by the remaining space after scaling, enabling containers to achieve centering, alignment, or other precise positioning effects. The first-dimensional offset (e.g., mx) represents the horizontal displacement, calculated as: mx = (first-dimensional visible size - target width of the display container × first-dimensional threshold scaling ratio) / 2. Similarly, the second-dimensional offset (e.g., my) represents the vertical displacement, calculated as: my = (second-dimensional visible size - target height of the display container × second-dimensional threshold scaling ratio) / 2. These offsets are applied as the translate component in the CSS transform property, or directly set in the left / top style properties to achieve the final position adjustment.

[0073] The first and second dimension offsets can be enabled or disabled independently, creating various combination modes. For example, when only the first dimension offset is enabled, the container is centered horizontally and aligned to the top vertically; conversely, it achieves left alignment and vertical centering; enabling both results in a traditional centered layout; and disabling both results in top-left corner alignment. This decoupled design breaks through the limitations of traditional unified centering algorithms and supports diverse UI layout strategies.

[0074] This embodiment enables flexible adjustment of the position of the component display container in non-full-screen scaling mode. By introducing a dimensional offset calculation mechanism based on the visible size and threshold scaling ratio, and supporting on-demand activation of offsets in specific directions, it solves the technical problem of existing technologies failing to meet diverse alignment requirements. Therefore, it achieves the technical effect of improving layout freedom and adaptation accuracy, and is particularly suitable for large-screen display applications on multi-form terminals.

[0075] Another aspect of this application provides an adjustment device for a component display container, such as... Figure 5 As shown, Figure 5 This is a schematic diagram illustrating the structure of an adjustment device according to an exemplary embodiment of this application. The adjustment device 500 includes: The determination module 510 is used to obtain the visible size of the browser page and determine the scaling ratio between the visible size and the preset display size of the display container of the target component in the browser page; wherein the scaling ratio includes a first-dimensional threshold scaling ratio and a second-dimensional threshold scaling ratio.

[0076] The adjustment module 530 is used to determine the target scaling ratio based on the relationship between the first-dimensional threshold scaling ratio and the second-dimensional threshold scaling ratio when the full-screen scaling mode is not enabled, and to adjust the display container based on the target scaling ratio.

[0077] In another exemplary embodiment, the adjustment device 500 further includes: The first update module is used to update the scaling ratio based on the updated visible size and the preset display size if the visible size is updated, so as to obtain the updated scaling ratio.

[0078] The update adjustment module is used to determine the updated target scaling ratio based on the enabled scaling mode and the updated scaling ratio, and to adjust the display container based on the updated target scaling ratio.

[0079] In another exemplary embodiment, the first update module includes: The first update unit is used to determine the target scaling ratio between the last updated visual size and the preset display size if the visual size is updated multiple times within a preset time period, and then update the scaling ratio.

[0080] In another exemplary embodiment, the adjustment device 500 further includes: The first response module is used to determine the scaling ratio between the visible size and the specified display size in response to the size adjustment command for the display container when the full-screen scaling mode is not enabled; wherein, the specified display size is the parameter used to adjust the preset display size in the size adjustment command.

[0081] The first adjustment module is used to determine the updated target scaling ratio based on the adjusted scaling ratio, and to adjust the display container based on the updated target scaling ratio.

[0082] In another exemplary embodiment, the visible size includes a first-dimensional visible size and a second-dimensional visible size; the adjustment device 500 further includes: The position adjustment module is used to adjust the position of the display container in the browser page according to the offset specified by the position adjustment command when the full-screen scaling mode is not enabled, in response to the position adjustment command for the display container. The offset includes a first-dimensional offset and / or a second-dimensional offset. The first-dimensional offset is a parameter determined based on the first-dimensional visible size and the first-dimensional threshold scaling ratio, and the second-dimensional offset is a parameter determined based on the second-dimensional visible size and the second-dimensional threshold scaling ratio.

[0083] In another exemplary embodiment, the adjustment device 500 further includes: The size adjustment module is used to adjust the first dimension display size and the second dimension display size of the display container according to the first dimension threshold scaling ratio and the second dimension threshold scaling ratio when the full-screen scaling mode is enabled.

[0084] In another exemplary embodiment, the adjustment device 500 further includes: The uninstallation and recovery module is used to remove the display container from the browser page and restore the browser page to its original settings if the target component is uninstalled; the original settings include the original page scrolling settings.

[0085] The adjustment device of this application obtains the browser's visible size and calculates the two-dimensional scaling ratio between it and the preset display size. In non-full-screen mode, it selects the target scaling ratio based on the size relationship between the two and makes a unified adjustment. This avoids the component from overflowing, leaving blank space, or deforming in different browser pages, and realizes the complete display of component content and proportional scaling, thereby improving cross-device compatibility and the consistency of user visual experience.

[0086] It should be noted that the adjustment device provided in the above embodiments and the adjustment method provided in the foregoing embodiments belong to the same concept. The specific way in which each module and unit performs operations has been described in detail in the method embodiments, and will not be repeated here.

[0087] Another aspect of this application provides an electronic device, including: a controller; and a memory for storing one or more programs, which, when executed by the controller, perform the adjustment method described above.

[0088] Please see Figure 6 , Figure 6This is a schematic diagram of the structure of a computer system for an electronic device according to an exemplary embodiment of this application, illustrating a schematic diagram of the structure of a computer system suitable for implementing the embodiments of this application.

[0089] It should be noted that, Figure 6 The computer system 600 of the electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0090] like Figure 6 As shown, the computer system 600 includes a Central Processing Unit (CPU) 601, which can perform various appropriate actions and processes, such as executing the methods described in the above embodiments, based on programs stored in Read-Only Memory (ROM) 602 or programs loaded from storage portion 608 into Random Access Memory (RAM) 603. The RAM 603 also stores various programs and data required for system operation. The CPU 601, ROM 602, and RAM 603 are interconnected via a bus 604. An Input / Output (I / O) interface 605 is also connected to the bus 604.

[0091] The following components are connected to I / O interface 605: an input section 606 including a keyboard, mouse, etc.; an output section 607 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 608 including a hard disk, etc.; and a communication section 609 including a network interface card such as a LAN (Local Area Network) card, modem, etc. The communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to I / O interface 605 as needed. A removable medium 611, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on drive 610 as needed so that computer programs read from it can be installed into storage section 608 as needed.

[0092] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program including a computer program for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 609, and / or installed from removable medium 611. When the computer program is executed by central processing unit (CPU) 601, it performs various functions defined in the system of this application.

[0093] It should be noted that the computer-readable medium shown in the embodiments of this application can be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), flash memory, optical fiber, portable compact disc read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this application, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying a computer-readable computer program. The transmitted data signal can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The computer program contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to wireless, wired, etc., or any suitable combination thereof.

[0094] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. Each block in a flowchart or block diagram may represent a module, segment, or portion of code, which contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0095] The units described in the embodiments of this application can be implemented in software or hardware, and the described units can also be located in a processor. The names of these units do not necessarily limit the specific unit itself.

[0096] Another aspect of this application provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the aforementioned adjustment method. This computer-readable storage medium may be included in the electronic device described in the above embodiments, or it may exist independently and not incorporated into the electronic device.

[0097] Another aspect of this application provides a computer program product or computer program including computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the adjustment methods provided in the various embodiments described above.

[0098] According to one aspect of the embodiments of this application, a computer system is also provided, including a Central Processing Unit (CPU), which can perform various appropriate actions and processes based on a program stored in read-only memory (ROM) or a program loaded from storage into random access memory (RAM), such as performing the methods described above. Various programs and data required for system operation are also stored in the RAM. The CPU, ROM, and RAM are interconnected via a bus. Input / output (I / O) interfaces are also connected to the bus.

[0099] The following components are connected to the I / O interface: input components including keyboards, mice, etc.; output components including cathode ray tubes (CRTs), liquid crystal displays (LCDs), and speakers; storage components including hard drives; and communication components including network interface cards such as LAN (Local Area Network) cards and modems. The communication components perform communication processing via networks such as the Internet. Drives are also connected to the I / O interface as needed. Removable media, such as disks, optical discs, magneto-optical discs, semiconductor memories, etc., are installed on the drive as needed so that computer programs read from them can be installed into the storage components as required.

[0100] The above description is merely a preferred exemplary embodiment of this application and is not intended to limit the implementation of this application. Those skilled in the art can easily make corresponding modifications or alterations based on the main concept and spirit of this application. Therefore, the scope of protection of this application should be determined by the scope of protection claimed in the claims.

Claims

1. A method for adjusting a component display container, characterized in that, The adjustment method includes: Obtain the visible size of the browser page and determine the scaling ratio between the visible size and the preset display size of the display container of the target component in the browser page; wherein the scaling ratio includes a first-dimensional threshold scaling ratio and a second-dimensional threshold scaling ratio. Without enabling full-screen scaling mode, a target scaling ratio is determined based on the relationship between the first dimension threshold scaling ratio and the second dimension threshold scaling ratio, and the display container is adjusted based on the target scaling ratio.

2. The adjustment method according to claim 1, characterized in that, The adjustment method further includes: If the visible size is updated, the scaling ratio is updated based on the updated visible size and the preset display size to obtain the updated scaling ratio. Based on the enabled scaling mode and the updated scaling ratio, an updated target scaling ratio is determined, and the display container is adjusted based on the updated target scaling ratio.

3. The adjustment method according to claim 2, characterized in that, The scaling ratio is updated based on the updated view size and the preset display size, including: If the visible size is updated multiple times within a preset time period, a target scaling ratio between the last updated visible size within the preset time period and the preset display size is determined, and the scaling ratio is updated accordingly.

4. The adjustment method according to claim 1, characterized in that, The adjustment method further includes: Without enabling full-screen scaling mode, in response to the size adjustment command for the display container, the scaling ratio between the visible size and the specified display size is determined; wherein, the specified display size is the parameter used to adjust the preset display size in the size adjustment command; The updated target scaling ratio is determined based on the adjusted scaling ratio, and the display container is adjusted based on the updated target scaling ratio.

5. The adjustment method according to claim 1, characterized in that, The visible size includes a first-dimensional visible size and a second-dimensional visible size; the adjustment method further includes: Without enabling full-screen scaling mode, in response to a position adjustment command for the display container, the position of the display container in the browser page is adjusted according to the offset specified by the position adjustment command; wherein, the offset includes a first-dimensional offset and / or a second-dimensional offset, the first-dimensional offset being a parameter determined based on the first-dimensional visible size and the first-dimensional threshold scaling ratio, and the second-dimensional offset being a parameter determined based on the second-dimensional visible size and the second-dimensional threshold scaling ratio.

6. The adjustment method according to any one of claims 1 to 5, characterized in that, The adjustment method further includes: When full-screen scaling mode is enabled, the first dimension display size and the second dimension display size of the display container are adjusted according to the first dimension threshold scaling ratio and the second dimension threshold scaling ratio, respectively.

7. The adjustment method according to any one of claims 1 to 5, characterized in that, The adjustment method further includes: If the target component is uninstalled, the display container is removed from the browser page, and the browser page's original settings are restored; wherein, the original settings include the original page scrolling settings.

8. An adjustment device for a component display container, characterized in that, The adjustment device includes: A determination module is used to obtain the visible size of the browser page and determine the scaling ratio between the visible size and the preset display size of the display container of the target component in the browser page; wherein the scaling ratio includes a first-dimensional threshold scaling ratio and a second-dimensional threshold scaling ratio. The adjustment module is used to determine a target scaling ratio based on the relationship between the first dimension threshold scaling ratio and the second dimension threshold scaling ratio when the full-screen scaling mode is not enabled, and to adjust the display container based on the target scaling ratio.

9. An electronic device, characterized in that, include: Controller; A memory for storing one or more programs, which, when executed by a controller, cause the controller to implement the adjustment method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, It stores computer-readable instructions that, when executed by the computer's processor, cause the computer to perform the adjustment method described in any one of claims 1 to 7.

Images