CN117271921A

CN117271921A - Page processing method, device, equipment and storage medium

Info

Publication number: CN117271921A
Application number: CN202210663202.9A
Authority: CN
Inventors: 丁硕; 邹存璐; 许升
Original assignee: Qingdao Haier Washing Machine Co Ltd; Haier Smart Home Co Ltd
Current assignee: Qingdao Haier Washing Machine Co Ltd; Haier Smart Home Co Ltd
Priority date: 2022-06-13
Filing date: 2022-06-13
Publication date: 2023-12-22

Abstract

The application provides a page processing method, device, equipment and storage medium, wherein the method comprises the following steps: acquiring initial page data of an HTML page to be displayed and target resolution of a browser; the initial page data includes: the forward projection camera object, the elements of the HTML page are at the initial position of the HTML page, and the initial size, the projection range of the forward projection camera object is used to characterize the initial resolution. If the target resolution is different from the initial resolution, the change ratio of the target resolution to the initial resolution is obtained. And according to the change ratio, adjusting the initial page data by using the orthographic projection camera object to obtain adjusted page data. And rendering and displaying the HTML page in the browser by using the adjusted page data. According to the method, the HTML page can be adjusted in a self-adaptive mode according to the target resolution.

Description

Page processing method, device, equipment and storage medium

Technical Field

The application belongs to the technical field of computers, and particularly relates to a page processing method, device, equipment and storage medium.

Background

Web pages are basic elements constituting websites, are terminal equipment platforms carrying various website applications, and current web pages can be created and produced by hypertext markup language (hyper text mackup language, HTML), i.e. HTML pages. Along with development of technology, display resolution of display devices is more and more, and HTML pages need to be adaptively adjusted to achieve better display effects on display devices for different display resolutions.

The current method for adaptively matching resolution of an HTML page mainly uses a unit (font size of the root element) rem of font size relative to a root element or a width unit (Viewport's width, vw) of a Viewport by preprocessing a cascading style sheet (Cascading Style Sheet, CSS), and changes the HTML page in equal proportion according to the resolution.

However, for the scene of generating the HTML page through the HTML page visual editing, the HTML tag of the HTML page cannot be customized, so that the adaptive matching of the HTML page cannot be performed by using the CSS preprocessing mode.

Disclosure of Invention

The application provides a page processing method, device, equipment and storage medium, which are used for solving the problem that an HTML page cannot be adaptively adjusted according to the resolution of display equipment when the HTML page is generated through visual editing of the HTML page.

In a first aspect, the present application provides a page processing method, including:

acquiring initial page data of an HTML page to be displayed and target resolution of a browser; the initial page data includes: the method comprises the steps of orthographic projection camera objects, initial positions of elements of the HTML page and initial sizes of the HTML page, wherein the projection range of the orthographic projection camera objects is used for representing initial resolution. And if the target resolution is different from the initial resolution, acquiring the change ratio of the target resolution and the initial resolution. And according to the change ratio, adjusting the initial page data by using the front projection camera object to obtain adjusted page data. And rendering and displaying the HTML page in the browser by using the adjusted page data.

Optionally, the variation ratio includes: width ratio and height ratio; and according to the change ratio, adjusting the initial page data by using the front projection camera object to obtain adjusted page data, including:

if the width ratio is larger than the first preset ratio interval, adjusting the resolution of the HTML page in the width direction, the position of the element of the HTML page in the width direction and the size of the element of the HTML page in the width direction according to the width ratio by utilizing the front projection camera object; and/or if the height ratio is greater than the second preset ratio interval, adjusting the resolution of the HTML page in the height direction, the position of the element of the HTML page in the height direction and the size of the element in the height direction of the HTML page according to the height ratio by utilizing the front projection camera object.

Optionally, after the initial page data of the HTML page to be displayed is obtained, and the target resolution of the browser, the method further includes:

and if the target resolution is the same as the initial resolution, rendering and displaying the HTML page in the browser by using the initial page data.

Optionally, obtaining the target resolution of the browser includes:

and acquiring the resolution of the display equipment, and taking the resolution of the display equipment as the target resolution.

In a second aspect, the present application provides another page processing method, including:

the initial resolution of the HTML page is obtained. And constructing an orthographic projection camera object of the HTML page according to the initial resolution, wherein the projection range of the orthographic projection camera object is used for representing the initial resolution. And loading elements in the projection range of the front projection camera object in response to the operation of a user, and setting the initial position and the initial size of the elements in the HTML page to obtain initial page data of the HTML page.

Optionally, the loading an element in the projection range of the front projection camera object in response to the operation of the user, and setting the initial position and the initial size of the element in the HTML page includes:

and responding to the drag operation of the user on the element icon in the projection range of the orthographic projection camera object, taking the dragged position as the initial position of the element on the HTML page, and taking the size of the dragged element as the initial position of the element on the HTML page.

In a third aspect, the present application provides a page processing apparatus, including:

the first acquisition module is used for acquiring initial page data of an HTML page to be displayed and target resolution of a browser; the initial page data includes: the method comprises the steps of orthographic projection camera objects, initial positions of elements of the HTML page and initial sizes of the HTML page, wherein the projection range of the orthographic projection camera objects is used for representing initial resolution.

And the second acquisition module is used for acquiring the change ratio of the target resolution to the initial resolution if the target resolution is different from the initial resolution.

And the adjusting module is used for adjusting the initial page data by utilizing the orthographic projection camera object according to the change ratio to obtain adjusted page data.

And the rendering module is used for rendering and displaying the HTML page in the browser by using the adjusted page data.

In a fourth aspect, the present application provides another page processing apparatus, including:

and the acquisition module is used for acquiring the initial resolution of the HTML page.

And the construction module is used for constructing the front projection camera object of the HTML page according to the initial resolution, and the projection range of the front projection camera object is used for representing the initial resolution.

And the loading module is used for responding to the operation of a user, loading elements in the projection range of the front projection camera object, setting the initial position and the initial size of the elements in the HTML page, and obtaining the initial page data of the HTML page.

In a fifth aspect, the present application provides a page processing apparatus, including: a processor, a communication interface, and a memory; the processor is in communication connection with the communication interface and the memory, respectively.

The memory stores computer-executable instructions.

The communication interface performs communication interaction with external equipment.

The processor executes computer-executable instructions stored by the memory to implement the method of any one of the first or second aspects.

In a sixth aspect, the present application provides a computer-readable storage medium having stored therein computer-executable instructions which, when executed by a processor, are adapted to carry out the page processing method according to any one of the first or second aspects.

In a seventh aspect, the present application provides a computer program product comprising a computer program which, when executed by a processor, implements the method according to any one of the first or second aspects.

According to the page processing method, the device, the equipment and the storage medium, when the initial page data of the HTML page with display and the target resolution of the browser are obtained, and when the projection range of the front projection camera object in the initial page data is different from the target resolution of the browser, the initial page data is adjusted according to the change ratio of the initial resolution corresponding to the projection range and the target resolution, the front projection camera object is constructed according to the initial resolution by obtaining the page data matched with the target resolution, and when the target resolution of the display equipment is different from the initial resolution, the range of the front projection camera object is adaptively adjusted, and the position and the size of the page element are generated, so that the HTML page is adaptively adjusted according to the target resolution.

Drawings

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

fig. 1 is a schematic flow chart of a page processing method according to an embodiment of the present application;

FIG. 2 is a graph showing the comparison of the effects of a page processing method according to an embodiment of the present application;

FIG. 3 is a flowchart illustrating another page processing method according to an embodiment of the present disclosure;

fig. 4 is a schematic structural diagram of a page processing apparatus according to an embodiment of the present application;

FIG. 5 is a schematic diagram of another page processing apparatus according to an embodiment of the present disclosure;

fig. 6 is a schematic structural diagram of a page processing apparatus according to an embodiment of the present application.

Specific embodiments thereof have been shown by way of example in the drawings and will herein be described in more detail. These drawings and the written description are not intended to limit the scope of the inventive concepts in any way, but to illustrate the concepts of the present application to those skilled in the art by reference to specific embodiments.

Detailed Description

Reference will now be made in detail to exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, the same numbers in different drawings refer to the same or similar elements, unless otherwise indicated. The implementations described in the following exemplary examples are not representative of all implementations consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with some aspects of the present application as detailed in the accompanying claims.

Resolution can be divided into image resolution and display resolution, and in this application resolution refers to display resolution. The display resolution is the resolution of the display device when displaying an image. The resolution is measured in dots, which are "dots" on the display, referred to as pixels (pixels). The value of the display resolution refers to the number of horizontal and vertical pixels over the entire viewable area of the display. For example, a resolution of 800×600 means that 800 pixels are displayed horizontally and 600 pixels are displayed vertically on the entire screen.

HTML pages currently developed are based on resolution to set the size and extent of the page, as well as the size and extent of the elements in the page. That is, the size and range of the HTML page is constant when the HTML page is displayed on display devices of different resolutions. Therefore, when the resolution of the display device that opens the HTML page changes for the same HTML page, the HTML page cannot automatically adjust the size of the page, and the position and size of the elements in the HTML page along with the change of the resolution, and there is a problem that the HTML page is not fully displayed or is too small in display. For example, when the above HTML page is opened using a personal computer, the page can be displayed completely, and there is no problem in that the display is too small in the HTML page. However, when the HTML page is opened by using a mobile terminal, such as a smart phone, there is a problem in that the HTML page is not displayed fully or is displayed too little.

At present, the method for realizing the self-adaptive change of the HTML page along with the resolution is mainly to design the HTML page by a CSS preprocessing mode and a programming mode. The HTML page, and the elements in the page, can be adaptively adjusted according to the resolution change, for example, by setting the relative length units rem, or by setting the relative viewport units vw and/or vh, etc. The following describes the adaptive adjustment of HTML pages in two ways.

Mode a: by setting the relative length units rem.

rem refers to units relative to the size of the root element in HTML. When designing an HTML page using programming means, the size of an element in the page is typically set in pixels (px) units, the width and height of the element. For example, the width of element 1 in the page is set to be 100px and the height is set to be 200px, and at any resolution of the page, the size of element 1 is 100px by 200px. And when the HTML page is designed through JavaScript, the size of the root element of the HTML page can be automatically set according to the resolution of the current display device. Then when the element size in the HTML page is designed, the unit is changed from px to rem, and the size of each element can be changed to the size corresponding to the root element. And then, according to the size of the root element and the resolution of the current display device, the size of each element in the HTML page can be related to the resolution of the current display device, so that the purpose of self-adaptively adjusting the size of the element in the HTML page is achieved.

Mode B: by setting the relative viewport units vw and/or vh.

The viewport is a display window of the display device, for example, a region displayed by a browser on the display device. vw refers to the width of the viewport, the viewport is divided into 100 parts, and the unit of the width of each part of viewport is 1vw; correspondingly, the unit of the height of each view port is 1vh. When the HTML page is designed by using a programming means, the size of the HTML page and/or the size of elements in the HTML page can be set in relative view port units, so that the purpose of adaptively changing the size of the HTML page and/or the size of elements in the HTML page along with the change of the display window and the resolution of the display window of the display device can be realized.

However, the above methods are all methods requiring CSS preprocessing, and the purpose of adaptively adjusting the HTML page along with the change of the resolution can be achieved by designing the HTML page through a programming method.

Currently, HTML pages may also be generated using HTML page visual editing, which may be done, for example, by a visual HTML page editor in the prior art. The editor may generate a blank page to be edited by setting the size, range, etc. of the HTML page. And the elements to be added can be loaded into the blank page to be edited by selecting and/or dragging various elements provided in the editor, which elements can be, for example, media elements, form elements, hyperlink elements, tag elements, etc. The HTML page is generated by adjusting the names, sizes, positions and other element attributes of the loaded elements and the layout of a plurality of elements in the page to be edited. Therefore, the user can make the HTML page more intuitively and conveniently.

However, aiming at the scene of generating the HTML page by using the visual editing of the HTML page at present, the CSS preprocessing mode cannot be used, and the purpose of self-adaptive adjustment of the HTML page along with the change of resolution in the prior art is realized by self-defining and modifying the background program of the HTML page. Therefore, when an HTML page generated by HTML page visual editing is opened in a display device of a different resolution, insufficient display of the HTML page occurs, or the display is too small, or a page is left white.

In view of this, the present application provides a page processing method, by constructing an orthographic camera object according to an initial resolution, and by adaptively adjusting a range of the orthographic camera object when a target resolution of a display device is different from the initial resolution in a manner of a page element, and generating an HTML page adapted to the target resolution of the display device according to a position and a size of the page element, thereby achieving an objective of adaptively adjusting the HTML page according to the target resolution.

The execution body of the present application includes a display device that displays an HTML page, and a device used when developing the HTML page. When the HTML page has been developed, it needs to be adaptively adjusted according to the resolution of the display device and displayed on the display device. The execution body is a display device, and may be a terminal device with a display function, such as a computer, a smart phone, a tablet computer, and a smart home device. When the HTML page is developed, the execution theme may be a terminal device, a server, or a server cluster, or a cloud terminal with a computing function.

The following describes the technical solutions of the present application and how the technical solutions of the present application solve the above technical problems in detail with specific embodiments. The following embodiments may be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments. Embodiments of the present application will be described below with reference to the accompanying drawings.

First, a description is given of a process of adaptively adjusting the HTML page according to the resolution of the display device and displaying the HTML page on the display device after the HTML page has been developed, and the execution subject is the display device.

Fig. 1 is a flow chart of a page processing method provided in an embodiment of the present application, as shown in fig. 1, where the method includes:

s101, acquiring initial page data of an HTML page to be displayed and target resolution of a browser.

Wherein, the initial page data includes: the method comprises the steps of orthographic projection of a camera object, an initial position of an element of the HTML page on the HTML page, and an initial size, wherein a projection range of the orthographic projection of the camera object is used for representing an initial resolution.

The front projection camera object may be, for example, an object generated by a front projection camera algorithm in a Web graphic library (Web Graphics Library, webGL) written by JavaScript, and used for generating an HTML page. The projection range of the front projection camera object is determined from the initial resolution, and the projection range of the front projection camera object can characterize the page size and page range of the generated HTML page.

The elements of the HTML page may be, for example, text, images, audio/video, hyperlinks, etc. in the HTML page, and each element has its own position and a certain size in the HTML page. The initial position of the element of the HTML page in the HTML page refers to the position of the element in the initial page; the initial size of an element of the HTML page in the HTML page refers to the size of the element in the initial page.

In a possible implementation, the target resolution of the browser may be, for example, the resolution of the browser on a display device for displaying the HTML page. The resolution of the browser may be the resolution of the browser set by the display device, or the resolution of the display device may be directly used as the resolution of the browser, which is not limited in this application.

In another possible implementation, the target resolution of the browser may be, for example, a resolution of a display device for displaying the HTML page. The cloud server can directly acquire the resolution of the display device, and the resolution of the display device is used as the target resolution.

The initial page data of the HTML page to be displayed and the target resolution of the browser may be obtained by the browser on the display device displaying the HTML page and then uploaded to the cloud server, or the cloud server may directly obtain the target resolution of the browser from the display device and obtain the initial page data of the HTML page to be displayed from the network.

S102, if the target resolution is different from the initial resolution, the change ratio of the target resolution and the initial resolution is obtained.

And acquiring initial page data of the HTML page to be displayed and target resolution of the browser through the browser on the display equipment displaying the HTML page. After the browser obtains the initial page data, determining the initial resolution according to the projection range of the orthographic camera object in the initial page data. Then, the browser compares the initial resolution with the target resolution of the browser, and if the initial resolution and the target resolution are different, the ratio of the target resolution to the initial resolution is used as the change ratio of the target resolution to the initial resolution.

If the target resolution of the browser of the display device is different from the initial resolution of the HTML page, the HTML page generated by the initial page data related to the initial resolution is displayed on the browser of the display device, and the display of the HTML page is incomplete, or is too small, or is left white due to the difference between the resolutions. Therefore, when the target resolution is different from the initial resolution, the change ratio between the target resolution and the initial resolution needs to be obtained, and the HTML page is adjusted.

Wherein the ratio of the change in the target resolution to the initial resolution may be, for example, a change in the width direction for the resolution or a change in the height direction for the resolution; the resolution may be varied in the width direction and the height direction. For which kind of change ratio is required to be obtained or which kind of change ratio is required to be set according to the actual requirement of the developer of the HTML page.

And S103, adjusting the initial page data by utilizing the front projection camera object according to the change ratio to obtain adjusted page data.

The initial page data adjusted by the front projection camera object comprises: the range of forward-projected camera objects of the HTML page, and the initial position, and initial size, of the elements of the HTML page in the HTML page.

According to the variation ratio, the range of the front projection camera of the HTML page is adjusted by using the front projection camera object, so that the range of the front projection camera of the HTML page is adapted to the target resolution. And according to the change ratio, adjusting the position and the size of the element of the HTML page by utilizing the front projection camera object so that the position and the size of the element of the HTML page are adapted to the target resolution.

And generating adjusted page data according to the adjusted range of the front projection camera of the HTML page and the positions and the sizes of the elements of the HTML page.

The initial page data is adjusted by the front projection camera object according to different change ratios required to be acquired, which are determined according to actual needs of a developer of the HTML page, and the adjusted page data are different. For example, when only the change ratio in the width direction is acquired, adjustment is made only for the size and the range in the width direction of the HTML page, and the coordinates and the size in the width direction of the element; when only the change ratio of the height direction is obtained, only the size and the range of the height direction of the HTML page and the coordinates and the size of the height direction of the element are adjusted; when the change ratios in the width direction and the height direction are acquired, the coordinates and the sizes in the width direction and the height direction of the element are adjusted for the sizes and the ranges in the width direction and the height direction of the HTML page.

Through the adjustment mode, the HTML page can be adaptively adjusted in any direction along with the change ratio of the initial resolution to the target resolution and the actual requirement of a developer, so that the HTML page adapting to the target resolution is generated, and the application scene of the adaptive adjustment of the HTML page is expanded.

And S104, rendering and displaying the HTML page in the browser by using the adjusted page data.

And adjusting the rendering and displaying of the HTML page in the browser according to the adjusted range of the orthographic camera of the HTML page and the adjusted positions and sizes of the elements of the HTML page. The size of the HTML page is the range of the front projection camera of the HTML page after adjustment, and the positions of the elements in the HTML page and the size of the elements are the positions and the sizes of the elements of the HTML page after adjustment.

The size of the HTML page and the position and size of the elements are adapted to the resolution of the browser. That is, the HTML page can achieve the same display effect on the display device as the original resolution under the resolution of the browser, and the problems that the page display is incomplete or the page display has white left and the like are avoided.

The browser renders the HTML page according to the page data, and displays the page on the browser of the display device.

Exemplary, fig. 2 is a comparison graph of effects of a page processing method according to an embodiment of the present application. As shown in fig. 2, includes:

The initial page is an HTML page generated according to initial page data, and includes two elements, element 1 and element 2. The resolution of the initial page is 480 px 540px, i.e. the range of the front projection camera corresponding to the initial page. The display page is a display page of a browser of a display device to be displayed with the HTML page, and the resolution of the display page is 502px x 387px.

According to the method of steps S101 to S103, the range of the front projection camera object of the display page can be obtained, the range of the front projection camera object corresponding to the initial page is obtained according to the change ratio of the resolutions of the initial page and the display page, and thus the size and the range of the HTML page are suitable for the resolution of the browser of the display device.

According to the method of steps S101 to S103, the positions and sizes of the element 1 and the element 2 are also adjusted to be the position ratio in the current display page, and the ratio of the occupied area, the position ratio in the initial page, and the ratio of the occupied area are consistent according to the change ratio of the resolutions of the initial page and the display page. Therefore, the positions and the ranges of the element 1 and the element 2 are suitable for the display page, and a better display effect is obtained in a browser of the display device.

Optionally, after the step S101, that is, after the initial page data of the HTML page to be displayed is acquired, and the target resolution of the browser, if the target resolution is the same as the initial resolution, the resolution of the browser that characterizes the display device is the same as the initial resolution, that is, the same resolution as the display device expected when the developer develops the HTML page, the HTML page can be perfectly displayed on the display device without adjustment. Therefore, the initial page data is directly rendered in the browser without processing the initial page data, the corresponding HTML page is obtained, and the HTML page is displayed on the browser.

According to the page processing method, the initial page data of the HTML page to be displayed and the target resolution of the browser are obtained, when the initial resolution corresponding to the projection range of the front projection camera object in the initial page data is different from the target resolution of the browser, the size of the HTML page to be displayed is adjusted according to the change ratio of the initial resolution to the target resolution, and the size and the position of the element are adjusted to obtain the page data matched with the target resolution, so that the purpose of self-adaptive adjustment of the HTML page according to the target resolution is achieved.

Taking the above-mentioned change ratio including a width ratio and a height ratio as an example, the above-mentioned how to adjust the initial page data by using the front projection camera object according to the change ratio, and obtain adjusted page data will be described, where the above-mentioned change ratio includes: a width ratio hRatio and a height ratio vRatio. The width ratio is calculated in a mode of a ratio of the width of the target resolution to the width of the initial resolution; the height ratio is calculated in such a manner that the ratio of the height of the target resolution to the height of the initial resolution is calculated.

In this case, the step S103 further includes:

in one possible embodiment, the width ratio is not located in a first predetermined ratio interval and the height ratio is located in a second predetermined ratio interval.

The first preset ratio interval and the second preset ratio interval may be determined according to an actual requirement of a user, and the two preset ratio intervals may be, for example, an interval range, or may be determined according to a specific value, and if the change ratio exceeds the specific value or is lower than the specific value, the change ratio is considered not to be located in the preset ratio interval, and how to set the preset ratio interval. The present application is not limited in this regard. When the width ratio is not located in the first preset ratio interval, the change of the target resolution and the initial page data in the width direction is characterized in that the displayed HTML page has the problems of incomplete display, or too small display and the like, and the page data of the HTML page in the width direction needs to be adjusted adaptively; and the height ratio is in the second preset ratio section, so that the page data in the height direction does not need to be adjusted.

According to the width ratio, the resolution of the HTML page in the width direction, the position of the element of the HTML page in the width direction, and the size in the width direction are adjusted using the front projection camera object.

Wherein the range of the front projection camera object in the width direction includes a left boundary camera. The formula for adjusting the resolution of the HTML page in the width direction according to the width ratio hRatio may be, for example:

Camera.left1＝Camera.left*hRatio (1)

Camera.right1＝Camera.right*hRatio (2)

wherein camera.left1 is the left boundary of the adjusted object range of the front projection camera, and camera.light1 is the right boundary of the adjusted object range of the front projection camera.

In addition, assuming that an element Div exists in the HTML page, the element is a two-dimensional rectangular element, and the position coordinate in the initial page data is (div.left, div.top), the coordinate may be, for example, the center point coordinate of the element Div or the coordinate of a certain vertex of the element Div, and the application is not limited to this. The size of the element Div in the initial page data is div.width div.height.

According to the width ratio, the formula for adjusting the position of the element of the HTML page in the width direction of the HTML page using the front projection camera object may be, for example:

Div.scale.x＝Div.left*hRatio (3)

Wherein div.scale.x is the adjusted position of the element of the HTML page in the width direction of the HTML page.

According to the width ratio, the formula for adjusting the size of the element of the HTML page in the width direction of the HTML page using the front projection camera object may be, for example:

Div.width1＝Div.width*hRatio (4)

wherein div.width1 is the adjusted size of the element of the HTML page in the width direction of the HTML page.

In another possible embodiment, the width ratio is located in a first predetermined ratio interval and the height ratio is not located in a second predetermined ratio interval.

When the height ratio is not located in the second preset ratio range, the change of the target resolution and the initial page data in the height direction is characterized to cause the problems of incomplete display or too small display of the displayed HTML page, and the page data of the HTML page in the height direction needs to be adaptively adjusted. And the width ratio is in the second preset ratio section, so that the adjustment of the page data in the width direction is not needed.

According to the height ratio, the resolution of the HTML page in the height direction, the position of the elements of the HTML page in the height direction, and the size in the height direction of the HTML page are adjusted by using the front projection camera object.

The range of the front projection camera object in the height direction comprises an upper boundary camera. Top of the front projection camera object range and a lower boundary camera. Bottom of the front projection camera object range. The formula for adjusting the resolution of the HTML page in the width direction according to the width ratio vRatio may be, for example:

Camera.top1＝Camera.top*vRatio (5)

Camera.bottom1＝Camera.bottom*vRatio (6)

wherein camera.top1 is the upper boundary of the adjusted front projection camera object range, and camera.bottom1 is the lower boundary of the adjusted front projection camera object range.

Further, it is assumed that only the above element Div still exists in the HTML page.

According to the height ratio, the formula for adjusting the position of the element of the HTML page in the height direction of the HTML page using the front projection camera object may be, for example:

Div.scale.y＝Div.top*vRatio (7)

wherein div.scale.y is the adjusted position of the element of the HTML page in the height direction of the HTML page.

Div.height1＝Div.height*hRatio (8)

wherein div.height1 is the adjusted size of the element of the HTML page in the height direction of the HTML page.

In a further possible embodiment, the width ratio is not located in the first predetermined ratio interval and the height ratio is not located in the second predetermined ratio interval.

In this embodiment, the changes of the target resolution and the initial page data in the width direction and the height direction may cause the problems of incomplete display or too small display of the displayed HTML page, so that the page data of the HTML page in the width direction and the height direction need to be adaptively adjusted. The adjustment method is the same as that of the first two embodiments, and will not be described here again.

According to the method provided by the embodiment of the invention, the width direction and the height direction of the initial page data of the HTML page are respectively adjusted and processed according to the target resolution through the changing degrees of the width ratio and the height ratio in the changing ratio of the target resolution and the initial resolution, so that the purpose of independently adjusting the width direction of the HTML page or the height direction of the HTML page or the width direction and the height direction of the HTML page is achieved, the freedom degree of the self-adaptive adjustment of the HTML page according to the target resolution is improved, and the adjustment requirements of more conditions can be met.

The application also provides a method for acquiring the initial page data of the HTML page, which is described in detail below:

The execution subject of the method may be a terminal device that constructs an HTML page from its initial page data, or a cloud platform. The terminal device may be, for example, a computer, an intelligent mobile terminal, or the like, which may be used to run an HTML page visualization editor in the prior art. When the execution subject of the method is a cloud platform, the cloud platform can provide a service for a user to construct an HTML page on line in an HTML page visual editing mode.

Fig. 3 is a flow chart of another page processing method provided in the embodiment of the present application, as shown in fig. 3, the method includes:

s301, acquiring initial resolution of the HTML page.

The initial resolution may be set according to actual requirements, and may be, for example, conventional 720P, 1080P (1K), 2K, 4K resolutions, etc. The initial resolution is used for a web page developer to set initial page data for the HTML page.

The cloud server can acquire the initial resolution of the HTML page according to the website corresponding to the access HTML page.

S302, constructing an orthographic projection camera object of the HTML page according to the initial resolution, wherein the projection range of the orthographic projection camera object is used for representing the initial resolution.

The initial resolution is assumed to be the containerWidth. Where, containerWidth is the number of pixels in the width direction, and containerHeight is the number of pixels in the height direction. In this case, the projection range of the constructed front projection camera object of the HTML page is (camera. Left, camera. Right, camera. Top, camera. Bottom) which is the left boundary of the projection range of the front projection camera object, camera. Right which is the right boundary of the projection range of the front projection camera object, camera. Top which is the upper boundary of the projection range of the front projection camera object, camera. Bottom which is the lower boundary of the projection range of the front projection camera object.

The relationship of the projection range of the front projection camera object of the HTML page to the initial resolution can be expressed by, for example, the following formula:

Camera.left＝-containerWidth/2 (9)

Camera.right＝containerWidth/2 (10)

Camera.top＝containerHeight/2 (11)

Camera.bottom＝-containerHeight/2 (12)

s303, loading elements in the projection range of the front projection camera object in response to the operation of a user, and setting the initial position and the initial size of the elements in the HTML page to obtain initial page data of the HTML page.

Wherein, the loading element can be realized through css2DObject function in WebGL library. The user can set the initial position and the initial size of the above elements in the projection range of the front projection camera object according to the actual needs. Since the projection range of the front projection camera object is the range of the HTML page, setting the initial position and the initial size of the element in the projection range of the front projection camera object is equivalent to setting the initial position and the initial size of the element in the HTML page.

In one possible implementation manner, in response to a drag operation of a user on the element icon within a projection range of the front projection camera object, the dragged position is taken as an initial position of the element on the HTML page, and the dragged element size is taken as an initial size of the element on the HTML page.

That is, the user can place the element in the projection range of the front projection camera object in a dragging manner in the HTML page visual editor, and according to the position where the element is placed, the initial position of the element on the HTML page is set; the initial size of the element in the HTML page is set by dragging the edge of the element, or the vertex, to zoom in or out the element, depending on the final size of the element.

The HTML page visual editor may be any HTML page visual editor in the prior art, which is not limited in this application.

In another possible implementation manner, in response to a user setting operation for a position of the element icon within a projection range of the front projection camera object, the set position is taken as an initial position of the element in the HTML page, and the set element size is taken as an initial size of the element in the HTML page.

That is, for example, the user may pop up a setting frame of the element icon by selecting or clicking the element icon in the HTML page visualization editor, and the setting frame may include therein a position coordinate setting option of the element, and a size setting option of the element. The user sets the initial position of the element and the initial size according to the mode of checking or filling.

According to the method provided by the embodiment of the application, the initial resolution of the HTML page is obtained, the front projection camera object of the HTML page is constructed in the HTML page visual editor, the size of the page is determined according to the projection range of the front projection camera object of the HTML page, and the initial position and the initial size of the element in the HTML page are determined according to the element in the front projection camera object of the HTML page, so that the initial page data of the HTML page are determined, and the initial page data is provided for the HTML page according to the resolution self-adaptive adjustment.

Fig. 4 is a schematic structural diagram of a page processing apparatus according to an embodiment of the present application. The page processing means may be, for example, the display device described above. As shown in fig. 4, the page processing apparatus includes: the system comprises a first acquisition module 11, a second acquisition module 12, an adjustment module 13 and a rendering module 14.

A first obtaining module 11, configured to obtain initial page data of an HTML page to be displayed, and a target resolution of a browser; the initial page data includes: the method comprises the steps of orthographic projection of a camera object, an initial position of an element of the HTML page on the HTML page, and an initial size, wherein a projection range of the orthographic projection of the camera object is used for representing an initial resolution.

The second obtaining module 12 is configured to obtain a change ratio of the target resolution to the initial resolution if the target resolution is different from the initial resolution.

And the adjusting module 13 is configured to adjust the initial page data by using the front projection camera object according to the change ratio, so as to obtain adjusted page data.

And a rendering module 14, configured to render and display the HTML page in the browser using the adjusted page data.

Optionally, the variation ratio includes: width ratio and height ratio. The adjusting module 13 is specifically configured to adjust, according to the width ratio, the resolution of the HTML page in the width direction, the position of the element of the HTML page in the width direction, and the size of the element of the HTML page in the width direction by using the front projection camera object if the width ratio is greater than a first preset ratio; and/or if the height ratio is greater than a second preset ratio, adjusting the resolution of the HTML page in the height direction, the position of the element of the HTML page in the height direction and the size of the element of the HTML page in the height direction by utilizing the front projection camera object according to the height ratio.

Optionally, the first obtaining module 11 obtains initial page data of an HTML page to be displayed, and after the target resolution of the browser, the rendering module 14 is further configured to render and display the HTML page in the browser using the initial page data if the target resolution is the same as the initial resolution.

Optionally, the first obtaining module 11 is specifically configured to obtain a resolution of the display device, and take the resolution of the display device as the target resolution.

The page processing device provided in the embodiment of the present application may execute the page processing method in the embodiment of the method, and its implementation principle and technical effects are similar, and are not described herein again.

Fig. 5 is a schematic structural diagram of another page processing apparatus according to an embodiment of the present application. The page processing means may be, for example, the aforementioned terminal device, or a cloud platform. As shown in fig. 5, the page processing apparatus includes: the system comprises an acquisition module 21, a construction module 22 and a loading module 23.

The obtaining module 21 is configured to obtain an initial resolution of the HTML page.

A construction module 22, configured to construct an orthographic camera object of the HTML page according to the initial resolution, where a projection range of the orthographic camera object is used to characterize the initial resolution.

And the loading module 23 is configured to load an element in the projection range of the front projection camera object in response to the operation of the user, and set an initial position and an initial size of the element in the HTML page, to obtain initial page data of the HTML page.

Optionally, the loading module 23 is specifically configured to respond to a drag operation of the user on the element icon within the projection range of the front projection camera object, take the dragged position as an initial position of the element on the HTML page, and take the size of the dragged element as the initial position of the element on the HTML page

Fig. 6 is a schematic structural diagram of a page processing apparatus according to an embodiment of the present application. The page processing device is configured to execute the foregoing page processing method, and may be, for example, the foregoing cloud server, or a terminal device, or a cloud platform. As shown in fig. 5, the page processing apparatus 600 may include: at least one processor 601, a memory 602, a communication interface 603.

A memory 602 for storing programs. In particular, the program may include program code including computer-operating instructions.

The memory 602 may include high-speed RAM memory or may further include non-volatile memory (non-volatile memory), such as at least one disk memory.

The processor 601 is configured to execute computer-executable instructions stored in the memory 602 to implement the methods described in the foregoing method embodiments. The processor 601 may be a CPU, or an application specific integrated circuit (Application Specific Integrated Circuit, abbreviated as ASIC), or one or more integrated circuits configured to implement embodiments of the present application.

The processor 601 may interact with an external device through a communication interface 603, which when the page processing device is a display device may be a server providing HTML pages for the display device, for example. When the page processing device is a terminal device or a cloud platform, the external device may be, for example, the display device described above. In a specific implementation, if the communication interface 603, the memory 602, and the processor 601 are implemented independently, the communication interface 603, the memory 602, and the processor 601 may be connected to each other and perform communication with each other through a bus. The bus may be an industry standard architecture (Industry Standard Architecture, abbreviated ISA) bus, an external device interconnect (Peripheral Component, abbreviated PCI) bus, or an extended industry standard architecture (Extended Industry Standard Architecture, abbreviated EISA) bus, among others. Buses may be divided into address buses, data buses, control buses, etc., but do not represent only one bus or one type of bus.

Alternatively, in a specific implementation, if the communication interface 603, the memory 602, and the processor 601 are integrated on a chip, the communication interface 603, the memory 602, and the processor 601 may complete communication through internal interfaces.

The present application also provides a computer-readable storage medium, which may include: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), a magnetic disk or an optical disk, etc., in which program codes may be stored, and in particular, the computer-readable storage medium stores program instructions for the methods in the above embodiments.

The present application also provides a program product comprising execution instructions stored in a readable storage medium. The at least one processor of the computing device may read the execution instructions from the readable storage medium, the execution instructions being executed by the at least one processor to cause the computing device to implement the page processing method described above.

Finally, it should be noted that: the above embodiments are only for illustrating the technical solution of the present application, and not for limiting the same; although the present application has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical scheme described in the foregoing embodiments can be modified or some or all of the technical features thereof can be replaced by equivalents; such modifications and substitutions do not depart from the spirit of the corresponding technical solutions from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A method of page processing, the method comprising:

acquiring initial page data of an HTML page to be displayed and target resolution of a browser; the initial page data includes: the method comprises the steps that a front projection camera object, an initial position of an element of the HTML page and an initial size are arranged at the initial position of the HTML page, and a projection range of the front projection camera object is used for representing initial resolution;

if the target resolution is different from the initial resolution, acquiring the change ratio of the target resolution to the initial resolution;

according to the change ratio, the initial page data is adjusted by utilizing the front projection camera object, and adjusted page data is obtained;

and rendering and displaying the HTML page in the browser by using the adjusted page data.

2. The method of claim 1, wherein the variation ratio comprises: width ratio and height ratio; and according to the change ratio, adjusting the initial page data by using the front projection camera object to obtain adjusted page data, including:

if the width ratio is not in the first preset ratio section, adjusting the resolution of the HTML page in the width direction, the position of the element of the HTML page in the width direction and the size of the element of the HTML page in the width direction by utilizing the front projection camera object according to the width ratio;

And/or the number of the groups of groups,

and if the height ratio is not in the second preset ratio section, adjusting the resolution of the HTML page in the height direction, the position of the element of the HTML page in the height direction and the size of the element in the height direction of the HTML page according to the height ratio by utilizing the front projection camera object.

3. The method according to claim 1 or 2, wherein after the obtaining the initial page data of the HTML page to be displayed and the target resolution of the browser, the method further comprises:

4. The method according to claim 1 or 2, wherein obtaining the target resolution of the browser comprises:

5. A method of page processing, the method comprising:

acquiring the initial resolution of an HTML page;

constructing an orthographic projection camera object of the HTML page according to the initial resolution, wherein the projection range of the orthographic projection camera object is used for representing the initial resolution;

And loading elements in the projection range of the front projection camera object in response to the operation of a user, and setting the initial position and the initial size of the elements in the HTML page to obtain initial page data of the HTML page.

6. The method of claim 5, wherein loading elements within the projected range of the front projection camera object and setting the initial position and initial size of the elements in the HTML page in response to a user operation comprises:

7. A page processing apparatus, comprising:

the first acquisition module is used for acquiring initial page data of an HTML page to be displayed and target resolution of a browser; the initial page data includes: the method comprises the steps that a front projection camera object, an initial position of an element of the HTML page and an initial size are arranged at the initial position of the HTML page, and a projection range of the front projection camera object is used for representing initial resolution;

The second acquisition module is used for acquiring the change ratio of the target resolution to the initial resolution if the target resolution is different from the initial resolution;

the adjusting module is used for adjusting the initial page data by utilizing the orthographic projection camera object according to the change ratio to obtain adjusted page data;

8. A page processing apparatus, comprising:

the acquisition module is used for acquiring the initial resolution of the HTML page;

the construction module is used for constructing an orthographic projection camera object of the HTML page according to the initial resolution, and the projection range of the orthographic projection camera object is used for representing the initial resolution;

9. A page processing apparatus, characterized by comprising: a processor, a communication interface, and a memory; the processor is respectively in communication connection with the communication interface and the memory;

The memory stores computer-executable instructions;

the communication interface performs communication interaction with external equipment;

the processor executes computer-executable instructions stored in the memory to implement the method of any one of claims 1-7.

10. A computer readable storage medium having stored therein computer executable instructions which when executed by a processor are for implementing the page processing method of any of claims 1 to 7.