CN118963873A - Data display method, device, equipment and storage medium based on screen adaptation - Google Patents
Data display method, device, equipment and storage medium based on screen adaptation Download PDFInfo
- Publication number
- CN118963873A CN118963873A CN202410758162.5A CN202410758162A CN118963873A CN 118963873 A CN118963873 A CN 118963873A CN 202410758162 A CN202410758162 A CN 202410758162A CN 118963873 A CN118963873 A CN 118963873A
- Authority
- CN
- China
- Prior art keywords
- data
- rendering
- page
- target
- target page
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; 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
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
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)
- Processing Or Creating Images (AREA)
Abstract
本发明实施例公开了一种基于屏幕适配的数据展示方法、装置、设备及存储介质，方法包括：获取目标页面的分辨率数据和页面属性数据，根据分辨率数据将所述目标页面划分为不同区域，得到待渲染区域，并根据页面属性数据和预设渲染规则判断针对所述目标页面的渲染类型；按照渲染类型和待展示数据对所述待渲染区域进行渲染，以将所述待展示数据在所述目标页面上进行展示。通过将多种渲染方式和一组待展示数据结合到一起，根据不同分辨率灵活选择页面布局，根据页面属性数据选择不同的渲染方式对待展示数据进行处理，无需为每种分辨率的屏幕都设置单独的一套代码，无需多套代码就可以实现屏幕适配提高屏幕适配灵活性，节省了屏幕适配的研发成本。
The embodiment of the present invention discloses a data display method, device, equipment and storage medium based on screen adaptation, the method comprising: obtaining resolution data and page attribute data of a target page, dividing the target page into different areas according to the resolution data, obtaining an area to be rendered, and judging the rendering type for the target page according to the page attribute data and preset rendering rules; rendering the area to be rendered according to the rendering type and the data to be displayed, so as to display the data to be displayed on the target page. By combining a plurality of rendering methods and a group of data to be displayed, flexibly selecting a page layout according to different resolutions, and selecting different rendering methods to process the data to be displayed according to the page attribute data, there is no need to set a separate set of codes for each screen resolution, and screen adaptation can be achieved without multiple sets of codes, thereby improving the flexibility of screen adaptation and saving the research and development cost of screen adaptation.
Description
Technical Field
The present invention relates to the field of data display technologies, and in particular, to a data display method, device, equipment and storage medium based on screen adaptation.
Background
With the development of computer technology, the types of pages in browser pages are increasing, the design draft sizes of the pages are different, and common design draft sizes are 640px (pixels), 750px (pixels) and the like. In addition, the types of terminals capable of browsing pages are increasing, and different types of terminals typically have different operating systems and screen sizes, with typical screen sizes being 320px (pixels), 375px (pixels), 414px (pixels), and so on. When the content of the same page is displayed on a browser page with a screen size, a plurality of sets of codes are needed to be created in the prior art, namely, each browser page with different resolutions is matched with one set of codes, so that a technician is required to develop a plurality of sets of page codes, and meanwhile, when data to be displayed is modified, the plurality of sets of codes are required to be synchronously modified, so that the maintenance is inconvenient, and the page development efficiency and the maintenance efficiency are lower.
Disclosure of Invention
In view of the above, the present invention provides a data display method, apparatus, device and storage medium based on screen adaptation, which are used for solving the problem of low page development efficiency and maintenance efficiency in the prior art.
In a first aspect, an embodiment of the present invention provides a data display method based on screen adaptation, where the method includes:
Obtaining resolution data and page attribute data of a target page, dividing the target page into different areas according to the resolution data to obtain an area to be rendered, and judging the rendering type aiming at the target page according to the page attribute data and a preset rendering rule;
And rendering the region to be rendered according to the rendering type and the data to be displayed so as to display the data to be displayed on the target page.
Optionally, the step of acquiring the resolution data and the page attribute data of the target page includes:
taking a page of a target browser on data display equipment as a target page, and acquiring the resolution of the target browser as resolution data of the target page;
Determining the page type of the target browser based on the resolution data and a preset classification rule;
and taking the page type as the page attribute data.
Optionally, the step of dividing the target page into different areas according to the resolution data to obtain an area to be rendered includes:
dividing the target page into a first area containing a first preset number of continuous grids based on the resolution data through a grid system;
and selecting a second preset number of continuous grids from the first area as the area to be rendered.
Optionally, before the step of rendering the region to be rendered according to the rendering type and the data to be presented, the method further includes:
Searching whether page design data sets aiming at data with different resolutions exist in a preset database;
If page design data sets aiming at different resolution data exist, determining page design data corresponding to the target page in the page design data sets as target page design data;
and acquiring a first layout parameter and first content data based on the target page design data, and taking the first layout parameter and the first content data together as the data to be displayed.
Optionally, before the step of rendering the region to be rendered according to the rendering type and the data to be presented, the method further includes:
if the page design data set aiming at the data with different resolutions does not exist, annotating each area to be rendered according to a marking method in a preset layout rule, and recording annotating information of each area to be rendered and the quantity data of the areas to be rendered;
Determining second content data corresponding to each region to be rendered according to the annotation information;
Determining a second layout parameter for the target page according to the layout method in the layout rule and the quantity data;
and taking the second layout parameters and the second content data together as the data to be displayed.
Optionally, before the step of rendering the region to be rendered according to the rendering type and the data to be presented, the method further includes:
acquiring the number of the target pages;
If the number of the target pages is smaller than a threshold value, continuing to execute the step of rendering the region to be rendered according to the rendering type and the data to be displayed;
If the number of the target pages is greater than or equal to the threshold value, judging whether the resolution data of each target page are in the same preset interval;
when the resolution data of each target page are in the same preset interval, rendering the region to be rendered of each target page according to the rendering type and the data to be displayed;
When the resolution data of each target page is not in the same preset interval, acquiring user request information, and determining a target rendering type of each target page based on the user request information, wherein the target rendering type is used for rendering the region to be rendered according to the target rendering type and the data to be displayed.
Optionally, the step of acquiring user request information and determining a target rendering type of each target page based on the user request information includes:
acquiring a rendering scheme in the user request information;
judging the type of the rendering scheme according to the number of rendering types contained in the rendering scheme;
If the number of the rendering types contained in the rendering scheme is 1, determining that the rendering scheme is a first scheme, and taking the rendering types contained in the rendering scheme as target rendering types of all target pages;
And if the number of the rendering types contained in the rendering scheme is not 1, taking each rendering type contained in the rendering scheme as the target rendering type.
In a second aspect, an embodiment of the present invention further provides a data display apparatus based on screen adaptation, where the apparatus includes:
The data acquisition module is used for acquiring resolution data and page attribute data of a target page, dividing the target page into different areas according to the resolution data to obtain an area to be rendered, and judging the rendering type aiming at the target page according to the page attribute data and a preset rendering rule;
And the rendering module is used for rendering the region to be rendered according to the rendering type and the data to be displayed so as to display the data to be displayed on the target page.
In a third aspect, an embodiment of the present invention further provides an electronic device, including:
One or more processors;
A storage means for storing one or more programs;
The one or more programs, when executed by the one or more processors, cause the one or more processors to implement a screen adaptation based data presentation method as in any of the embodiments of the present invention.
In a fourth aspect, embodiments of the present invention also provide a storage medium containing computer executable instructions which, when executed by a computer processor, are used to perform a screen adaptation based data presentation method as in any of the embodiments of the present invention.
According to the technical scheme, the resolution data and the page attribute data of the target page are obtained, the target page is divided into different areas according to the resolution data, the area to be rendered is obtained, and the rendering type aiming at the target page is judged according to the page attribute data and a preset rendering rule; and rendering the region to be rendered according to the rendering type and the data to be displayed so as to display the data to be displayed on the target page. By combining multiple rendering modes with a group of data to be displayed, page layout is flexibly selected according to different resolutions, the data to be displayed is processed according to page attribute data, a separate set of codes is not required to be set for each resolution screen, screen adaptation can be realized without multiple sets of codes, flexibility of the screen adaptation is improved, development cost of the screen adaptation is saved, and meanwhile, when the data to be displayed needs to be modified, only one set of codes is modified, and page maintenance efficiency is obviously improved.
Drawings
In order to more clearly illustrate the embodiments of the invention or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described, it being obvious that the drawings in the following description are only some embodiments of the invention, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
Wherein:
FIG. 1 is a flow chart of a data presentation method based on screen adaptation in one embodiment;
FIG. 2 is an effect diagram of page partitioning in one embodiment;
FIG. 3 is a schematic diagram of a data display device based on screen adaptation according to an embodiment;
Fig. 4 is a schematic structural diagram of an electronic device according to an embodiment of the present application;
fig. 5 is a schematic structural diagram of a storage medium according to an embodiment of the present application.
Detailed Description
The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
Before describing the technical scheme of the embodiment of the present invention, first, an application scenario of the embodiment of the present invention is described in an exemplary manner:
under the training scene, the training data are regarded as the data to be displayed, and because the training scene often needs to put the training data on browser pages with different resolutions, screen adaptation processing is needed, so that the sharing of the training data is completed on the browser pages with different resolutions.
In an office scenario, different office data are often required to be shared and reported, so that the office data are required to be displayed on browser pages with different resolutions, and at this time, the office data are used as data to be displayed.
Because different page layouts, page parameters and the like are needed for browser pages with different resolutions, a plurality of sets of codes are often constructed for the browser pages with different resolutions, but the research and development of the plurality of sets of codes require a great deal of time cost and labor cost, so that the efficiency of page research and development and maintenance is low.
When a server is used as an execution main body to execute a data display method based on screen adaptation, the server acquires resolution data and page attribute data of a target page, divides the target page into different areas according to the resolution data to obtain an area to be rendered, and judges the rendering type aiming at the target page according to the page attribute data and a preset rendering rule; and rendering the region to be rendered according to the rendering type and the data to be displayed to obtain rendered page data, and sending the rendered page data to display equipment corresponding to the target page so as to display the data to be displayed on the target page through the display equipment.
When a client (electronic equipment with a display function) is used as an execution main body to perform a data display method based on screen adaptation, the client acquires resolution data and page attribute data of a target page, divides the target page into different areas according to the resolution data to obtain an area to be rendered, and judges the rendering type aiming at the target page according to the page attribute data and a preset rendering rule; and the client receives the data to be displayed sent by the server, and renders the area to be rendered according to the rendering type and the data to be displayed so as to display the data to be displayed on the target page.
In view of the above, an embodiment of the present invention provides a data display method based on screen adaptation, by acquiring resolution data and page attribute data of a target page, dividing the target page into different areas according to the resolution data, obtaining an area to be rendered, and determining a rendering type for the target page according to the page attribute data and a preset rendering rule; and rendering the region to be rendered according to the rendering type and the data to be displayed so as to display the data to be displayed on the target page. By combining multiple rendering modes with a group of data to be displayed, page layout is flexibly selected according to different resolutions, the data to be displayed is processed according to page attribute data, a separate set of codes is not required to be set for each resolution screen, screen adaptation can be realized without multiple sets of codes, flexibility of the screen adaptation is improved, development cost of the screen adaptation is saved, and meanwhile, when the data to be displayed needs to be modified, only one set of codes is modified, and page maintenance efficiency is obviously improved.
In an embodiment, the invention provides a data display method based on screen adaptation, which is suitable for displaying data by adopting pages with different resolutions under different scenes, the data display method based on the screen adaptation can be executed through the data display device based on the screen adaptation. The screen-adaptation based data presentation means may be implemented in software and/or hardware.
As shown in fig. 1, the data display method based on screen adaptation in the embodiment of the present invention specifically includes the following steps:
s110, acquiring resolution data and page attribute data of a target page, dividing the target page into different areas according to the resolution data to obtain an area to be rendered, and judging the rendering type aiming at the target page according to the page attribute data and a preset rendering rule;
The target page is a browser page, the page attribute data is data for representing page characteristics, for example, a page type, and specifically, when the page attribute data is a page type, the preset rendering rule includes different page types and rendering types corresponding to the page types, and the rendering types are one of a response type and a scaling type.
Illustratively, the step of obtaining the resolution data and the page attribute data of the target page includes:
taking a page of a target browser on data display equipment as a target page, and acquiring the resolution of the target browser as resolution data of the target page;
Determining the page type of the target browser based on the resolution data and a preset classification rule;
and taking the page type as the page attribute data.
For example, the resolution of the device for data presentation is different from the resolution data of the target page, in brief, the resolution of the device for data presentation is fixed, for example, the resolution of the display screen of the same mobile phone does not change, while the target page is a display page in the display screen, and changes along with different display forms, for example, the maximized target page and the restored target page, so the resolution data of the target page is more flexible.
For example, there are different forms of target pages on different screens, for example, on large screen devices such as televisions and computer displays, and the target pages also have low resolution, so that the page of the target browser on the device for data display is used as the target page, the resolution of the target browser is acquired more accurately, and the page type of the target browser is determined more accurately.
For example, the preset classification rule may divide the resolution from 375w to 1920w (w is a resolution unit, ten thousand) into multiple sections of different resolution intervals, and different browsers with resolutions within the different resolution intervals are used as different types of browsers.
Specifically, a browser with resolution of 768w-992w is used as one type of browser, and the rendering type of the one type of browser is zoom type rendering.
And S120, rendering the region to be rendered according to the rendering type and the data to be displayed.
The data to be displayed includes layout data for determining layout parameters, such as interval parameters, display parameters, etc., between areas to be rendered, and content data, such as training materials, office materials, etc., for specific content to be displayed.
Illustratively, when the rendering type is responsive, the data to be presented is rendered to the area to be rendered by css media query technology (technology of dynamically formatting each element of the web page and statically decorating the web page and scripting language, and also capable of precisely controlling the typesetting of the element position in the web page at the pixel level).
For example, when the rendering type is a zoom type, the data to be presented is rendered to the area to be rendered through setting an interface (api) of a preset tool (document. Body. Style. Zoom) of js (JavaScript script language).
Dividing a target page into different areas according to resolution data by acquiring the resolution data and page attribute data of the target page to obtain an area to be rendered, and judging the rendering type aiming at the target page according to the page attribute data and a preset rendering rule; and rendering the region to be rendered according to the rendering type and the data to be displayed so as to display the data to be displayed on the target page. By combining multiple rendering modes with a group of data to be displayed, page layout is flexibly selected according to different resolutions, the data to be displayed is processed according to page attribute data, a separate set of codes is not required to be set for each resolution screen, screen adaptation can be realized without multiple sets of codes, flexibility of the screen adaptation is improved, development cost of the screen adaptation is saved, and meanwhile, when the data to be displayed needs to be modified, only one set of codes is modified, and page maintenance efficiency is obviously improved.
In a possible implementation manner, the step of dividing the target page into different areas according to the resolution data to obtain an area to be rendered includes:
dividing the target page into a first area containing a first preset number of continuous grids based on the resolution data through a grid system;
and selecting a second preset number of continuous grids from the first area as the area to be rendered.
The grid system is a system for designing layout by using a fixed grid (grid), the grid is an equal-width column divided according to the width in the resolution data, for example, when dividing into 12 grids, the grid system represents 12 equal-width columns divided according to the width in the resolution data, specifically, the target page is divided into 12 (first preset number) grids according to the width in the resolution data, a first area containing 12 grids is obtained, 6 (second preset number) continuous grids are selected in the first area as the area to be rendered, and when the resolution data is greater than 1440w and less than or equal to 1920w, the page shown in fig. 2 is obtained.
For example, the second preset number may be determined according to an actual display requirement and resolution data of the target page, and in particular, the actual display requirement is used to ensure minimum display requirements for fonts and images, for example, a minimum font size and a minimum image size, and when the size of a word is smaller than the minimum font size, the word is considered to be unclear in display, and the data display effect is affected, so that the data display effect may be ensured by determining the second preset number according to the actual display requirement and the resolution data of the target page.
For example, under the same actual display requirement, the second preset number may be different when facing different resolution data, for example, the second preset number is 1 when the resolution data is less than or equal to 375w, the second preset number is 2 when the resolution data is greater than 375w and less than or equal to 768w, the second preset number is 3×75 when the resolution data is greater than 768w and less than or equal to 992w, the second preset number is 3 when the resolution data is greater than 992w and less than or equal to 1440w, the second preset number is 4 when the resolution data is greater than 1440w and less than or equal to 1920w, and the second preset number is 6 when the resolution data is greater than 1920 w.
In one possible implementation manner, before the step of rendering the region to be rendered according to the rendering type and the data to be presented, the method further includes:
Searching whether page design data sets aiming at data with different resolutions exist in a preset database;
If page design data sets aiming at different resolution data exist, determining page design data corresponding to the target page in the page design data sets as target page design data;
and acquiring a first layout parameter and first content data based on the target page design data, and taking the first layout parameter and the first content data together as the data to be displayed.
The preset database is a storage space for storing data to be displayed, and the expression form of the data to be displayed comprises a design draft form, a pure data form and the like. Aiming at the data to be displayed in different expression forms, the data to be displayed are also different in acquisition modes.
For example, when the data to be presented is in the form of a design draft, the design draft is obtained by adapting cs (cascading style sheet) media query technology by using html (hypertext markup language) layout, or scaling a page by using an interface of a document object (an object in an html file) of js (JavaScript script language), and the layout parameters and content data are included.
In one possible implementation manner, before the step of rendering the region to be rendered according to the rendering type and the data to be presented, the method further includes:
if the page design data set aiming at the data with different resolutions does not exist, annotating each area to be rendered according to a marking method in a preset layout rule, and recording annotating information of each area to be rendered and the quantity data of the areas to be rendered;
Determining second content data corresponding to each region to be rendered according to the annotation information;
Determining a second layout parameter for the target page according to the layout method in the layout rule and the quantity data;
and taking the second layout parameters and the second content data together as the data to be displayed.
For example, when the data to be displayed is in a pure data form, that is, there is no page design data set for data with different resolutions, annotating each area to be rendered according to a marking method in a preset layout rule, annotating information of the data to be displayed in each area to be rendered, for example, an area 1 in a page as shown in fig. 2 is used for displaying consumption data, and taking the "consumption data" as an annotating information annotating area 1, and then searching data conforming to the "consumption data" in the data to be displayed according to the "consumption data" as second content data.
The method comprises the steps of determining a second layout parameter aiming at the target page according to a layout method in the layout rule and the quantity data, setting each area to be rendered in the target page according to the layout method in the layout rule to obtain a plurality of layout results, selecting an optimal layout result from the plurality of layout results, and obtaining the second layout parameter of the optimal layout result.
Specifically, an optimal layout result is selected from a plurality of layout results, history layout information of a target page is obtained, a target layout scheme with the largest occurrence number is selected from the history layout information, and a layout result with the highest similarity with the target layout scheme is selected from the plurality of layout results as the optimal layout result.
In one possible implementation manner, before the step of rendering the region to be rendered according to the rendering type and the data to be presented, the method further includes:
acquiring the number of the target pages;
If the number of the target pages is smaller than a threshold value, continuing to execute the step of rendering the region to be rendered according to the rendering type and the data to be displayed;
If the number of the target pages is greater than or equal to the threshold value, judging whether the resolution data of each target page are in the same preset interval;
when the resolution data of each target page are in the same preset interval, rendering the region to be rendered of each target page according to the rendering type and the data to be displayed;
When the resolution data of each target page is not in the same preset interval, acquiring user request information, and determining a target rendering type of each target page based on the user request information, wherein the target rendering type is used for rendering the region to be rendered according to the target rendering type and the data to be displayed.
For example, in a training scene or an office scene, the situation that browser pages with different resolutions display the same data to be displayed at the same time is often caused, for example, in order to facilitate explanation of training staff, the same data to be displayed needs to be displayed on a computer and a large-screen display at the same time, at this time, the number of target pages is 2, because the resolutions of the browsers on the computer and the large-screen display are different, when the computer and the large-screen display are rendered, the rendering types are often different, and if the rendering types correspond to errors, the data display effect is seriously affected, and in order to ensure the screen adaptation effect, the scene of the multi-target pages needs to be subjected to refinement management.
If the number of the target pages is smaller than 2 (threshold value), the number of the target pages can only be a positive integer, and the target pages are considered to be 1, and the step of rendering the region to be rendered according to the rendering type and the data to be displayed can be continuously performed;
If the number of the target pages is greater than or equal to 2 (threshold), judging whether the resolution data of each target page is in the same preset interval, and when the resolution data of each target page is in the same preset interval, respectively rendering the region to be rendered of each target page according to the rendering type and the data to be displayed, for example, the two target pages with the same resolution data are consistent in rendering type, and error rendering is not generated, so that the effect of data display is not affected.
In one possible implementation manner, the step of acquiring user request information and determining the target rendering type of each target page based on the user request information includes:
acquiring a rendering scheme in the user request information;
judging the type of the rendering scheme according to the number of rendering types contained in the rendering scheme;
If the number of the rendering types contained in the rendering scheme is 1, determining that the rendering scheme is a first scheme, and taking the rendering types contained in the rendering scheme as target rendering types of all target pages;
And if the number of the rendering types contained in the rendering scheme is not 1, taking each rendering type contained in the rendering scheme as the target rendering type.
For example, in order to facilitate explanation of training staff, the same data to be displayed needs to be displayed on the computer and the large-screen display at the same time, at this time, the number of target pages is 2, and because the resolutions of the browsers on the computer and the large-screen display are different, when rendering is performed on the computer and the large-screen display, the rendering types are often different, specifically, a response type is adopted for the target pages of the large-screen display, and a scaling type is adopted for the target pages of the computer.
When the multi-target page displays the data to be displayed, the rendering types of all the target pages are judged according to the user request information of the user, for example, the number of the rendering types contained in the rendering scheme in the user request information is 1, the target pages of the display of the large screen and the target pages of the computer are rendered according to the rendering types contained in the rendering scheme, namely, the rendering types contained in the rendering scheme are of a scaling type, and the target pages of the display of the large screen and the target pages of the computer are respectively rendered according to the scaling type; and if the number of the rendering schemes in the user request information is 2, rendering the target pages of the display of the large screen by adopting a response type, and rendering the target pages of the computer by adopting a scaling type. User experience is guaranteed through combining user request information, so that rendering of the target page is more flexible.
In another embodiment of the present invention, a data display device based on screen adaptation is provided, and fig. 3 is a schematic structural diagram of the data display device based on screen adaptation provided in the embodiment of the present invention, where the data display device based on screen adaptation provided in the embodiment of the present invention may execute the data display method based on screen adaptation provided in any embodiment of the present invention, and has functional modules and beneficial effects corresponding to the execution method. The device comprises: a data acquisition module 410 and a rendering module 420; wherein:
The data acquisition module 410 is configured to acquire resolution data and page attribute data of a target page, divide the target page into different regions according to the resolution data, obtain a region to be rendered, and determine a rendering type for the target page according to the page attribute data and a preset rendering rule;
And the rendering module 420 is configured to render the region to be rendered according to the rendering type and the data to be displayed, so as to display the data to be displayed on the target page.
In one possible implementation, the data acquisition module 410 is configured to:
taking a page of a target browser on data display equipment as a target page, and acquiring the resolution of the target browser as resolution data of the target page;
Determining the page type of the target browser based on the resolution data and a preset classification rule;
and taking the page type as the page attribute data.
In one possible implementation, the data acquisition module 410 is configured to:
dividing the target page into a first area containing a first preset number of continuous grids based on the resolution data through a grid system;
and selecting a second preset number of continuous grids from the first area as the area to be rendered.
In a possible implementation manner, the rendering module 420 is configured to:
Searching whether page design data sets aiming at data with different resolutions exist in a preset database;
If page design data sets aiming at different resolution data exist, determining page design data corresponding to the target page in the page design data sets as target page design data;
and acquiring a first layout parameter and first content data based on the target page design data, and taking the first layout parameter and the first content data together as the data to be displayed.
In a possible implementation manner, the rendering module 420 is configured to:
if the page design data set aiming at the data with different resolutions does not exist, annotating each area to be rendered according to a marking method in a preset layout rule, and recording annotating information of each area to be rendered and the quantity data of the areas to be rendered;
Determining second content data corresponding to each region to be rendered according to the annotation information;
Determining a second layout parameter for the target page according to the layout method in the layout rule and the quantity data;
and taking the second layout parameters and the second content data together as the data to be displayed.
In a possible implementation manner, the rendering module 420 is configured to:
acquiring the number of the target pages;
If the number of the target pages is smaller than a threshold value, continuing to execute the step of rendering the region to be rendered according to the rendering type and the data to be displayed;
If the number of the target pages is greater than or equal to the threshold value, judging whether the resolution data of each target page are in the same preset interval;
when the resolution data of each target page are in the same preset interval, rendering the region to be rendered of each target page according to the rendering type and the data to be displayed;
When the resolution data of each target page is not in the same preset interval, acquiring user request information, and determining a target rendering type of each target page based on the user request information, wherein the target rendering type is used for rendering the region to be rendered according to the target rendering type and the data to be displayed.
In a possible implementation manner, the rendering module 420 is configured to:
acquiring a rendering scheme in the user request information;
judging the type of the rendering scheme according to the number of rendering types contained in the rendering scheme;
If the number of the rendering types contained in the rendering scheme is 1, determining that the rendering scheme is a first scheme, and taking the rendering types contained in the rendering scheme as target rendering types of all target pages;
And if the number of the rendering types contained in the rendering scheme is not 1, taking each rendering type contained in the rendering scheme as the target rendering type.
According to the technical scheme, the target page is divided into different areas according to the resolution data by acquiring the resolution data and the page attribute data of the target page, the area to be rendered is obtained, and the rendering type aiming at the target page is judged according to the page attribute data and a preset rendering rule; and rendering the region to be rendered according to the rendering type and the data to be displayed so as to display the data to be displayed on the target page. The method has the advantages that through combining multiple rendering modes with a group of data to be displayed, different rendering modes are selected according to different resolutions to process the data to be displayed, a single set of codes is not required to be set for each resolution screen, namely, the flexibility of the screen adaptation can be improved through screen adaptation without multiple sets of codes, browser pages with multiple different resolutions can be adapted only by constructing one set of codes, the page development efficiency is improved, the research and development cost of the screen adaptation is also saved, meanwhile, when the data to be displayed needs to be modified, only one set of codes is modified, and the page maintenance efficiency is obviously improved.
It should be noted that each module included in the above apparatus is only divided according to the functional logic, but not limited to the above division, so long as the corresponding function can be implemented; in addition, the specific names of the functional modules are only for convenience of distinguishing from each other, and are not used for limiting the protection scope of the embodiments of the present invention.
In another embodiment of the invention, an electronic device is also provided. Fig. 4 shows a block diagram of an exemplary electronic device 50 suitable for use in implementing the embodiments of the present invention. The electronic device 50 shown in fig. 4 is merely an example and should not be construed as limiting the functionality and scope of use of embodiments of the present invention.
As shown in fig. 4, the electronic device 50 is embodied in the form of a general purpose computing device. Components of electronic device 50 may include, but are not limited to: one or more processors or processing units 501, a system memory 502, and a bus 503 that connects the various system components (including the system memory 502 and processing units 501).
Bus 503 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processor, or a local bus using any of a variety of bus architectures. By way of example, and not limitation, such architectures include Industry Standard Architecture (ISA) bus, micro channel architecture (MAC) bus, enhanced ISA bus, video Electronics Standards Association (VESA) local bus, and Peripheral Component Interconnect (PCI) bus.
Electronic device 50 typically includes a variety of computer system readable media. Such media can be any available media that is accessible by electronic device 50 and includes both volatile and nonvolatile media, removable and non-removable media.
The system memory 502 may include computer system readable media in the form of volatile memory, such as Random Access Memory (RAM) 504 and/or cache memory 505. Electronic device 50 may further include other removable/non-removable, volatile/nonvolatile computer system storage media. By way of example only, storage system 506 may be used to read from or write to non-removable, nonvolatile magnetic media (not shown in FIG. 4, commonly referred to as a "hard disk drive"). Although not shown in fig. 4, a magnetic disk drive for reading from and writing to a removable non-volatile magnetic disk (e.g., a "floppy disk"), and an optical disk drive for reading from or writing to a removable non-volatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In such cases, each drive may be coupled to bus 503 through one or more data medium interfaces. Memory 502 may include at least one program product having a set (e.g., at least one) of program modules configured to carry out the functions of embodiments of the invention.
A program/utility 508 having a set (at least one) of program modules 507 may be stored, for example, in memory 502, such program modules 507 including, but not limited to, an operating system, one or more application programs, other program modules, and program data, each or some combination of which may include an implementation of a network environment. Program modules 507 typically perform the functions and/or methods of the described embodiments of the invention.
The electronic device 50 may also communicate with one or more external devices 509 (e.g., keyboard, pointing device, display 510, etc.), one or more devices that enable a user to interact with the electronic device 50, and/or any device (e.g., network card, modem, etc.) that enables the electronic device 50 to communicate with one or more other computing devices. Such communication may occur through an input/output (I/O) interface 511. Also, the electronic device 50 may communicate with one or more networks such as a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network, such as the Internet, through a network adapter 512. As shown, the network adapter 512 communicates with other modules of the electronic device 50 over the bus 503. It should be appreciated that although not shown in fig. 4, other hardware and/or software modules may be used in connection with electronic device 50, including, but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, data backup storage systems, and the like.
The processing unit 501 executes various functional applications and data processing by running a program stored in the system memory 502, for example, implementing a data presentation method based on screen adaptation provided by an embodiment of the present invention.
In another embodiment of the present application, there is also provided a storage medium containing computer-executable instructions, as shown in fig. 5, an embodiment of the present application provides a computer-readable storage medium 400 having stored thereon a computer program 411, the computer program 411 when executed by a processor implementing: dividing a target page into different areas according to resolution data by acquiring the resolution data and page attribute data of the target page to obtain an area to be rendered, and judging the rendering type aiming at the target page according to the page attribute data and a preset rendering rule; and rendering the region to be rendered according to the rendering type and the data to be displayed so as to display the data to be displayed on the target page.
The computer storage media of embodiments of the invention may take the form of any combination of one or more computer-readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the computer-readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
The computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.
Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
Computer program code for carrying out operations for embodiments of the present invention may be written in one or more programming languages, including an object oriented programming language such as Java, smalltalk, C ++ and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computer (for example, through the Internet using an Internet service provider).
The foregoing disclosure is illustrative of the present invention and is not to be construed as limiting the scope of the invention, which is defined by the appended claims.
Claims (10)
1. A data presentation method based on screen adaptation, comprising:
Obtaining resolution data and page attribute data of a target page, dividing the target page into different areas according to the resolution data to obtain an area to be rendered, and judging the rendering type aiming at the target page according to the page attribute data and a preset rendering rule;
And rendering the region to be rendered according to the rendering type and the data to be displayed so as to display the data to be displayed on the target page.
2. The method of claim 1, wherein the step of obtaining resolution data and page attribute data of the target page comprises:
taking a page of a target browser on data display equipment as a target page, and acquiring the resolution of the target browser as resolution data of the target page;
Determining the page type of the target browser based on the resolution data and a preset classification rule;
and taking the page type as the page attribute data.
3. The method according to claim 1, wherein the step of dividing the target page into different regions according to the resolution data to obtain the region to be rendered comprises:
dividing the target page into a first area containing a first preset number of continuous grids based on the resolution data through a grid system;
and selecting a second preset number of continuous grids from the first area as the area to be rendered.
4. The method of claim 1, further comprising, prior to the step of rendering the region to be rendered according to the rendering type and the data to be presented:
Searching whether page design data sets aiming at data with different resolutions exist in a preset database;
If page design data sets aiming at different resolution data exist, determining page design data corresponding to the target page in the page design data sets as target page design data;
and acquiring a first layout parameter and first content data based on the target page design data, and taking the first layout parameter and the first content data together as the data to be displayed.
5. The method of claim 4, further comprising, prior to the step of rendering the region to be rendered according to the rendering type and the data to be presented:
if the page design data set aiming at the data with different resolutions does not exist, annotating each area to be rendered according to a marking method in a preset layout rule, and recording annotating information of each area to be rendered and the quantity data of the areas to be rendered;
Determining second content data corresponding to each region to be rendered according to the annotation information;
Determining a second layout parameter aiming at the target page according to a layout method in the preset layout rule and the quantity data;
and taking the second layout parameters and the second content data together as the data to be displayed.
6. The method of claim 1, further comprising, prior to the step of rendering the region to be rendered according to the rendering type and the data to be presented:
acquiring the number of the target pages;
If the number of the target pages is smaller than a threshold value, continuing to execute the step of rendering the region to be rendered according to the rendering type and the data to be displayed;
If the number of the target pages is greater than or equal to the threshold value, judging whether the resolution data of each target page are in the same preset interval;
when the resolution data of each target page are in the same preset interval, rendering the region to be rendered of each target page according to the rendering type and the data to be displayed;
When the resolution data of each target page is not in the same preset interval, acquiring user request information, and determining a target rendering type of each target page based on the user request information, wherein the target rendering type is used for rendering the region to be rendered according to the target rendering type and the data to be displayed.
7. The method of claim 6, wherein the step of obtaining user request information and determining a target rendering type for each target page based on the user request information comprises:
acquiring a rendering scheme in the user request information;
judging the type of the rendering scheme according to the number of rendering types contained in the rendering scheme;
If the number of the rendering types contained in the rendering scheme is 1, determining that the rendering scheme is a first scheme, and taking the rendering types contained in the rendering scheme as target rendering types of all target pages;
And if the number of the rendering types contained in the rendering scheme is not 1, taking each rendering type contained in the rendering scheme as the target rendering type.
8. A data presentation device based on screen adaptation, the device comprising:
The data acquisition module is used for acquiring resolution data and page attribute data of a target page, dividing the target page into different areas according to the resolution data to obtain an area to be rendered, and judging the rendering type aiming at the target page according to the page attribute data and a preset rendering rule;
And the rendering module is used for rendering the region to be rendered according to the rendering type and the data to be displayed so as to display the data to be displayed on the target page.
9. An electronic device, the electronic device comprising:
One or more processors;
A storage means for storing one or more programs;
The one or more programs, when executed by the one or more processors, cause the one or more processors to implement the screen adaptation based data presentation method of any of claims 1-7.
10. A storage medium containing computer executable instructions which, when executed by a computer processor, are for performing the screen adaptation based data presentation method as claimed in any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410758162.5A CN118963873A (en) | 2024-06-13 | 2024-06-13 | Data display method, device, equipment and storage medium based on screen adaptation |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410758162.5A CN118963873A (en) | 2024-06-13 | 2024-06-13 | Data display method, device, equipment and storage medium based on screen adaptation |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN118963873A true CN118963873A (en) | 2024-11-15 |
Family
ID=93398628
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202410758162.5A Pending CN118963873A (en) | 2024-06-13 | 2024-06-13 | Data display method, device, equipment and storage medium based on screen adaptation |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN118963873A (en) |
-
2024
- 2024-06-13 CN CN202410758162.5A patent/CN118963873A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9026900B1 (en) | Invisible overlay for dynamic annotation | |
| US20070174291A1 (en) | Dynamic optimization of available display space | |
| CN108733336A (en) | page display method and device | |
| US8922582B2 (en) | Text rendering and display using composite bitmap images | |
| US20250013815A1 (en) | Electronic text generation method and apparatus, device, and medium | |
| CN111259270A (en) | Weather reminding method, equipment and computer readable medium | |
| CN111915705A (en) | Picture visual editing method, device, equipment and medium | |
| CN112800373A (en) | Webpage resource data generation method and device, computer equipment and storage medium | |
| CN113885998A (en) | Page rendering method and device, electronic equipment and storage medium | |
| CN107451163B (en) | Animation display method and device | |
| US20140223291A1 (en) | System and method for restructuring content on reorientation of a mobile device | |
| CN107506119B (en) | A picture display method, device, device and storage medium | |
| CN114296852A (en) | Method and device for displaying target page, electronic equipment and storage medium | |
| CN111563157B (en) | Thumbnail display method and device | |
| JP2016095501A (en) | Document layout for electronic display | |
| CN115659087B (en) | Page rendering method, equipment and storage medium | |
| CN118963873A (en) | Data display method, device, equipment and storage medium based on screen adaptation | |
| US20110055258A1 (en) | Method and apparatus for the page-by-page provision of an electronic document as a computer graphic | |
| CN113096217B (en) | Picture generation method and device, electronic equipment and storage medium | |
| US20180090174A1 (en) | Video generation of project revision history | |
| CN110618771B (en) | Content display method, device, terminal and storage medium | |
| CN113626120A (en) | Method and device for determining display page, electronic equipment and storage medium | |
| CN114676097A (en) | A kind of OFD file processing method, device, equipment and medium | |
| US20160342570A1 (en) | Document presentation qualified by conditions evaluated on rendering | |
| CN111083552A (en) | Thumbnail generation method, device, equipment and medium |
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 | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20241223 Address after: 518000 room 603, unit 3, building B, Kexing Science Park, Keyuan Road, high tech park, Nanshan District, Shenzhen, Guangdong Applicant after: Shenzhen Hongqida Technology Co.,Ltd. Country or region after: China Address before: G4-1504, Xi'an Huanpu Technology Industrial Park, No. 211 Tianguba Road, High tech Zone, Xi'an City, Shaanxi Province 710000 Applicant before: Hongwei (Xi'an) Data Services Co.,Ltd. Country or region before: China |
|
| TA01 | Transfer of patent application right |