CN115237522A - Page self-adaptive display method and device - Google Patents
Page self-adaptive display method and device Download PDFInfo
- Publication number
- CN115237522A CN115237522A CN202210868599.5A CN202210868599A CN115237522A CN 115237522 A CN115237522 A CN 115237522A CN 202210868599 A CN202210868599 A CN 202210868599A CN 115237522 A CN115237522 A CN 115237522A
- Authority
- CN
- China
- Prior art keywords
- page
- display
- grid
- displayed
- target
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the application discloses a page self-adaptive display method and a device, wherein the method comprises the following steps: detecting resolution data of a page, and determining a target display style corresponding to the resolution data; dividing a unit content display area in a page into a plurality of grids according to the resolution data and the grid size information; and rendering the elements to be displayed in each grid according to the target display style. According to the method and the device, the resolution data of the page are detected, the target display style which is adapted to the page at present is determined according to the detected resolution data, so that the page can be distributed and displayed in a self-adaptive mode, a user can obtain a better page display effect under user terminals with different resolutions and page windows with different sizes, and the page browsing experience of the user is effectively improved.
Description
Technical Field
The embodiment of the application relates to the technical field of page processing, in particular to a page self-adaptive display method and device.
Background
At present, some pages adopt a self-adaptive design, which generally means that the layout of the page content, such as size, can automatically adapt to the current page window along with the difference of the resolution of the user terminal and the scaling of a browser, a page window and the like, so as to bring better browsing experience to users.
In the prior art, the adaptive design of the page is mostly realized by adopting a fixed algorithm, however, the fixed algorithm is difficult to be well applied to various display situations, for example, when the page is displayed by using a high-resolution user terminal, the page is laid out according to the fixed algorithm, and the problems that the content of the page is too small or both sides of the page are too large may exist, so that the page display effect is poor.
Disclosure of Invention
In view of the above problems, the present application provides a page adaptive display method, device, computing terminal and computer storage medium, which are used to solve the following problems: the existing page self-adaption scheme is difficult to be well suitable for various display situations, so that the page display effect is poor under certain display situations.
According to an aspect of the embodiments of the present application, there is provided a page adaptive display method, including:
detecting resolution data of a page, and determining a target display style corresponding to the resolution data;
dividing a unit content display area in a page into a plurality of grids according to the resolution data and the grid size information;
and rendering the elements to be displayed in each grid according to the target display style.
Further, determining the target display style corresponding to the resolution data further includes:
and searching a target display style corresponding to the resolution data from a plurality of preset page display styles included in the configuration file according to the resolution data.
Furthermore, preset page display styles corresponding to a plurality of resolution ranges are recorded in the configuration file;
according to the resolution data, searching a target display style corresponding to the resolution data from a plurality of preset page display styles included in the configuration file further comprises:
matching the resolution data with a plurality of resolution ranges, and taking the resolution range which the resolution data conforms to as a target resolution range;
and taking a preset page display style corresponding to the target resolution range in the configuration file as a target display style.
Further, the preset page display style at least comprises: the display method comprises the steps of displaying each display unit component included in a page, the row number and the column number of elements to be displayed in each display unit component, the display unit spacing between adjacent display unit components, the edge distance between each display unit component and the edge side of the page, the grid width-height ratio, each function control included in the page and the display position of each function control.
Further, the grid size information includes: grid height and grid width;
dividing the unit content display area in the page into a plurality of grids according to the resolution data and the grid size information further comprises:
acquiring a target cover picture element and a target file element;
determining the height of the grid according to the width of the target cover picture element, the width-height ratio of the target cover picture element and the height of the target pattern element;
determining the grid width according to the width of the picture element of the target cover;
and dividing the unit content display area in the page according to the resolution data, the grid height and the grid width to obtain a plurality of grids.
Further, rendering the to-be-displayed elements in each grid according to the target display style further comprises:
determining the display position of a unit content display area corresponding to each display unit component in the page according to the target display style;
and rendering the elements to be displayed in each grid corresponding to each display unit component.
Further, rendering the elements to be shown in the grids corresponding to each of the display unit assemblies further comprises:
aiming at each display unit component, acquiring elements to be displayed corresponding to the display unit component, and determining grids corresponding to the elements to be displayed;
for each element to be displayed, determining a grid rendering width and a grid rendering height according to the grid width, the grid width-height ratio in the target display style and the grid number of the grid corresponding to the element to be displayed;
and zooming the to-be-displayed element according to the grid rendering width and the grid rendering height, and rendering the zoomed to-be-displayed element in the grid corresponding to the to-be-displayed element.
Further, obtaining the element to be displayed corresponding to the display unit component further comprises:
acquiring a preset number of elements to be displayed corresponding to the display unit component from a server; wherein the preset number is determined according to the screen width of the user terminal.
Further, the number of the grids corresponding to a single element to be displayed is one or more.
Further, after the elements to be displayed in each grid are rendered according to the target display style, the method further includes:
responding to a display scale reduction operation executed by a user for a page, and determining a rendering boundary range after the page display scale reduction;
and displaying the elements to be displayed within the rendering boundary range in the page, and hiding the elements to be displayed outside the rendering boundary range.
According to another aspect of the embodiments of the present application, there is provided a page adaptive display apparatus, including:
the detection module is used for detecting resolution data of the page and determining a target display style corresponding to the resolution data;
the grid dividing module is used for dividing the unit content display area in the page into a plurality of grids according to the resolution data and the grid size information;
and the rendering module is used for rendering the elements to be displayed in each grid according to the target display style.
According to another aspect of the embodiments of the present application, there is provided a computing terminal including: the processor, the memory and the communication interface complete mutual communication through the communication bus;
the memory is used for storing at least one executable instruction, and the executable instruction enables the processor to execute the operation corresponding to the page self-adaptive display method.
According to another aspect of the embodiments of the present application, a computer storage medium is provided, where at least one executable instruction is stored in the storage medium, and the executable instruction causes a processor to perform an operation corresponding to the above-mentioned page adaptive presentation method.
According to the page self-adaptive display method, the device, the computing terminal and the computer storage medium, which are provided by the embodiment of the application, the target display style corresponding to the resolution data is determined by detecting the resolution data of the page; dividing a unit content display area in a page into a plurality of grids according to the resolution data and the grid size information; and rendering the elements to be displayed in each grid according to the target display style. According to the method and the device, the resolution data of the page are detected, and the target display style currently adapted to the page is determined according to the detected resolution data, so that the page can be adaptively arranged and displayed, a user can obtain a better page display effect under user terminals with different resolutions and page windows with different sizes, and the page browsing experience of the user is effectively improved; configuring different preset page display styles under different resolution ranges as self-adaptive rules by defining; writing the self-adaptive rule into a configuration file input server for calling, after the resolution data of the current page is detected, quickly acquiring a corresponding target display style, and reasonably displaying the page according to different resolution data; and the display scale reduction operation executed by the user aiming at the page can be responded, only the elements to be displayed which are positioned in the rendering boundary range are displayed in the page, and the elements to be displayed which are positioned outside the rendering boundary range are hidden, so that better page display can be quickly and conveniently obtained under the condition of executing page scaling or expansion.
The foregoing description is only an overview of the technical solutions of the embodiments of the present application, and the embodiments of the present application can be implemented according to the content of the description in order to make the technical means of the embodiments of the present application more clearly understood, and the detailed description of the embodiments of the present application will be given below in order to make the foregoing and other objects, features, and advantages of the embodiments of the present application more clearly understandable.
Drawings
Various additional advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the embodiments of the present application. Also, like reference numerals are used to refer to like parts throughout the drawings. In the drawings:
FIG. 1 is a flow chart of a method for adaptively presenting a page according to an embodiment of the present application;
FIG. 2a is a schematic flow chart of a method for adaptively presenting a page according to another embodiment of the present application;
FIG. 2b is a diagram illustrating a first preset page display style in accordance with another embodiment of the present application;
FIG. 2c is a diagram illustrating a second preset page display style in accordance with another embodiment of the present application;
FIG. 2d is a diagram illustrating a third example of a preset page display style in accordance with another embodiment of the present application;
FIG. 2e shows a fourth schematic diagram of a preset page display style in accordance with another embodiment of the present application;
FIG. 2f shows a fifth schematic diagram of a preset page display style in accordance with another embodiment of the present application;
FIG. 2g illustrates a schematic view of one of the display element assemblies being rasterized according to another embodiment of the present application;
FIG. 3 is a block diagram of a page adaptive presentation apparatus according to an embodiment of the present application;
FIG. 4 illustrates a schematic diagram of a computing terminal according to an embodiment of the present application.
Detailed Description
Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
First, the noun terms to which one or more embodiments of the present application relate are explained.
Screen resolution: the number of pixels in the vertical and horizontal directions of the screen is used for determining the setting of how much information is displayed on the screen of a computer or a terminal, and the setting is usually measured by horizontal and vertical pixels, and the unit is px.
Rendering: is a process of displaying data.
Fig. 1 shows a schematic flowchart of a page adaptive display method according to an embodiment of the present application, and as shown in fig. 1, the method includes the following steps 101 to 103:
step S101: and detecting resolution data of the page, and determining a target display style corresponding to the resolution data.
In the step, a target display style corresponding to resolution data is determined by detecting and acquiring the resolution data of the current page; the resolution data of the page refers to data such as the width and pixel ratio of a page window currently accessed by a user, and specifically, if the page is displayed in a full screen of a user terminal, the resolution data of the page may include screen resolution data of the user terminal; if a browser is used to present a page, the resolution data for the page may include resolution data for a browser window. In order to facilitate determining a target display style corresponding to the current resolution data, different preset page display styles can be set in the server in advance; for example, corresponding preset page display styles can be respectively set for various resolution data which generally exist in the market; or corresponding preset page display styles are respectively set for a plurality of resolution ranges, and the corresponding target display style is determined by judging the resolution range in which the resolution data of the current page is positioned.
Step S102: and dividing the unit content display area in the page into a plurality of grids according to the resolution data and the grid size information.
The skilled person can set the grid size information according to the actual requirement, which is not limited herein. The grid size information may be a fixed value set in advance, or may be determined based on a certain element or some elements, and for convenience of distinction, the element on which the grid size information is determined is referred to as a target element. For example, if the page is a recommended page for recommending objects such as videos and books, the target elements may include target cover picture elements of the objects such as the videos and the books and target document elements for introducing the objects such as the videos and the books, and the like, and may be obtained from the server. Specifically, the layout of the page is determined according to the resolution data, for example, a unit content display area and an edge distance between the unit content display area and a side of the page may be determined, where the unit content display area refers to an area where display unit components are located in the page, and each display unit component is used for displaying a corresponding element to be displayed. After the unit content display area is determined, the grid size information can be determined according to the size related information of the target cover picture element and the target file element, and then the unit content display area in the page is divided into a plurality of grids according to the determined grid size information, namely, the display unit components and the grids have corresponding relations.
Step S103: and rendering the elements to be displayed in each grid according to the target display style.
In the step, the elements to be displayed of the current page are obtained from the server, the corresponding relation between the grids and the elements to be displayed is determined, the layout information such as the position of the unit content display area of each display unit assembly in the page is determined according to the target display style, and the content rendering is performed on each grid in the unit content display area according to the elements to be displayed corresponding to each grid. Generally, there may be a plurality of elements to be presented, and the number of the elements to be presented may be determined according to the screen width of the user terminal or the page width of the browser currently used by the user. One element to be shown can be usually rendered through one grid, and for the element to be shown which needs to be highlighted, for example, the element to be shown is shown by using a larger area, so that one element to be shown can be rendered through a plurality of grids.
According to the page self-adaptive display method provided by the embodiment of the application, the target display style corresponding to the resolution data is determined by detecting the resolution data of the page; dividing a unit content display area in a page into a plurality of grids according to the resolution data and the grid size information; and rendering the elements to be displayed in each grid according to the target display style. According to the method, the resolution data of the page is detected, the target display style which is currently adapted to the page is determined according to the detected resolution data, so that the page can be adaptively arranged and displayed, a user can obtain a better page display effect under user terminals with different resolutions and page windows with different sizes, and the page browsing experience of the user is effectively improved.
Fig. 2a shows a schematic flow chart of a page adaptive display method according to another embodiment of the present application, and as shown in fig. 2a, the method includes the following steps 201 to 206:
step S201: and detecting resolution data of the page, and searching a target display style corresponding to the resolution data from a plurality of preset page display styles included in the configuration file according to the resolution data.
Specifically, preset page display styles corresponding to a plurality of resolution ranges are recorded in the configuration file.
In an optional implementation, step S201 further includes: matching the resolution data with a plurality of resolution ranges, and taking the resolution range which the resolution data conforms to as a target resolution range; and taking a preset page display style corresponding to the target resolution range in the configuration file as a target display style.
In the step, the self-adaptive rule can be preset and written into the configuration file through the code; the configuration file is a static configuration file, and can be input into the server in advance for calling. Specifically, the adaptive rule may define different preset page display styles configured in different resolution ranges; for example, a plurality of resolution threshold ranges may be preset, where one threshold range corresponds to one resolution range, and each threshold range corresponds to a preset page display style.
It should be noted that, in this embodiment, the resolution data of the page refers to data such as the width and the pixel ratio of a page window currently accessed by the user, and specifically, if the page is displayed in a full screen of the user terminal, the resolution data of the page may include screen resolution data of the user terminal; if the page is presented using a browser, the resolution data for the page may include resolution data for a browser window. For the same size screen, when the screen resolution is low (e.g., 640 × 480), there are few pixels displayed on the screen, and the size of a single pixel is large; wherein 640 is the screen height, and 480 is the screen width; when the screen resolution is high (for example, 1600 × 1200), a large number of pixels are displayed on the screen, and the size of a single pixel is small.
In an alternative embodiment, the preset page display style at least comprises: the display method comprises the steps of displaying each display unit component included in a page, the row number and the column number of elements to be displayed in each display unit component, the display unit spacing between adjacent display unit components, the edge distance (such as the left edge distance and the right edge distance) between each display unit component and the side of the page, the aspect ratio of grids, each function control included in the page and the display position of each function control.
It should be noted that the data of each display unit component included in the page corresponding to each preset page display style, the number of rows and columns of the elements to be displayed in each display unit component, the display unit spacing between adjacent display unit components, the edge distance between a display unit component and the edge side of the page, the grid aspect ratio, each function control included in the page, and the display position of each function control, etc. are fixed data, and may be written into the configuration file in advance.
Specifically, the resolution range may be a screen width range, and fig. 2b to 2f are schematic diagrams of a plurality of preset page display styles, as shown in fig. 2b to 2f, which respectively include: the display device comprises a preset page display pattern corresponding to 2200-2560 pixels in resolution range, a preset page display pattern corresponding to 1700-2200 pixels in resolution range, a preset page display pattern corresponding to 1366-1700 pixels in resolution range, a preset page display pattern corresponding to 1100-1366 pixels in resolution range and a preset page display pattern corresponding to 1100 pixels in resolution range. Taking the preset page display style corresponding to the 2200-2560 pixels in the resolution range as an example, the preset page display style at least comprises: the display device comprises a plurality of display unit assemblies included in a page, a plurality of display unit assemblies, a display unit interval, an edge distance between each display unit assembly and the side of the page (namely, the page edge distance) and a grid aspect ratio (not shown in the figure), each function control included in the page, a display position of each function control and the like, wherein the row number and the column number (not shown in the figure) of elements to be displayed in each display unit assembly are displayed; the function controls can comprise channel selection controls such as animations, comprehensive art, science and technology, automobiles, food, sports, life and the like.
It should be noted that fig. 2b shows preset page display patterns of different screen width ranges in the resolution data, and the screen height is not limited in the resolution data of 2200-2560 pixels, 1700-2200 pixels, 1366-1700 pixels, 1100-1366 pixels and less than or equal to 1100 pixels; the screen width refers to the number of pixel points in the transverse direction of the screen.
Step S202: and dividing the unit content display area in the page into a plurality of grids according to the resolution data and the grid size information.
Specifically, taking a page as a recommended page for recommending an object such as a video, a book, or the like as an example, grid size information may be determined based on a target cover picture element and a target case element, the grid size information including: grid height and grid width; in the step, dividing a unit content display area in the page into a plurality of grids according to resolution data of the page, target cover picture elements and target pattern elements; taking the preset page display style corresponding to the resolution range of 2200-2560 pixels in fig. 2b as an example, the unit content display area corresponding to each display unit in the page can be divided into a plurality of grids according to the target cover picture element and the target document element.
Optionally, in order to reasonably display the page according to different resolution data and achieve adaptive adjustment of the page to improve user browsing experience, when the grid is divided, the space between the rows and the columns of the elements to be displayed, which are displayed in each display unit component, is also used as a unit content display area to participate in grid division.
In an alternative embodiment, step S202 further includes: acquiring a target cover picture element and a target file element; determining the height of the grid according to the width of the target cover picture element, the width-height ratio of the target cover picture element and the height of the target pattern element; determining the grid width according to the width of the picture element of the target cover; and dividing the unit content display area in the page according to the resolution data, the height of the grids and the width of the grids to obtain a plurality of grids.
Specifically, a target cover picture element and a target document element are acquired as a reference for the grid division, the sizes of the target cover picture element and the target document element being set in advance, and then the grid height may be determined according to the width of the target cover picture element, the aspect ratio of the target cover picture element, and the height of the target document element, and specifically, the grid height may be determined by the following formula:
grid height = width of target cover picture element/aspect ratio of target cover picture element + height of target case element;
the aspect ratio of the target cover picture element refers to a ratio of the width to the height of the target cover picture element, and the aspect ratio of the target cover picture element can be determined according to the configuration file.
It should be particularly noted that the width of the unit content display area may be determined by subtracting the left and right margins between the display unit components recorded in the corresponding target display style and the sides of the page from the resolution data of the page, and the grid is dynamically divided according to the determined width, height and width of the unit content display area; the height of the unit content display area can be dynamically determined according to the number of rows and columns of the elements to be displayed in the display unit assembly.
Step S203: and determining the display position of the unit content display area corresponding to each display unit component in the page according to the target display style.
In this step, the display position of each display unit component is determined according to the selected target display style, taking the preset page display style corresponding to the resolution range 2200-2560 in fig. 2b as an example, if the preset page display style is taken as the target display style, the display position of each display unit component in the page needs to be determined according to the style shown in fig. 2b, so as to make the page layout reasonable.
Step S204: and rendering the elements to be displayed in each grid corresponding to each display unit component.
In an alternative embodiment, step S204 further includes the following steps 1-3:
step 1: and aiming at each display unit component, obtaining the elements to be displayed corresponding to the display unit component, and determining the grids corresponding to each element to be displayed.
In an alternative embodiment, step 1 further comprises: acquiring a preset number of elements to be displayed corresponding to the display unit component from a server; wherein the preset number is determined according to the screen width of the user terminal. For example, the preset number may be the number of elements to be displayed which can be displayed at most by the display unit assembly under the screen width of the user terminal, that is, the maximum number of elements to be displayed.
In step 1, a preset number of elements to be displayed corresponding to the display unit component are obtained from the server, and if the screen width of the user terminal is 2560 pixels, a corresponding number of elements to be displayed are obtained according to the screen width.
The number of the grids corresponding to a single element to be displayed can be one or more.
Specifically, for different elements to be displayed, the rendering may be performed through one or more grids, for example, in order to highlight a certain element to be displayed, the size of a cover picture element in the element to be displayed is larger than the size of cover picture elements in other elements to be displayed, the element is typically displayed in a display unit assembly at the top of a screen, the display unit assembly is divided into multiple grids, and then the cover picture element in the element to be displayed may be rendered through at least two grids (for example, 4 grids) so as to make the cover picture of the element to be displayed more conspicuous, thereby attracting the user to view. Fig. 2g shows a schematic view of the grid division of one of the display unit assemblies according to another embodiment of the present application, and as shown in fig. 2g, the left 4 grids are filled with the cover picture element and the document element of the element 1 to be displayed, and each of the other grids is filled with the cover picture element and the document element of one element to be displayed (in turn, the element 2 to the element 7 to be displayed).
Step 2: and determining the grid rendering width and the grid rendering height according to the grid width, the grid width-height ratio in the target display pattern and the grid number of the grid corresponding to each element to be displayed.
The grid aspect ratio is determined from the configuration file, i.e. the grid aspect ratio is a fixed value and can be retrieved directly from the configuration file. For an element to be presented corresponding to one grid, the grid rendering width may be 100% of the width of the entire grid, i.e. grid rendering width = grid width; for elements to be presented corresponding to a plurality of grids, the grid rendering width may be a total width of the plurality of grids in the lateral direction; the grid rendering height is calculated according to the rendering width and the grid aspect ratio, i.e. grid rendering height = rendering width/grid aspect ratio.
And step 3: and zooming the to-be-displayed element according to the grid rendering width and the grid rendering height, and rendering the zoomed to-be-displayed element in the grid corresponding to the to-be-displayed element.
Processing the elements to be displayed based on the grid rendering width and the grid rendering height calculated in the step 2 to obtain the elements to be displayed which are finally rendered in the grid; the cover picture elements in the elements to be displayed downloaded at the server are generally original pictures, so that the elements to be displayed are generally processed in an equal scaling mode; and after the elements to be displayed are subjected to scaling processing, rendering the elements to be displayed after the scaling processing in the grids corresponding to the elements to be displayed.
It should be noted that the rendering method of raster data may include methods such as stretching, three primary colors (RGB) synthesis, a classification renderer, and a unique value renderer, and in this embodiment, a method for rendering an element to be displayed may be selected according to actual requirements, and this embodiment does not limit a specific manner.
Step S205: and in response to the display scale reduction operation executed by the user for the page, determining the rendering boundary range after the page display scale reduction.
In some special scenarios, a user may adjust a display scale of a client or a browser, so that a current page also needs to be adaptively adjusted, for example: the width of the user terminal screen is 2560 pixels, and actually, 7 elements to be displayed can be displayed in one line according to the configuration file; if the user executes the display scale reduction operation, namely, the page window is zoomed, the display area of the page becomes smaller, so that the width of the content display area of the page becomes 1000 pixels, and only 3 elements to be displayed can be displayed in one line; similarly, the user then performs a display scale enlargement operation, that is, enlarges the page window, so that the display area of the page content becomes large, and one line can display 6 elements to be displayed; for such a situation, in order to prevent the user from frequently requesting the server to acquire the elements to be displayed, the server may request the maximum amount of the elements to be displayed corresponding to the resolution data of the current user terminal in advance at one time, and render the elements to be displayed based on the maximum amount of the elements to be displayed first.
And if the display scale reduction operation executed by the user aiming at the page is received after the rendering, responding to the display scale reduction operation executed by the user aiming at the page, and determining the rendering boundary range after the page display scale reduction.
Step S206: and displaying the elements to be displayed within the rendering boundary range in the page, and hiding the elements to be displayed outside the rendering boundary range.
In the step, the elements to be displayed are selected for displaying according to the current rendering boundary range; for example, if the user performs a display scaling operation, only the first N elements to be displayed may be displayed, and the elements to be displayed located outside the rendering boundary range may be hidden; if the user executes the display scale enlarging operation after the display scale reducing operation, the quantity of the elements to be displayed can be determined according to the enlarging scale, and the hidden elements to be displayed are restored to be displayed.
According to the page self-adaptive display method provided by the embodiment of the application, the resolution data of the page is detected, and the target display style currently adapted to the page is determined according to the detected resolution data, so that the page can be self-adaptively arranged and displayed, a user can obtain a better page display effect under user terminals with different resolutions and page windows with different sizes, and the page browsing experience of the user is effectively improved; configuring different preset page display styles under different resolution ranges as self-adaptive rules by defining; writing the self-adaptive rule into a configuration file input server for calling, after detecting the resolution data of the current page, quickly acquiring a corresponding target display style, and reasonably displaying the page according to different resolution data; and the display scale reduction operation executed by the user aiming at the page can be responded, only the elements to be displayed which are positioned in the rendering boundary range are displayed in the page, and the elements to be displayed which are positioned outside the rendering boundary range are hidden, so that better page display can be quickly and conveniently obtained under the condition of executing page scaling or expansion.
Fig. 3 is a block diagram illustrating a structure of a page adaptive presentation apparatus according to an embodiment of the present application, and as shown in fig. 3, the apparatus includes a detection module 301, a grid division module 302, and a rendering module 303.
The detecting module 301 is configured to detect resolution data of a page, and determine a target display style corresponding to the resolution data.
In an alternative embodiment, the detection module 301 is further configured to: and searching a target display style corresponding to the resolution data from a plurality of preset page display styles included in the configuration file according to the resolution data.
In an optional implementation manner, preset page display styles corresponding to a plurality of resolution ranges are recorded in a configuration file; the detection module 301 is further configured to: matching the resolution data with a plurality of resolution ranges, and taking the resolution range which the resolution data conforms to as a target resolution range; and taking a preset page display style corresponding to the target resolution range in the configuration file as a target display style.
In an optional embodiment, the preset page display style at least comprises: the display unit comprises display unit assemblies included in a page, the number of rows and columns of elements to be displayed, which are displayed in each display unit assembly, the display unit spacing between adjacent display unit assemblies, the edge distance between each display unit assembly and the side of the page, the width-to-height ratio of grids, function controls included in the page and the display positions of the function controls.
The grid dividing module 302 is configured to divide the unit content display area in the page into a plurality of grids according to the resolution data and the grid size information.
In an alternative embodiment, the grid size information includes: grid height and grid width; the grid partitioning module 302 is further configured to: acquiring a target cover picture element and a target file element; determining the height of the grid according to the width of the target cover picture element, the width-height ratio of the target cover picture element and the height of the target pattern element; determining the width of the grid according to the width of the target cover picture element; and dividing the unit content display area in the page according to the resolution data, the height of the grids and the width of the grids to obtain a plurality of grids.
And the rendering module 303 is configured to render the elements to be displayed in each grid according to the target display style.
In an alternative embodiment, rendering module 303 is further configured to: determining the display positions of unit content display areas corresponding to all display unit components in the page according to the target display style; and rendering the elements to be displayed in each grid corresponding to each display unit component.
In an alternative embodiment, rendering module 303 is further configured to: aiming at each display unit component, acquiring elements to be displayed corresponding to the display unit component, and determining grids corresponding to the elements to be displayed; determining a grid rendering width and a grid rendering height according to the grid width, the grid width-height ratio in the target display pattern and the grid number of the grid corresponding to each element to be displayed; and scaling the element to be displayed according to the grid rendering width and the grid rendering height, and rendering the scaled element to be displayed in the grid corresponding to the element to be displayed.
In an alternative embodiment, the rendering module 303 is further configured to: acquiring a preset number of elements to be displayed corresponding to the display unit component from a server; wherein the preset number is determined according to the screen width of the user terminal.
In an alternative embodiment, the number of grids corresponding to a single element to be displayed is one or more.
In an alternative embodiment, rendering module 303 is further configured to: in response to a display scale reduction operation executed by a user for a page, determining a rendering boundary range after page display scale reduction; and displaying the elements to be displayed within the rendering boundary range in the page, and hiding the elements to be displayed outside the rendering boundary range.
The descriptions of the modules refer to the corresponding descriptions in the method embodiments, and are not repeated herein.
According to the page self-adaptive display device provided by the embodiment of the application, the target display style corresponding to the resolution data is determined by detecting the resolution data of the page; dividing a unit content display area in a page into a plurality of grids according to the resolution data and the grid size information; and rendering the elements to be displayed in each grid according to the target display style. According to the device, the resolution data of the page is detected, and the target display style currently adapted to the page is determined according to the detected resolution data, so that the page can be adaptively arranged and displayed, a user can obtain a better page display effect under user terminals with different resolutions and page windows with different sizes, and the page browsing experience of the user is effectively improved.
The embodiment of the application also provides a nonvolatile computer storage medium, wherein the computer storage medium stores at least one executable instruction, and the executable instruction can execute the page self-adaptive display method in any method embodiment.
Fig. 4 is a schematic structural diagram of a computing terminal according to an embodiment of the present application, and a specific embodiment of the present application does not limit a specific implementation of the computing terminal.
As shown in fig. 4, the computing terminal may include: a processor (processor) 402, a communication Interface 404, a memory 406, and a communication bus 408.
Wherein:
the processor 402, communication interface 404, and memory 406 communicate with each other via a communication bus 408.
A communication interface 404 for communicating with network elements of other terminals, such as clients or other servers.
The processor 402 is configured to execute the program 410, and may specifically perform the relevant steps in the above-described embodiments of the page adaptive presentation method.
In particular, program 410 may include program code comprising computer operating instructions.
The processor 402 may be a central processing unit CPU, or an Application Specific Integrated Circuit ASIC (Application Specific Integrated Circuit), or one or more Integrated circuits configured to implement embodiments of the present Application. The computing terminal includes one or more processors, which may be the same type of processor, such as one or more CPUs; or may be different types of processors such as one or more CPUs and one or more ASICs.
And a memory 406 for storing a program 410. Memory 406 may comprise high-speed RAM memory, and may also include non-volatile memory (non-volatile memory), such as at least one disk memory.
The program 410 may be specifically configured to cause the processor 402 to execute a page adaptive presentation method in any of the above-described method embodiments. For specific implementation of each step in the procedure 410, reference may be made to corresponding steps and corresponding descriptions in units in the above page adaptive display embodiment, which are not described herein again. It can be clearly understood by those skilled in the art that, for convenience and simplicity of description, the specific working processes of the terminal and the module described above may refer to the corresponding process descriptions in the foregoing method embodiments, and are not described herein again.
The algorithms and displays presented herein are not inherently related to any particular computer, virtual system, or other terminal. Various general purpose systems may also be used with the teachings herein. The required structure for constructing such a system is apparent from the description above. In addition, embodiments of the present application are not directed to any particular programming language. It is appreciated that a variety of programming languages may be used to implement the teachings of the embodiments of the present application as described herein, and any descriptions of specific languages are provided above to disclose the best modes of the embodiments of the present application.
In the description provided herein, numerous specific details are set forth. It can be appreciated, however, that the embodiments of the application may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure an understanding of this description.
Similarly, it should be appreciated that in the foregoing description of exemplary embodiments of the present application, various features of the embodiments of the present application are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the disclosure and aiding in the understanding of one or more of the various inventive aspects. However, the disclosed method should not be construed to reflect the intent: that is, the claimed embodiments of the application require more features than are expressly recited in each claim. Rather, as the following claims reflect, inventive aspects lie in less than all features of a single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into this detailed description, with each claim standing on its own as a separate embodiment from the embodiments of the present application.
Those skilled in the art will appreciate that the modules in the terminal in the embodiments may be adaptively changed and disposed in one or more terminals different from the embodiments. The modules or units or components of the embodiments may be combined into one module or unit or component, and furthermore they may be divided into a plurality of sub-modules or sub-units or sub-components. All of the features disclosed in this specification (including any accompanying claims, abstract and drawings), and all of the processes or elements of any method or terminal so disclosed, may be combined in any combination, except combinations where at least some of such features and/or processes or elements are mutually exclusive. Each feature disclosed in this specification (including any accompanying claims, abstract and drawings) may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.
Furthermore, those skilled in the art will appreciate that while some embodiments described herein include some features included in other embodiments, rather than other features, combinations of features of different embodiments are meant to be within the scope of the embodiments of the application and form different embodiments. For example, in the following claims, any of the claimed embodiments may be used in any combination.
The various component embodiments of the present application may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art will appreciate that a microprocessor or Digital Signal Processor (DSP) may be used in practice to implement some or all of the functions of some or all of the components in accordance with the embodiments of the present application. Embodiments of the present application may also be embodied as terminal or device programs (e.g., computer programs and computer program products) for performing a portion or all of the methods described herein. Such programs implementing embodiments of the present application may be stored on a computer-readable medium or may be in the form of one or more signals. Such a signal may be downloaded from an internet website or provided on a carrier signal or in any other form.
It should be noted that the above-mentioned embodiments illustrate rather than limit the embodiments of the application, and that those skilled in the art will be able to design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in a claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The embodiments of the application can be implemented by means of hardware comprising several distinct elements, and by means of a suitably programmed computer. In the unit claims enumerating several means, several of these means can be embodied by one and the same item of hardware. The usage of the words first, second and third, etcetera do not indicate any ordering. These words may be interpreted as names.
Claims (13)
1. A page self-adaptive display method comprises the following steps:
detecting resolution data of a page, and determining a target display style corresponding to the resolution data;
dividing a unit content display area in the page into a plurality of grids according to the resolution data and the grid size information;
and rendering the elements to be displayed in each grid according to the target display style.
2. The method of claim 1, wherein the determining the target display style to which the resolution data corresponds further comprises:
and searching a target display style corresponding to the resolution data from a plurality of preset page display styles included in the configuration file according to the resolution data.
3. The method according to claim 2, wherein preset page display styles corresponding to a plurality of resolution ranges are recorded in the configuration file;
the searching for the target display style corresponding to the resolution data from the plurality of preset page display styles included in the configuration file according to the resolution data further includes:
matching the resolution data with a plurality of resolution ranges, and taking the resolution range which the resolution data conforms to as a target resolution range;
and taking a preset page display style corresponding to the target resolution range in the configuration file as a target display style.
4. The method of claim 3, wherein the preset page display style comprises at least: the display method comprises the steps of displaying each display unit component included in a page, the row number and the column number of elements to be displayed in each display unit component, the display unit spacing between adjacent display unit components, the edge distance between each display unit component and the edge side of the page, the grid width-height ratio, each function control included in the page and the display position of each function control.
5. The method of any of claims 1-4, the grid size information comprising: grid height and grid width;
said dividing the unit content display area in the page into a plurality of grids further comprises, according to the resolution data and grid size information:
acquiring a target cover picture element and a target file element;
determining the height of the grid according to the width of the target cover picture element, the width-height ratio of the target cover picture element and the height of the target pattern element;
determining the grid width according to the width of the target cover picture element;
and dividing the unit content display area in the page according to the resolution data, the grid height and the grid width to obtain a plurality of grids.
6. The method according to any one of claims 1-5, wherein the rendering the elements to be presented in each grid according to the target display style further comprises:
determining the display positions of unit content display areas corresponding to all display unit components in the page according to the target display style;
and rendering the elements to be displayed in each grid corresponding to each display unit component.
7. The method of claim 6, wherein said rendering said element to be presented in a respective grid corresponding to each presentation unit assembly further comprises:
aiming at each display unit component, acquiring elements to be displayed corresponding to the display unit component, and determining grids corresponding to the elements to be displayed;
for each element to be displayed, determining a grid rendering width and a grid rendering height according to the grid width, the grid width-height ratio in the target display pattern and the grid number of the grid corresponding to the element to be displayed;
and zooming the to-be-displayed element according to the grid rendering width and the grid rendering height, and rendering the zoomed to-be-displayed element in the grid corresponding to the to-be-displayed element.
8. The method of claim 7, wherein the obtaining the element to be displayed corresponding to the display unit component further comprises:
acquiring a preset number of elements to be displayed corresponding to the display unit component from a server; wherein the preset number is determined according to the screen width of the user terminal.
9. The method of claim 7, wherein the number of grids corresponding to a single element to be displayed is one or more.
10. The method according to any one of claims 1-9, wherein after said rendering the elements to be presented in each grid in the target display style, the method further comprises:
responding to a display scale reduction operation executed by a user aiming at the page, and determining a rendering boundary range after page display scale reduction;
and displaying the elements to be displayed within the rendering boundary range in the page, and hiding the elements to be displayed outside the rendering boundary range.
11. A page adaptive display device, comprising:
the system comprises a detection module, a display module and a display module, wherein the detection module is used for detecting resolution data of a page and determining a target display style corresponding to the resolution data;
the grid dividing module is used for dividing the unit content display area in the page into a plurality of grids according to the resolution data and the grid size information;
and the rendering module is used for rendering the elements to be displayed in each grid according to the target display style.
12. A computing terminal, comprising: the system comprises a processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface are communicated with each other through the communication bus;
the memory is used for storing at least one executable instruction which causes the processor to execute the corresponding operation of the page adaptive display method according to any one of claims 1-10.
13. A computer storage medium having at least one executable instruction stored therein, the executable instruction causing a processor to perform operations corresponding to a method for adaptive presentation of pages as claimed in any one of claims 1-10.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210868599.5A CN115237522A (en) | 2022-07-22 | 2022-07-22 | Page self-adaptive display method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210868599.5A CN115237522A (en) | 2022-07-22 | 2022-07-22 | Page self-adaptive display method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115237522A true CN115237522A (en) | 2022-10-25 |
Family
ID=83674560
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210868599.5A Pending CN115237522A (en) | 2022-07-22 | 2022-07-22 | Page self-adaptive display method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115237522A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116719597A (en) * | 2023-08-10 | 2023-09-08 | 北京冠群信息技术股份有限公司 | Self-adaptive view rendering method and creation method based on grid layout |
| CN116796086A (en) * | 2023-05-05 | 2023-09-22 | 北京路浩知识产权集团有限公司 | Page display method, device, equipment and storage medium |
| CN117111813A (en) * | 2023-10-19 | 2023-11-24 | 深圳市慧为智能科技股份有限公司 | Display adaptation method and device, electronic equipment and storage medium |
-
2022
- 2022-07-22 CN CN202210868599.5A patent/CN115237522A/en active Pending
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116796086A (en) * | 2023-05-05 | 2023-09-22 | 北京路浩知识产权集团有限公司 | Page display method, device, equipment and storage medium |
| CN116796086B (en) * | 2023-05-05 | 2023-11-14 | 北京路浩知识产权集团有限公司 | Page display method, device, equipment and storage medium |
| CN116719597A (en) * | 2023-08-10 | 2023-09-08 | 北京冠群信息技术股份有限公司 | Self-adaptive view rendering method and creation method based on grid layout |
| CN116719597B (en) * | 2023-08-10 | 2024-01-26 | 北京冠群信息技术股份有限公司 | Self-adaptive view rendering method and creation method based on grid layout |
| CN117111813A (en) * | 2023-10-19 | 2023-11-24 | 深圳市慧为智能科技股份有限公司 | Display adaptation method and device, electronic equipment and storage medium |
| CN117111813B (en) * | 2023-10-19 | 2024-02-20 | 深圳市慧为智能科技股份有限公司 | Display adaptation method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109783181B (en) | Screen adaptive display method, electronic device and computer storage medium | |
| CN115237522A (en) | Page self-adaptive display method and device | |
| CN110377264B (en) | Layer synthesis method, device, electronic equipment and storage medium | |
| CN112433657B (en) | Electronic book simulation page turning method, electronic equipment and computer storage medium | |
| CN111179862B (en) | Refreshing method of display page, reader and computer storage medium | |
| WO2021248705A1 (en) | Image rendering method and apparatus, computer program and readable medium | |
| CN113010252B (en) | Application page display method, electronic equipment and storage medium | |
| CN109375972B (en) | Method, apparatus, computer device and storage medium for multi-element layout | |
| CN111522492B (en) | Picture sliding display method, terminal and computer storage medium | |
| CN114579223B (en) | Interface layout method, electronic device and computer readable storage medium | |
| CN112433796B (en) | Electronic book simulation page turning method, electronic equipment and computer storage medium | |
| CN113538502A (en) | Picture clipping method and device, electronic equipment and storage medium | |
| CN111476852A (en) | Reader refresh method, computing device, and computer storage medium | |
| CN110502205A (en) | Picture showing edge processing method, device, electronic equipment and readable storage medium storing program for executing | |
| CN112433795A (en) | Electronic book simulation page turning method, electronic equipment and computer storage medium | |
| CN105389308B (en) | Webpage display processing method and device | |
| CN111477183A (en) | Reader refresh method, computing device, and computer storage medium | |
| JP6339550B2 (en) | Terminal program, terminal device, and terminal control method | |
| US9594955B2 (en) | Modified wallis filter for improving the local contrast of GIS related images | |
| CN110825989B (en) | Picture display method and device, electronic equipment and readable medium | |
| CN114968002A (en) | Image generation method and device, computer-readable storage medium and electronic device | |
| US9384412B2 (en) | Method and apparatus, computer-readable medium for content aware multimedia resizing | |
| CN115033226A (en) | Page display method and device, terminal equipment and computer readable storage medium | |
| CN112286603A (en) | Table display method and device, electronic equipment and storage medium | |
| CN107357938B (en) | Webpage display method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |