Interface adaptive display method and device, electronic equipment and readable medium

Abstract

The invention relates to an interface adaptive display method and device, electronic equipment and a readable medium, and the method comprises the steps: obtaining to-be-displayed page information, and determining a page layout of the page information in a current display screen, the page layout comprising display areas corresponding to each display module of the page information; a parameter mapping table is called, display styles of all display areas in the page layout are determined according to the parameter mapping table, a display interface is obtained, the parameter mapping table comprises a mapping relation between multiple sets of proportion parameters and display parameters, and the proportion parameters comprise proportions of all the display styles under the display parameters; and monitoring the window size of the display interface, and adjusting the display style of each display module by using the parameter mapping table under the condition that the window size is changed, so that the display interface is matched with the window size. The problem that when the size of the display window of the display device changes, a complex program is needed to adjust and adapt the display interface is solved.

Description

Technical Field

[0001] The present application relates to the field of terminal display technology, and in particular to an interface adaptation display method, device, electronic device and readable medium. Background Art

[0002] In the development of Internet products, HTML5 (Hyper Text Markup Language 5) technology is widely used in various Web applications and mobile applications. Users can access browser pages on different devices and screen states (such as full screen, half screen, horizontal screen, vertical screen, mother-and-child screen or mobile devices of different sizes, etc.), including but not limited to smartphones, tablets, laptops and desktop computers.

[0003] At present, adaptation solutions for different devices and screen states are mostly implemented through media queries and responsive design. These methods mainly detect screen size and resolution through media queries in CSS3 (Cascading Style Sheets Level 3), and then adjust page layout and style. However, when the display window size of the display device changes, complex programs are required to adjust and adapt the display interface, otherwise the interface cannot be displayed normally.

[0004] To address the above-mentioned problems, no effective solution has been proposed yet. Summary of the invention

[0005] The present application provides an interface adaptation display method, device, electronic device and readable medium to solve the above-mentioned technical problem of "a complex program is required to adjust and adapt the display interface when the display window size of the display device changes".

[0006] According to one aspect of an embodiment of the present application, the present application provides an adaptive display method for an interface, including: obtaining page information to be displayed, and determining a page layout of the page information in a current display screen, wherein the page layout includes display areas corresponding to each display module of the page information; calling a parameter mapping table, and determining a display style of each display area in the page layout according to the parameter mapping table to obtain a display interface, wherein the parameter mapping table includes a mapping relationship between multiple sets of proportional parameters and display parameters, and the proportional parameters include a proportion of each display style under the display parameters; monitoring the window size of the display interface, and when the window size changes, using the parameter mapping table to adjust the display style of each display module to adapt the display interface to the window size.

[0007] Optionally, determining the page layout of the page information in the current display screen includes: splitting the page information to obtain multiple display modules; obtaining screen display parameters of the current display screen; and determining the page layout of each display module on the current display screen according to the screen display parameters.

[0008] Optionally, the display style of each display area in the page layout is determined according to the parameter mapping table to obtain a display interface, including: obtaining the regional display parameters of the display area, and calculating the regional ratio of the display area according to the regional display parameters, wherein the regional display parameters include the regional display width and the regional display height of the display area, and the regional ratio is the ratio of the regional display height to the regional display width; searching for target display parameters corresponding to the regional display parameters in the parameter mapping table, wherein the difference between the screen ratio of the target display parameters and the regional ratio of the regional display parameters is less than a preset threshold; extracting the target ratio parameters that have a mapping relationship with the target display parameters from the parameter mapping table; and determining each display style in the display area using the target ratio parameters.

[0009] Optionally, the page layout of each display module on the current display screen is determined according to the screen display parameters, including: obtaining the CSS file corresponding to each display module, and obtaining the HTML file corresponding to each display module; dynamically loading each CSS file and each HTML file according to the screen display parameters to generate the page layout of each display module on the current display screen.

[0010] Optionally, adjusting the display style of each display module using the parameter mapping table includes: updating a CSS file using the changed window size; and adjusting the display style of each display module using the parameter mapping table and the updated CSS file.

[0011] Optionally, before calling the parameter mapping table, the method also includes generating a parameter mapping table in the following manner: obtaining design drafts corresponding to display devices of different models, wherein the display parameters of display devices of different models are different; calculating proportional parameters corresponding to each display parameter according to the design draft; establishing a mapping relationship between the proportional parameters and the display parameters, and storing the mapping relationship to obtain a parameter mapping table.

[0012] Optionally, splitting the page information to obtain a plurality of display modules includes: extracting each information point in the page information; and splitting the page information into different display modules according to each information point.

[0013] According to another aspect of an embodiment of the present application, the present application provides an adaptive display device for an interface, including: an acquisition module, used to acquire page information to be displayed, and determine the page layout of the page information in the current display screen, wherein the page layout includes display areas corresponding to each display module of the page information; a calling module, used to call a parameter mapping table, and determine the display style of each display area in the page layout according to the parameter mapping table to obtain a display interface, wherein the parameter mapping table includes a mapping relationship between multiple sets of proportional parameters and display parameters, and the proportional parameters include the proportion of each display style under the display parameters; an adjustment module, used to monitor the window size of the display interface, and when the window size changes, use the parameter mapping table to adjust the display style of each display module to adapt the display interface to the window size.

[0014] According to another aspect of an embodiment of the present application, the present application provides an electronic device, including a memory, a processor, a communication interface and a communication bus, wherein the memory stores a computer program that can be run on the processor, the memory and the processor communicate through the communication bus and the communication interface, and the steps of the above method are implemented when the processor executes the computer program.

[0015] According to another aspect of an embodiment of the present application, the present application also provides a computer-readable medium having a non-volatile program code executable by a processor, and the program code enables the processor to execute the above method.

[0016] The above technical solution provided by the embodiment of the present application has the following advantages compared with the related art:

[0017] The present application adopts an interface adaptation display method, including: obtaining page information to be displayed, and determining the page layout of the page information in the current display screen, wherein the page layout includes display areas corresponding to the various display modules of the page information; calling a parameter mapping table, and determining the display style of each display area in the page layout according to the parameter mapping table to obtain a display interface, wherein the parameter mapping table includes a mapping relationship between multiple sets of proportional parameters and display parameters, and the proportional parameters include the proportion of each display style under the display parameters; monitoring the window size of the display interface, and when the window size changes, using the parameter mapping table to adjust the display style of each display module to adapt the display interface to the window size. By pre-creating a parameter mapping table to adaptively adjust the display style of each display module in the page layout, the display style of each display module is adapted to the display screen, and the problem of requiring a complex program to adjust and adapt the display interface when the display window size of the display device changes is solved. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0019] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the related technologies, the drawings required for use in the embodiments or the related technical descriptions are briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0020] Figure 1 A flowchart of an optional interface adaptation display method provided according to an embodiment of the present application;

[0021] Figure 2 A block diagram of an optional interface adaptation display device provided according to an embodiment of the present application;

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

[0023] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0024] In the subsequent description, the suffixes such as "module", "component" or "unit" used to represent elements are only used to facilitate the description of the present application and have no specific meaning. Therefore, "module" and "component" can be used interchangeably.

[0025] In the development of Internet products, HTML5 technology is widely used in various web applications and mobile applications. Users can access browser pages on different devices and screen states (such as full screen, half screen, horizontal screen, vertical screen, mother-and-child screen or mobile devices of different sizes, etc.), including but not limited to smartphones, tablets, laptops and desktop computers.

[0026] At present, adaptation solutions for different devices and screen states are mostly implemented through media queries and responsive design. These methods mainly detect screen size and resolution through media queries in CSS3, and then adjust page layout and style. However, when the display window size of the display device changes, complex programs are required to adjust and adapt the display interface, otherwise the interface cannot be displayed normally.

[0027] In order to solve the problems mentioned in the background technology, according to one aspect of the embodiment of the present application, a method for adapting and displaying an interface is provided, such as Figure 1 As shown, including:

[0028] Step 101, obtaining page information to be displayed, and determining a page layout of the page information in the current display screen, wherein the page layout includes display areas corresponding to each display module of the page information;

[0029] Step 103, calling a parameter mapping table, and determining the display style of each display area in the page layout according to the parameter mapping table to obtain a display interface, wherein the parameter mapping table includes a mapping relationship between multiple sets of proportion parameters and display parameters, and the proportion parameters include the proportion of each display style under the display parameters;

[0030] Step 105 , monitoring the window size of the display interface, and when the window size changes, adjusting the display style of each display module using a parameter mapping table to adapt the display interface to the window size.

[0031] This application introduces an adaptation solution based on modular design and dynamic layout adjustment, so that the displayed page can automatically identify and adapt to various screen states and device types, thereby improving user experience and page performance.

[0032] Specifically, obtaining the page information to be displayed includes: determining the user identity to which the display window belongs, calling the permission data corresponding to the permission of the user identity, and determining the permission data as the page information. Since each user has different viewing permissions, the data that can be viewed will also be different. Therefore, the page information needs to be determined according to the permissions of the login account of the current window, and only the permission data matching the current user is used as the page information.

[0033] Specifically, the display style includes various elements on the display page, including but not limited to: font, font size, picture, dialog box, etc.

[0034] Specifically, in Java Script, you can capture changes in window size by listening to the resize event. Since changes in the window display direction (such as switching from portrait to landscape) will also cause changes in the screen size (usually refers to the viewport size in CSS), the resize event will also be triggered.

[0035] If the window size changes, the layout of each display module will also change. At this time, the display style of each display module after the change can be adjusted according to the pre-generated parameter mapping table.

[0036] A parameter mapping table is predefined and generated. The parameter mapping table contains the mapping relationship between multiple sets of scale parameters and display parameters, and defines the style configuration of the display module under different display conditions. By calling the mapping table, the style of the display module can be dynamically adjusted according to different display scales and conditions, so that the layout and style are more in line with the design requirements.

[0037] Through Java Script, the device type and screen status are detected in real time, and the corresponding layout module is dynamically loaded to achieve adaptive layout of the page, which improves the page performance compared to manual adaptation.

[0038] As an optional embodiment, determining the page layout of page information in the current display screen includes: splitting the page information to obtain multiple display modules; obtaining screen display parameters of the current display screen; and determining the page layout of each display module on the current display screen according to the screen display parameters.

[0039] First, the complete page information needs to be split into multiple independent display modules, each of which corresponds to a certain part of the page content, such as the title bar, navigation bar, main content area, sidebar, advertising area, etc. The purpose of splitting page information is to facilitate flexible layout on the display screen, and to be able to independently adjust and control each part of the page according to different screen parameters and display requirements.

[0040] Next, the screen display parameters of the current display screen are obtained, including: reading the window width and window height of the display window on the current display screen, and determining the window width and window height as the screen display parameters.

[0041] For example, the window.inner Width property and the window.inner Height property are part of the BOM (Browser Object Model), which respectively provide the current internal width and height of the browser window (viewport) (including scroll bars, but excluding toolbars and status bars). These properties exist because the browser provides an interface for interacting with the browser window through the BOM, allowing developers to query and modify certain properties of the browser window. Among them, the window.inner Width property can return the internal width of the browser window, including scroll bars (if any), but excluding toolbars and status bars. This value will change as the window size changes. The window.inner Height property can return the internal height of the browser window, including scroll bars (if any), but excluding toolbars and status bars. Similarly, this value will change as the window size changes.

[0042] The layout of each display module on the screen includes the module position, module size and module ratio of each display module, where the module position refers to the specific position of each display module on the screen, such as the main content area is displayed in the center, the sidebar is located on the right, etc.; the module size refers to the space occupied by the display module on the screen. According to the resolution and ratio of the screen, the size of each display module is adjusted so that they occupy the appropriate space on the screen. For example, on a high-resolution screen, text and image modules may need to be enlarged to maintain clarity; the module ratio can be understood as the aspect ratio. According to the display ratio of the screen (such as 16:9 or 4:3), the ratio of each display module can be obtained to ensure that the page content will not be distorted due to stretching or compression.

[0043] By determining the page layout of each display module on the current display screen according to the screen display parameters, it is ensured that the page content can be presented in the best way on the current display screen, so that users can get a good visual experience. In addition, the componentized layout method is adopted, so that the page structure can be dynamically adjusted according to the device and screen status, which can effectively reduce the amount of CSS code for the same module and improve the page loading speed and maintenance efficiency.

[0044] As an optional embodiment, the display style of each display area in the page layout is determined according to a parameter mapping table to obtain a display interface, including: obtaining regional display parameters of the display area, and calculating the regional ratio of the display area according to the regional display parameters, wherein the regional display parameters include the regional display width and the regional display height of the display area, and the regional ratio is the ratio of the regional display height to the regional display width; searching for target display parameters corresponding to the regional display parameters in the parameter mapping table, wherein the difference between the screen ratio of the target display parameters and the regional ratio of the regional display parameters is less than a preset threshold; extracting the target ratio parameters that have a mapping relationship with the target display parameters from the parameter mapping table; and determining each display style in the display area using the target ratio parameters.

[0045] There are different ways to get the width and height of the display area, such as getting it from the browser's window object or from a specific container element. The area display width is the width of the display area in the page layout, usually expressed in pixels or other units of measurement, and the area display height is the height of the display area in the page layout, also expressed in pixels or other units of measurement.

[0046] Searching for the target display parameters corresponding to the regional display parameters in the parameter mapping table is actually searching for the screen ratio that is closest to the regional ratio of the display area. The aspect ratio of the preferred target display parameters provided in this application is the same as the regional ratio. If there is no aspect ratio that is exactly the same as the regional ratio, then try to find the closest aspect ratio as the target display parameter.

[0047] It should be noted that the preset threshold is a value infinitely close to zero, and this application does not limit the specific value of the preset threshold. By setting a value infinitely close to zero as the preset threshold, the display parameters can be matched more flexibly, and even if the area ratio and the screen ratio are not completely consistent, a similar display style can be found.

[0048] By obtaining the parameters of the display area, matching the appropriate display style, and applying the target ratio parameters, it can flexibly adapt to different display environments and determine the best style for each display area. This dynamic style adjustment process based on the parameter mapping table ensures that the page displays consistently and beautifully on different devices or screens.

[0049] As an optional embodiment, the page layout of each display module on the current display screen is determined according to the screen display parameters, including: obtaining the CSS file corresponding to each display module, and obtaining the HTML file corresponding to each display module; dynamically loading each CSS file and each HTML file according to the screen display parameters to generate the page layout of each display module on the current display screen.

[0050] Specifically, the CSS file is used to describe the visual style of the display module, such as color, font, margin, alignment, etc. Each display module may have one or more CSS files to support different display conditions (such as different resolutions, device types). The HTML file is used to define the content structure of the display module, including the arrangement of elements such as text, images, links, etc. The HTML file determines the basic content and structural layout of the module. By obtaining the CSS file and the HTML file, the style and structure of the display module can be flexibly adjusted under different display conditions to adapt to the characteristics of the current display screen.

[0051] If there is no CSS file or HTML file corresponding to the display module, you need to rewrite it. If it exists, you can call it directly.

[0052] Optionally, since CSS media queries can be used to define styles under different screen sizes, various CSS files can be dynamically loaded according to screen display parameters.

[0053] For example, dynamically loading each CSS file according to the screen display parameters includes: selecting a CSS file suitable for the current environment according to the screen display parameters. For example, for a high-resolution display screen, a CSS file containing high-resolution images and larger fonts is loaded. Dynamic loading in this application means that the most suitable CSS file will be selected according to the actual display environment (such as screen size, device type), rather than statically loading pre-defined styles.

[0054] For example, dynamically loading each HTML file according to the screen display parameters includes: loading an adapted HTML file according to the display screen parameters to ensure that the content and structure of each display module can be displayed correctly. For example, on a small screen device, the system may load a simplified HTML file to adapt to a smaller display space.

[0055] Optionally, there are many ways to load HTML files. You can choose the most suitable method to load HTML files based on actual needs (such as whether server support is required, whether content needs to be loaded dynamically, whether another page needs to be embedded in the current page, etc.). This application does not limit this.

[0056] When the CSS and HTML files are loaded, the layout of each display module on the current display screen will be generated based on these files, including: combining the loaded HTML files and CSS files to build a complete page layout; according to the loaded CSS files, the system will adjust the size, position and other style attributes of the display module to ensure that the visual effect and user experience of the entire page meet the expectations. The final generated page layout will adapt to the characteristics of the current display screen, whether it is a desktop, mobile device or other type of display screen, it can provide a consistent and optimized user experience.

[0057] By acquiring and dynamically loading CSS and HTML files, a highly adaptable page layout can be generated according to different screen display parameters, and the page layout can be adapted so that the display module can be presented in the best way on different devices or display screens.

[0058] As an optional embodiment, the display style of each display module is adjusted using the parameter mapping table, including: updating the CSS file using the changed window size; and adjusting the display style of each display module using the parameter mapping table and the updated CSS file.

[0059] Specifically, updating the CSS file using the changed window size includes: selecting or generating an adaptive CSS file according to the new window size. These CSS files will contain style rules for the current window size, such as adjusting font size, layout width, image scaling, etc.

[0060] Adjusting the display style of each display module by using the parameter mapping table is actually to redefine the display style of each display module.

[0061] By using proportion parameters and CSS variables and event monitoring, real-time style adjustment and page redrawing can be achieved, which improves the user experience when switching or changing between horizontal and vertical screens, and ensures that the page maintains good display effects on different devices and screen states.

[0062] As an optional embodiment, before calling the parameter mapping table, the method also includes generating a parameter mapping table in the following manner: obtaining design drafts corresponding to display devices of different models, wherein the display parameters of display devices of different models are different; calculating the proportional parameters corresponding to each display parameter according to the design draft; establishing a mapping relationship between the proportional parameters and the display parameters, and storing the mapping relationship to obtain a parameter mapping table.

[0063] Since different display devices (such as mobile phones, tablets, desktop monitors, etc.) have different display parameters (such as screen size, resolution, pixel density, etc.), this application needs to obtain different design drafts for these devices. These design drafts usually take into account the physical characteristics and user experience requirements of each display device, and provide optimized page layout and style design.

[0064] A design draft is a visual design created for the screen resolution, size, and other display parameters of a specific device. Design drafts corresponding to different types of display devices can be obtained from the design team or UI (User Interface) design tools.

[0065] In order to ensure the best display effect on a specific device, the designer will select several specific models (such as a mobile phone, tablet or computer) as design templates and design a design draft. The design draft includes the font size, module size, spacing, etc. of the page. The designer will use the screen size and resolution of the device as a benchmark to set the style and layout.

[0066] After the designer designs the page style based on each model as a template, the font size of the page and the proportion parameters of the style size of each module to the current overall model viewport are calculated, and then applied to the screens of each model to achieve adaptive effects, and the page will be divided into modules to display relatively reasonable modules on different screen types. For example, the header module is hidden in the half-screen and mother-child screen modes, allowing users to browse directly to the core content.

[0067] For example, in the design draft, if the width of a button on different devices should account for 20% of the screen width, this 20% ratio is a proportional parameter. The proportional parameter is a relative value relative to the entire screen or a part, not an absolute pixel value.

[0068] According to the screen size and resolution of the template device, the ratio parameters of each display style (including the page font size and the style size of each module) and the current viewport are calculated. This ratio parameter is used to adjust the display effect of the page on different devices to ensure that each element of the page is displayed reasonably under different screen sizes.

[0069] The purpose of calculating the proportional parameters is to convert the visual design in the design draft into display rules that can adapt to different devices, so that the page can be adjusted according to different display conditions without deviating from the original design intent.

[0070] The scale parameters are mapped and stored with the display parameters of the screen, and then appropriate scale parameters can be directly called according to the size of the display area for adaptive adjustment without the need for redesign.

[0071] As an optional embodiment, the page information is split to obtain multiple display modules, including: extracting each information point in the page information; and splitting the page information into different display modules according to each information point.

[0072] Specifically, information points in the page information are identified, including but not limited to: titles and subtitles: the main topic or title of the page, and possible subtopics or subtitles; content blocks: paragraphs, lists, tables, etc. containing specific information or descriptions; pictures and multimedia: images, videos, audio, etc. used to enhance content understanding; interactive elements: buttons, forms, links, etc., elements that allow users to interact with the page; navigation and menus: navigation bars, sidebars, etc. that help users browse the website or page; advertising and promotional information.

[0073] The obtained information points are divided according to logic and function, and each information point or a group of related information points can form an independent display module. For example: Header module: contains the website logo, navigation menu, search box, etc.; Main content module: displays the core information of the page, which may contain multiple sub-modules, such as article text, product display, etc.; Sidebar module: used to display related links, advertisements, user information and other auxiliary content; Bottom module: contains copyright information, site map link, social media link, etc.

[0074] By extracting information points, the content on the page can be broken down into smaller and more specific units, which lays the foundation for the subsequent display module splitting and layout.

[0075] By splitting and combining information points into display modules, the page content can be presented in a more orderly and structured manner. This not only helps the design of the page layout, but also improves the readability of the page content and the efficiency of user interaction.

[0076] The present application adopts an interface adaptation display method, including: obtaining page information to be displayed, and determining the page layout of the page information in the current display screen, wherein the page layout includes display areas corresponding to the various display modules of the page information; calling a parameter mapping table, and determining the display style of each display area in the page layout according to the parameter mapping table to obtain a display interface, wherein the parameter mapping table includes a mapping relationship between multiple sets of proportional parameters and display parameters, and the proportional parameters include the proportion of each display style under the display parameters; monitoring the window size of the display interface, and when the window size changes, using the parameter mapping table to adjust the display style of each display module to adapt the display interface to the window size. By pre-creating a parameter mapping table to adaptively adjust the display style of each display module in the page layout, the display style of each display module is adapted to the display screen, and the problem of requiring a complex program to adjust and adapt the display interface when the display window size of the display device changes is solved.

[0077] According to another aspect of the embodiment of the present application, the present application provides an interface adaptation display device, such as Figure 2 As shown, including:

[0078] The acquisition module 202 is used to acquire the page information to be displayed and determine the page layout of the page information in the current display screen, wherein the page layout includes display areas corresponding to each display module of the page information;

[0079] The calling module 204 is used to call the parameter mapping table, and determine the display style of each display area in the page layout according to the parameter mapping table to obtain a display interface, wherein the parameter mapping table includes a mapping relationship between multiple sets of proportion parameters and display parameters, and the proportion parameters include the proportion of each display style under the display parameters;

[0080] The adjustment module 206 is used to monitor the window size of the display interface, and when the window size changes, use the parameter mapping table to adjust the display style of each display module so that the display interface is adapted to the window size.

[0081] It should be noted that the acquisition module 202 in this embodiment can be used to execute step 101 in the embodiment of the present application, the calling module 204 in this embodiment can be used to execute step 103 in the embodiment of the present application, and the adjustment module 206 in this embodiment can be used to execute step 105 in the embodiment of the present application.

[0082] Optionally, the acquisition module 202 specifically includes:

[0083] The splitting submodule is used to split the page information to obtain multiple display modules;

[0084] The acquisition submodule is used to obtain the screen display parameters of the current display screen;

[0085] The determination submodule is used to determine the page layout of each display module on the current display screen according to the screen display parameters.

[0086] Optionally, the calling module 204 is also used to obtain regional display parameters of the display area, and calculate the regional ratio of the display area according to the regional display parameters, wherein the regional display parameters include the regional display width and the regional display height of the display area, and the regional ratio is the ratio of the regional display height to the regional display width; search for target display parameters corresponding to the regional display parameters in the parameter mapping table, wherein the difference between the screen ratio of the target display parameters and the regional ratio of the regional display parameters is less than a preset threshold; extract the target ratio parameters that have a mapping relationship with the target display parameters from the parameter mapping table; and determine each display style in the display area using the target ratio parameters.

[0087] Optionally, the determination submodule is also used to obtain the CSS files corresponding to each display module, and obtain the HTML files corresponding to each display module; dynamically load each CSS file and each HTML file according to the screen display parameters to generate a page layout of each display module on the current display screen.

[0088] Optionally, the adjustment module 206 is further configured to update the CSS file using the changed window size; and adjust the display style of each display module using the parameter mapping table and the updated CSS file.

[0089] Optionally, the device also includes a generation module, which is used to generate a parameter mapping table before calling the parameter mapping table. The method also includes generating a parameter mapping table in the following manner: obtaining design drafts corresponding to display devices of different models, wherein the display parameters of display devices of different models are different; calculating proportional parameters corresponding to each display parameter according to the design draft; establishing a mapping relationship between the proportional parameters and the display parameters, and storing the mapping relationship to obtain a parameter mapping table.

[0090] Optionally, the splitting submodule is further used to extract each information point in the page information; and split the page information into different display modules according to each information point.

[0091] It should be noted here that the examples and application scenarios implemented by the above modules and corresponding steps are the same, but are not limited to the contents disclosed in the above embodiments.

[0092] According to another aspect of the embodiments of the present application, the present application provides an electronic device, such as Figure 3As shown, it includes a memory 301, a processor 303, a communication interface 305 and a communication bus 307. The memory 301 stores a computer program that can be run on the processor 303. The memory 301 and the processor 303 communicate through the communication interface 305 and the communication bus 307. When the processor 303 executes the computer program, the steps of the above method are implemented.

[0093] The memory and processor in the above electronic device communicate via a communication bus and a communication interface. The communication bus may be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. The communication bus may be divided into an address bus, a data bus, a control bus, etc.

[0094] The memory may include a random access memory (RAM) or a non-volatile memory, such as at least one disk memory. Optionally, the memory may also be at least one storage device located away from the aforementioned processor.

[0095] The above-mentioned processor can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

[0096] According to another aspect of the embodiments of the present application, a computer-readable medium having a non-volatile program code executable by a processor is provided.

[0097] Optionally, the specific examples in this embodiment may refer to the examples described in the above embodiments, and this embodiment will not be described in detail here.

[0098] When the embodiments of the present application are specifically implemented, reference may be made to the above-mentioned embodiments, which have corresponding technical effects.

[0099] It is understood that the embodiments described herein may be implemented in hardware, software, firmware, middleware, microcode, or a combination thereof. For hardware implementation, the processing unit may be implemented in one or more application specific integrated circuits (ASIC), digital signal processors (DSP), digital signal processing devices (DSPD), programmable logic devices (PLD), field programmable gate arrays (FPGA), general purpose processors, controllers, microcontrollers, microprocessors, other electronic units for performing the functions described in the present application, or a combination thereof.

[0100] For software implementation, the technology described herein can be implemented by a unit that performs the functions described herein. The software code can be stored in a memory and executed by a processor. The memory can be implemented in the processor or outside the processor.

[0101] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0102] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0103] In the embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the modules is only a logical function division. There may be other division methods in actual implementation, such as multiple modules 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 an indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.

[0104] 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.

[0105] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0106] If the function is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the embodiment of the present application is essentially or the part that contributes to the prior art or the part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium, including several instructions to make a computer device (which can be a personal computer, a server, or a network device, etc.) perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a ROM, a RAM, a magnetic disk or an optical disk. It should be noted that, in this article, relational terms such as "first" and "second" are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply that there is any such actual relationship or order between these entities or operations. Moreover, the term "include", "include" or any other variant thereof is intended to cover non-exclusive inclusion, so that the process, method, article or device including a series of elements includes not only those elements, but also includes other elements that are not explicitly listed, or also includes elements inherent to such a process, method, article or device. Without more constraints, an element defined by the phrase "comprising a..." does not exclude the existence of other identical elements in the process, method, article or apparatus comprising the element.

[0107] The above description is only a specific implementation of the present application, so that those skilled in the art can understand or implement the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein can be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest range consistent with the principles and novel features applied for herein.

Claims

1. A method for displaying an interface, characterized in that: include: Acquire page information to be displayed, and determine a page layout of the page information in the current display screen, wherein the page layout includes display areas corresponding to each display module of the page information; Calling a parameter mapping table, and determining the display style of each display area in the page layout according to the parameter mapping table to obtain a display interface, wherein the parameter mapping table includes a mapping relationship between multiple sets of proportion parameters and display parameters, and the proportion parameters include the proportion of each display style under the display parameters; The window size of the display interface is monitored, and when the window size changes, the display style of each display module is adjusted using the parameter mapping table to adapt the display interface to the window size.

2. The method according to claim 1, characterized in that The determining of the page layout of the page information in the current display screen includes: Splitting the page information to obtain a plurality of display modules; Obtaining screen display parameters of the current display screen; The page layout of each of the display modules on the current display screen is determined according to the screen display parameters.

3. The method according to claim 1, characterized in that Determining the display style of each display area in the page layout according to the parameter mapping table to obtain a display interface includes: Acquire a region display parameter of the display region, and calculate a region ratio of the display region according to the region display parameter, wherein the region display parameter includes a region display width and a region display height of the display region, and the region ratio is a ratio of the region display height to the region display width; Searching for a target display parameter corresponding to the regional display parameter in the parameter mapping table, wherein a difference between a screen ratio of the target display parameter and the regional ratio of the regional display parameter is less than a preset threshold; Extracting the target scale parameter having the mapping relationship with the target display parameter from the parameter mapping table; The target ratio parameter is used to determine each of the display styles in the display area.

4. The method according to claim 2, characterized in that: The determining, according to the screen display parameters, the page layout of each of the display modules on the current display screen comprises: Acquire a CSS file corresponding to each of the display modules, and acquire an HTML file corresponding to each of the display modules; Each of the CSS files and each of the HTML files is dynamically loaded according to the screen display parameters to generate the page layout of each of the display modules on the current display screen.

5. The method according to claim 4, characterized in that The adjusting the display style of each of the display modules by using the parameter mapping table includes: Updating the CSS file using the changed window size; The display style of each of the display modules is adjusted using the parameter mapping table and the updated CSS file.

6. The method according to claim 1, characterized in that Before calling the parameter mapping table, the method further includes generating the parameter mapping table in the following manner: Obtaining design drafts corresponding to display devices of different models, wherein the display parameters of the display devices of different models are different; Calculate the scale parameters corresponding to the respective display parameters according to the design draft; The mapping relationship between the scale parameter and the display parameter is established, and the mapping relationship is stored to obtain the parameter mapping table.

7. The method according to claim 2, characterized in that The page information is split to obtain multiple display modules, including: Extracting each information point in the page information; The page information is divided into different display modules according to the various information points.

8. An interface adaptation display device, characterized in that: include: An acquisition module, used for acquiring page information to be displayed, and determining a page layout of the page information in a current display screen, wherein the page layout includes display areas corresponding to each display module of the page information; A calling module, used to call a parameter mapping table, and determine the display style of each display area in the page layout according to the parameter mapping table to obtain a display interface, wherein the parameter mapping table includes a mapping relationship between multiple sets of proportion parameters and display parameters, and the proportion parameters include the proportion of each display style under the display parameters; The adjustment module is used to monitor the window size of the display interface, and when the window size changes, use the parameter mapping table to adjust the display style of each display module so that the display interface is adapted to the window size.

9. An electronic device, comprising a memory, a processor, a communication interface and a communication bus, wherein the memory stores a computer program that can be run on the processor, and the memory and the processor communicate through the communication bus and the communication interface, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 7 are implemented.

10. A computer readable medium having a non-volatile program code executable by a processor, characterized in that: The program code enables the processor to execute the method according to any one of claims 1 to 7.

Images