CN110928542A

CN110928542A - Webpage adaptation method, device, system and equipment

Info

Publication number: CN110928542A
Application number: CN201811098946.0A
Authority: CN
Inventors: 谢基颜
Original assignee: Beijing Gridsum Technology Co Ltd
Current assignee: Beijing Gridsum Technology Co Ltd
Priority date: 2018-09-20
Filing date: 2018-09-20
Publication date: 2020-03-27
Anticipated expiration: 2038-09-20
Also published as: CN110928542B

Abstract

The invention discloses a webpage adaptation method, a device, a system and equipment, wherein the webpage adaptation method comprises the steps of obtaining the area proportion of an editing area in a webpage template and the screen proportion of a display screen; under the condition that the area proportion is not consistent with the screen proportion, adjusting coordinate values of an editing area in the webpage template so as to enable the editing area in the webpage template to be completely and centrally displayed in a virtual webpage template frame corresponding to the screen proportion; and adapting the webpage module to the display screen so as to enable the pixel length of the editing area after the coordinate length conversion to be consistent with the pixel length of the display screen, or enable the pixel width of the editing area after the coordinate width conversion to be consistent with the pixel width of the display screen. The method and the device automatically adapt the webpage template with the fixed proportion to the mobile equipment with different screen proportions, and restore the webpage template developed by the webpage editor to the maximum extent.

Description

Webpage adaptation method, device, system and equipment

Technical Field

The invention relates to the technical field of terminals, in particular to a method, a device, a system and equipment for webpage adaptation.

Background

The models of the current mobile terminals are complicated, and the screen proportion of the display screens of different models of mobile terminals is different. In order to meet the requirements of different screen ratios, a browser installed in the mobile terminal may display a web page (also referred to as H5 page), and usually, a plurality of web page templates with mainstream screen ratios are developed to be suitable for the mobile terminals with different screen ratios.

Because the mainstream screen ratio is more, the types of the webpages to be developed are more, and the process of developing the webpages requires developers to create components by themselves, so that a webpage editor (also called as H5 editor) is derived to simplify the process of developing the webpages.

The web page editor can add components in a dragging mode, such as a music component, can directly drag the components to a web page to add a music list, and the developed web page template has a music playing function, so that the web page template is simply and conveniently developed.

However, currently, the web page editor only has a fixed-scale window, and the developed web page template is also in the fixed scale. The problems that the webpage display in the display screen is incomplete, the background of the webpage is too much, the length-width ratio of components in the webpage is deformed and the like can be caused when the webpage template with a fixed ratio is directly used for mobile terminals with different screen ratios.

Disclosure of Invention

In view of the above problems, the present invention is proposed to provide a method, apparatus and system for adapting a web page to a mobile device with different screen scales, so as to automatically adapt a fixed-scale web page template to the mobile device with different screen scales, and to restore the web page template developed by a web page editor to the maximum.

In order to achieve the above object, the present application provides the following technical features:

a webpage adaptation method comprises the following steps:

acquiring the area proportion of an editing area in a webpage template and the screen proportion of a display screen;

under the condition that the display screen is determined to be too wide after comparing the area proportion with the screen proportion, adjusting a plurality of coordinate values of an editing area in the webpage template so as to enable the editing area in the webpage template to be completely displayed under the condition that the virtual webpage template frame corresponds to the screen proportion;

and adapting the webpage template to the display screen.

A web page adaptation apparatus, comprising:

the acquiring proportion unit is used for acquiring the area proportion of an editing area in the webpage template and the screen proportion of a display screen;

the excessive width adjusting unit is used for adjusting a plurality of coordinate values of an editing area in the webpage template under the condition that the display screen is determined to be excessive after comparing the area proportion with the screen proportion so as to enable the editing area in the webpage template to be completely displayed under the condition that the virtual webpage template frame corresponds to the screen proportion;

a web page adaptation system, comprising:

the webpage editing terminal is used for generating a webpage template, acquiring a webpage identifier of the webpage template, constructing an association relation between the webpage template and the webpage identifier, and uploading the webpage template, the webpage identifier and the association relation to the server;

the server is used for storing the webpage template, the webpage identifier and the incidence relation between the webpage template and the webpage identifier; receiving a webpage template acquisition instruction sent by the mobile terminal, and feeding back a webpage template related to a webpage identifier in the webpage template acquisition instruction to the mobile terminal;

the mobile terminal is used for sending a webpage template acquisition instruction to the server and receiving a webpage template which is fed back by the server and is associated with the webpage identifier in the webpage template acquisition instruction; the method is also used for obtaining the area proportion of an editing area in the webpage template and the screen proportion of the display screen, adjusting a plurality of coordinate values of the editing area in the webpage template under the condition that the display screen is determined to be too wide after comparing the area proportion with the screen proportion, so that the editing area in the webpage template is completely displayed under the condition that the virtual webpage template frame corresponds to the screen proportion, and the webpage template is adapted to the display screen. An apparatus comprising a processor, a memory, and a program stored on the memory and executable on the processor, the processor implementing the web page adaptation method when executing the program.

By means of the technical scheme, the webpage adaptation method can automatically adapt to the display screens with different screen proportions based on the area proportion (namely the fixed proportion of the webpage template) of the webpage template, obtain and display the webpage adapted to the display screens, and restore the webpage template developed by the webpage editor to the maximum extent.

Only once webpage template development can be carried out in the method, the complexity of webpage template development is greatly reduced, and the development efficiency is greatly improved on the basis of developing the webpage template by utilizing a webpage editor.

The foregoing description is only an overview of the technical solutions of the present invention, and the embodiments of the present invention are described below in order to make the technical means of the present invention more clearly understood and to make the above and other objects, features, and advantages of the present invention more clearly understandable.

Drawings

Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the invention. Also, like reference numerals are used to refer to like parts throughout the drawings. In the drawings:

FIG. 1 shows a schematic diagram of a web page adaptation system;

FIGS. 2a-2c illustrate schematic diagrams of web page templates and web pages;

FIG. 3 is a flow chart of a first embodiment of a web page adaptation method;

FIGS. 4a-4c are schematic diagrams illustrating yet another web page template and web page;

FIGS. 5a-5b are schematic diagrams illustrating yet another web page template and web page;

FIG. 6 shows a flowchart of a second embodiment of a web page adaptation method;

fig. 7 shows a schematic diagram of a web page adaptation apparatus.

Detailed Description

Technical terms used in the present application are introduced before the detailed description:

coordinate length/width: a length/width of a segment in the coordinate system expressed in a coordinate manner, for example, a length/width of a coordinate between abscissa 3 and abscissa 5 in the coordinate system is 2.

Pixel length/width: a length/width in terms of number of pixels on a display screen of an electronic device, for example, a number of 5 pixels between one pixel and another pixel on the display screen, indicates that the pixel length/pixel width is 5.

In the present embodiment, two lengths/widths calculated from coordinates and pixels are referred to, and in order to distinguish the two lengths/widths, the coordinate length/width and the pixel length/width are used to distinguish the representations.

Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

The present application provides a web page adaptation system, referring to fig. 1, the web page adaptation system includes:

a web page editing terminal 100, a server 200 and a mobile terminal 300.

The web page editing terminal 100 is configured to be provided with a web page editor and an input device, so that a developer completes a web page template after performing an interactive operation with the web page editor by using the input device, obtains a web page identifier of the web page template, constructs an association relationship between the web page template and the web page identifier, and uploads the web page template, the web page identifier, and the association relationship to the server 200.

Referring to fig. 2a, a web page template developed using a web page editor includes a background area and an editing area. Moreover, the background area and the editing area in the web page template are separately configured, which may facilitate subsequent independent operation of the background area and the editing area (in the prior art, only the editing area is provided, and the background image is embedded in the editing area, which is equivalent to integration of the editing area and the background image), so as to solve the problem of display screen whiteout (described in detail in the embodiment shown in fig. 3 later).

The background area in the webpage template is used for inserting the background image for displaying the background image, the editing area is used for adding components (most of the components are visualized), and the editing area is positioned above the background area and is a subset of the background area. This may enable the background image of the background area to completely cover the editing area and have a surplus background image.

The editing area is internally provided with a plurality of components, when the webpage template is displayed in the display screen, the editing area can be completely displayed in the display screen, and the background area can be partially displayed according to the screen proportion of the display screen.

For the sake of understanding, as an example, referring to fig. 2b, the left side is a web page template developed by the web page editor, and the middle and the right sides are both web pages obtained by automatically adapting the web page template after the display screens with different screen proportions, where a black square represents an editing area (it is understood that the real web page does not have a black square, and this illustration is for the sake of understanding, the black square is used to distinguish the editing area from the background area).

Because the editing area in the webpage template needs to be completely displayed, the fixed proportion of the webpage template output by the webpage editor is as follows: the ratio of the area width to the area length of the editing area; for ease of reference, are referred to as zone ratios.

In order to facilitate drawing of a web page template in a web page editor, it is usually represented by a coordinate system. At present, the upper left corner of the editing area is used as the origin of coordinates (0,0), the direction extending from the origin to the lateral width of the editing area is the X-axis forward direction, and the direction extending from the origin to the longitudinal length of the editing area is the Y-axis forward direction.

Taking the web page template shown in fig. 2c as an example, the upper left corner of the editing area is the coordinate origin (0,0), the lateral direction is the positive direction of the X axis to the right, and the longitudinal direction is the positive direction of the Y axis to the down. In this coordinate system, the coordinate of the lower right corner of the editing area is (274,435); the coordinate of the upper left corner of a component in the editing area is (50, 100); the coordinates of the upper left corner of the background area (located in the third quadrant of the coordinate system) are (-100 ).

The coordinates in the web page template are not fixed pixels but relative units, and one coordinate corresponds to one unit pixel. For example, in the case where the unit pixel is 5 pixels, one coordinate representing the web page template represents 5 pixels on the display screen.

After the developer completes the web page template by using the input device to perform the interactive operation with the web page editor, the web page editing terminal 100 obtains the web page identifier of the web page template, associates the web page template with the web page identifier, and uploads the web page template and the web page identifier to the server 200.

The server 200 is used for storing the webpage template and the webpage identifier, and the webpage template and the webpage identifier are in an incidence relation; and receiving a webpage template acquisition instruction sent by the mobile terminal, and feeding back a webpage template associated with the webpage identifier in the webpage template acquisition instruction.

The mobile terminal 300 is configured to send a webpage template acquisition instruction to the server 200 after acquiring the webpage display instruction; receiving a webpage template which is fed back by the server and is associated with the webpage identifier in the webpage template acquisition instruction, and automatically adapting the webpage template to the display screen of the mobile terminal; the webpage template acquisition instruction comprises a webpage identifier.

Under the condition that a user operates a browser of the mobile terminal, the mobile terminal can acquire a webpage display instruction, the webpage display instruction comprises a webpage identifier (such as a website), and the mobile terminal can send a webpage template acquisition instruction containing the webpage identifier to the server so as to receive a webpage template corresponding to the webpage identifier and fed back by the server.

After the mobile terminal acquires the webpage template associated with the webpage identifier, the webpage template associated with the webpage identifier can be stored, so that the webpage template associated with the webpage identifier can be directly acquired locally at the mobile terminal under the condition that the webpage displaying instruction containing the webpage identifier is acquired again.

Of course, the mobile terminal may still send the web page template obtaining instruction to the server to obtain the web page template associated with the web page identifier from the server under the condition of obtaining the web page displaying instruction containing the web page identifier again.

The specific implementation of the mobile terminal acquiring the webpage template associated with the webpage identifier is related to the internal implementation logic of the browser, which is not limited in this embodiment.

The following describes a process of automatically adapting a web page template to a display screen of a mobile terminal by the mobile terminal. It should be noted that, in the present embodiment, the area ratio and the screen ratio are both width-to-length ratios, and of course, the area ratio and the screen ratio can also be implemented as length-to-width ratios.

The application provides an embodiment I of a webpage adaptation method, which is applied to a browser of a mobile terminal. Referring to fig. 3, the following steps may be included:

step S301: and acquiring the area proportion of an editing area in the webpage template and the screen proportion of a display screen.

After acquiring the webpage display instruction, the browser of the mobile terminal can acquire hardware configuration information of the mobile terminal, wherein the hardware configuration information comprises a pixel width and a pixel length High of a display screen; the ratio of the pixel width Wide to the pixel length High is referred to as a screen ratio Ks of the display screen of the mobile terminal Wide/High. For example, a display screen with a resolution of 600 × 800 is taken as an example, and the screen ratio is 3: 4.

The mobile terminal acquires a webpage template corresponding to a webpage identifier in a webpage display instruction, wherein the webpage template comprises an editing area coordinate width We and a coordinate length He, and the ratio of the coordinate width We to the coordinate length He is called as an area ratio Ke ═ We/He. Referring to fig. 2c, if the coordinate width of the editing region is 274 and the coordinate length is 435, the region scale is Ke 274/435.

Step S302: comparing the area ratio with the screen ratio.

And comparing the area proportion with the screen proportion by the browser of the mobile terminal to acquire the size relation between the area proportion and the screen proportion.

If the area ratio is greater than the screen ratio (in the case where the area ratio and the screen ratio are the ratio of the length to the width, it is equivalent to the area ratio being smaller than the screen ratio), it indicates that the display screen is too long, and the process proceeds to step S303.

If the area ratio is smaller than the screen ratio (in the case where the area ratio and the screen ratio are the ratio of the length to the width, it is equivalent to the area ratio being larger than the screen ratio), it indicates that the display screen is too wide, and the process proceeds to step S304.

If the area ratio is equal to the screen ratio, it can be understood that the display screen is suitable for the web page template corresponding to the screen ratio, and when the area ratio of the web page template is exactly the same as the screen ratio, the display screen only displays the editing area and the editing area is completely and centrally displayed without displaying a background image outside the editing area. The web page template is adapted to the display screen according to the existing adaptation scheme, and the execution process is the prior art and is not described herein again.

And under the condition that the area proportion is not consistent with the screen proportion, adjusting the coordinate value of the editing area in the webpage template so as to enable the editing area in the webpage template to be completely and centrally displayed in the virtual webpage template frame corresponding to the screen proportion.

This step includes two cases:

in the first case: the display screen is too long.

It is understood that the display screen is suitable for the web page template corresponding to the screen scale (since the web page template is virtualized, it will be referred to as a virtual web page template hereinafter for distinguishing from the aforementioned web page template).

It can be understood that, in the case that the pixel length of the display screen is long, the editing area of the web page template can be completely displayed in the display screen, and due to the long pixel length of the display screen, the web page display effect will be as shown in the left side of fig. 4a, and the web page template is displayed at the upper position of the display screen.

In order to center the web page template in the display screen, the virtual web page template frame may be calculated, and as long as the web page template is completely centered in the virtual web page template frame, as shown in the right side of fig. 4a, it may be ensured that the subsequent web page template is completely centered in the display screen, as shown in fig. 4 b.

Step S303 includes steps S3031 to S3034.

S3031: if the area proportion is not consistent with the screen proportion, the display screen is too long, and under the condition that the coordinate width of the virtual webpage template frame is consistent with the coordinate width of the webpage template, the coordinate length of the virtual webpage template frame corresponding to the screen proportion is calculated.

The mobile terminal can determine a virtual webpage template frame corresponding to the screen proportion, and the virtual webpage template frame is determined by two parameters: the virtual web page template frame coordinate width Ws and the coordinate length Hs. The calculation formula is as follows:

ws is We; the coordinate width of the default virtual web page template frame is equal to the coordinate width of the web page template.

Hs is We/Ks; and determining the coordinate length of the template frame of the virtual webpage based on the screen proportion Ks.

Step S3032: and determining the longitudinal offset of the webpage template, wherein the longitudinal offset can enable the webpage template to be displayed in the virtual webpage template frame in a centered mode.

The longitudinal offset is calculated as: offset y ═ (Hs-He)/2.

Namely, the difference value between the coordinate length Hs of the virtual webpage template frame and the coordinate length He of the editing area in the webpage template is calculated, and half of the difference value is used as the longitudinal offset.

Step S3033: and maintaining the abscissa of the editing area in the webpage template unchanged, and increasing the longitudinal offset by the ordinate.

The editing area comprises a frame of the editing area and each component in the editing area, namely all coordinates of the frame of the editing area and each internal component are adjusted: the abscissa is maintained constant and the ordinate is increased by the longitudinal offset.

Step S3034: and maintaining the abscissa of the background area in the web page template unchanged, and increasing the longitudinal offset by the ordinate to obtain the adjusted web page template, and entering step S305.

After the editing area is vertically shifted, the background area may be vertically shifted to ensure that the relative positions of the editing area and the background area are not changed. That is, for all coordinates of the background area in the web page template: and keeping the horizontal coordinate unchanged, and increasing the vertical offset by the vertical coordinate, thereby obtaining the adjusted webpage template.

Referring to fig. 4c, the original web page template is on the left side, and the adjusted web page template is on the right side.

When offset is 10 (representing 10 coordinates), the coordinate of the upper left corner of the editing area in the adjusted web page template is adjusted from (0,0) to (0,10), and the coordinate of the lower right corner of the editing area is adjusted from (274,435) to (274,445). The coordinate of the upper left corner of a component in the editing area is adjusted from (50,100) to (50, 110); the coordinates of the upper left corner of the background area are adjusted from (-100 ) to (-100, -90).

In the above description, only a few coordinate points are taken as an example, in practical cases, the mobile terminal may vertically shift the coordinates of all objects in the web page template, that is, adjust the original coordinates (x, y) to coordinates (x, y + offset).

In the second case: the display screen is too wide.

It can be understood that, in the case that the pixel width of the display screen is wide, the editing area of the web page template cannot be completely displayed in the display screen, and cannot be displayed in the middle. The display effect of the web page is shown in the left side of fig. 5a, and a partial area in the web page template cannot be displayed in the display screen.

In order to center the web page template in the display screen, the virtual web page template frame may be calculated, and as long as the web page template is completely centered in the virtual web page template frame, as shown in the right side of fig. 5a, it may be ensured that the subsequent web page template is completely centered in the display screen, as shown in fig. 5 b.

Step S304 includes steps S3041 to S3045.

Step S3041: if the area ratio is not consistent with the screen ratio, the display screen is too wide, and under the condition that the coordinate width of the virtual webpage template frame is consistent with the coordinate width of the webpage template, the coordinate length of the virtual webpage template frame corresponding to the screen ratio is calculated.

Step S3042: and calculating the reduction ratio of the coordinate length of the virtual webpage template frame to the coordinate length of the webpage template, adjusting an editing area in the webpage template according to the reduction ratio, and adjusting a background area in the webpage template according to the reduction ratio to obtain a reduced webpage template.

Referring to fig. 5a, in the case that the screen length is too wide, the coordinate length of the web page template partially exceeds the coordinate length of the virtual web page template frame, so that the coordinate length of the web page template needs to be reduced to be consistent with the coordinate length of the virtual web page template frame. The formula for the reduction ratio k is: and k is Hs/He.

And then, adjusting the frame of the editing area in the webpage template and the components in the editing area according to a reduction scale, and reducing each coordinate (x, k, y) in the editing area to enable the coordinate length of the editing area to be consistent with the coordinate length of the virtual webpage template frame.

In order to ensure the relative position relationship between the background region and the editing region, the background region may be reduced, and the coordinates of the reduced background region are (x × k, y × k).

And obtaining the webpage template as a reduced webpage template after the editing area and the background area are reduced.

Step S3043: and determining the transverse offset of the reduced webpage template, wherein the transverse offset can enable the reduced webpage template to be displayed in the virtual webpage template frame in a centered mode.

Since the coordinate width and the coordinate height of the web page template are reduced in equal proportion, the reduced web page template is positioned on the right side of the virtual web page template frame, and the web page template needs to be subjected to lateral offset in order to display the web page template in the middle.

The formula for calculating the lateral offset is: offset x ═ (Ws-We k)/2.

That is, the difference between the coordinate width Ws of the virtual netpage template frame and the coordinate width We × k of the edit area in the reduced netpage template is calculated, and half of the difference is used as the lateral offset.

Step S3044: and maintaining the ordinate of the editing area in the reduced webpage template unchanged, increasing the horizontal offset by the abscissa, maintaining the ordinate of the background area in the reduced webpage template unchanged, increasing the horizontal offset by the abscissa, obtaining an adjusted webpage template, and entering step S305.

On the basis that each coordinate in the reduced webpage template is (x k, y k), the ordinate is kept unchanged, and the abscissa is added with the transverse offset. Then, the coordinates of the adjusted web page template are adjusted from (x × k, y × k) to (x × k + (Ws-We × k)/2, y × k).

Step S305: and adapting the webpage module to the display screen so as to enable the pixel length of the editing area after the coordinate length conversion to be consistent with the pixel length of the display screen, or enable the pixel width of the editing area after the coordinate width conversion to be consistent with the pixel width of the display screen.

A first implementation corresponding to the first case (display screen is too long): the pixel width of the editing area after coordinate width conversion is made to coincide with the pixel width of the display screen, as shown in fig. 4 b.

If the area proportion is not consistent with the screen proportion, determining a unit pixel corresponding to the coordinate according to the pixel width of the display screen, converting the coordinate of the webpage template into the pixel according to the unit pixel, and obtaining the webpage matched with the display screen.

Assuming that a unit pixel corresponding to one coordinate is determined to be 5 pixels in the case where the pixel width of the display screen is 800 pixels, the coordinate width 160 of the corresponding web page template is determined in the case where the pixel width is 800 pixels.

The mobile terminal obtains the pixel width of the display screen, and assuming that the pixel width of the display screen is 480, the unit pixel corresponding to one coordinate is 5 × 480/800 — 3 pixels. Then, the coordinates of the web page template are converted into pixels according to the unit pixels, and a web page adapted to the display screen is obtained, as shown in fig. 4 b. The above process is well-established technology and will not be described herein.

A second implementation corresponding to the second case (display screen too wide) above: the pixel length of the editing area after coordinate length conversion is made to coincide with the pixel length of the display screen, as shown in fig. 5 b.

If the area proportion is not consistent with the screen proportion, determining a unit pixel corresponding to the coordinate according to the pixel length of the display screen, converting the coordinate of the webpage template into the pixel according to the unit pixel, and obtaining the webpage matched with the display screen.

Assuming that a unit pixel corresponding to one coordinate is determined to be 5 pixels in the case where the pixel length of the display screen is 800 pixels, the coordinate length 160 of the corresponding web page template is determined in the case where the pixel length is 800 pixels.

The mobile terminal obtains the pixel length of the display screen, and assuming that the pixel length of the display screen is 480, the unit pixel corresponding to one coordinate is 5 × 480/800 — 3 pixels. Then, the coordinates of the web page template are converted into pixels according to the unit pixels, and a web page adapted to the display screen is obtained, as shown in fig. 5 b. This process is well-established and will not be described herein.

Referring to the web pages shown in fig. 4b and 5b, since the background area is usually large (the calculation process of the size of the background area will be described in detail in the following embodiments), in the process of applying the web page template to the display screens with different screen scales, the background image is used to fill the display space outside the editing area on the display screen, so as to solve the problem of the display screen being blank.

Since the foregoing indicates that the background area may be relatively large, the calculation of the minimum height and minimum width of the background area is described below. It is assumed that the maximum screen ratio is Kw in the case where the display screen is too wide, and the minimum screen ratio is Kh in the case where the display screen is too long.

As can be seen from the foregoing: under different screen scales, the background area needs to be subjected to horizontal offset and vertical offset, so that the editing area still needs to be a subset of the editing area after the horizontal offset and the vertical offset are ensured.

Then, the minimum height Hbmin of the background region is:

Hbmin＝He+2*offsetY，offsetY＝(Hs-He)/2；Hs＝We/Kh。

the minimum width Wbmin of the background area is as follows:

Wbmin＝We+2*offsetX，offsetX＝(Ws-We*k)/2；k＝Hs/He；Hs＝We/Kh。

wherein He is the coordinate height of the editing area, and We is the coordinate width of the editing area; hs is the coordinate length of the virtual webpage template frame corresponding to the screen proportion, offset X is the transverse offset, and offset Y is the longitudinal offset.

Of course, the length of the background area will generally be greater than the minimum length, and the width of the background area will generally be greater than the minimum width, so that it can still be used after the new screen ratio appears.

Assuming that the length of the background region is Hb and the width is Wb, if the coordinate value of the upper left corner of the editing region is (0,0), the coordinate value of the upper left corner of the background region is less than or equal to (-offestX, -offestY) so as to satisfy the requirement that the horizontal offset or the vertical offset can be performed subsequently.

Through the technical characteristics, the following beneficial effects can be obtained:

firstly, the method and the device can automatically adapt to the display screens with different screen proportions based on the area proportion of the webpage template (namely the fixed proportion of the webpage template), obtain and display the webpage adapted to the display screen, and restore the webpage template developed by the webpage editor to the maximum extent.

Secondly, the background area is increased and is larger, the display area outside the editing area can be filled by adopting the background image, and the problem of screen blank in the mobile terminal which is adaptive to different screen proportions can be avoided.

Finally, only once webpage template development is needed, the complexity of webpage template development is greatly reduced, and the development efficiency is greatly improved on the basis of webpage template development by using a webpage editor.

The application provides an embodiment two of a webpage adaptation method, which is applied to a browser of a mobile terminal. Referring to fig. 6, the following steps may be included:

step S601: and acquiring the area proportion of an editing area in the webpage template and the screen proportion of a display screen.

Step S602: and under the condition that the display screen is determined to be too wide after comparing the area proportion with the screen proportion, adjusting a plurality of coordinate values of the editing area in the webpage template so as to enable the editing area in the webpage template to be completely displayed under the condition that the virtual webpage template frame corresponds to the screen proportion.

S1: adjusting the coordinate width of the virtual webpage template frame to be matched with the coordinate width of the webpage template;

s2: under the condition that the coordinate width of the virtual webpage template frame is matched with the coordinate width of the webpage template, calculating the coordinate length of the virtual webpage template frame corresponding to the screen proportion;

s3: calculating a quotient of the coordinate length of the virtual webpage template frame and the coordinate length of the webpage template, and determining a reduction ratio according to the quotient;

s4: and adjusting the webpage template according to the reduction proportion to obtain a reduced webpage template so as to enable the editing area in the webpage template to be completely displayed under the condition that the virtual webpage template frame corresponds to the screen proportion.

In the first case: the web page template includes only the edit area.

In a case where the web page template only includes the editing area, the editing area is the web page template, and in this case, the step S4 adjusts the web page template according to the reduction ratio to obtain a reduced web page template, including:

adjusting the editing area according to the reduction scale;

in the second case: the webpage template comprises an editing area and a background area, and the background area is used for inserting a background image; the editing area is a subset of the background area, is positioned above the background area and is separated from the background area;

step S4 is executed to adjust the web page template according to the reduced scale to obtain a reduced web page template, which includes:

adjusting a background area and an editing area in the webpage template according to the reduction scale;

s603: and adjusting a plurality of coordinate values of the editing area in the webpage template to enable the editing area in the webpage template to be displayed in the middle of the virtual webpage template frame corresponding to the screen proportion, and entering the step S605.

S1: determining the transverse offset of the reduced webpage template according to the width of the reduced webpage template and the width of the virtual webpage template frame, wherein the transverse offset can enable the reduced webpage template to be displayed in the middle of the virtual webpage template frame;

s2: and maintaining the vertical coordinate of the reduced webpage template unchanged, and adjusting the position of the webpage template according to the transverse offset.

In the first case: and maintaining the vertical coordinate of the editing area unchanged, and increasing the horizontal offset by the horizontal coordinate to obtain the reduced webpage template.

In the second case: and maintaining the vertical coordinates of the background area and the editing area in the reduced webpage template unchanged, and increasing the horizontal offset by the horizontal coordinate.

Step S604: and under the condition that the display screen is determined to be too long after comparing the area proportion with the screen proportion, adjusting a plurality of coordinate values of the editing area in the webpage template so as to enable the editing area in the webpage template to be displayed in the middle of the virtual webpage template frame corresponding to the screen proportion, and entering the step S605.

Step S604: adjusting the plurality of coordinate values of the editing area in the web page template further comprises:

s2: under the condition that the coordinate width of the virtual webpage template frame is matched with the coordinate width of the webpage template, calculating the coordinate length of the virtual webpage template frame corresponding to the screen proportion, and determining the abscissa and the ordinate of an editing area in the webpage template based on the coordinate width and the coordinate length;

s3: determining a longitudinal offset of the webpage template, wherein the longitudinal offset can enable the webpage template to be displayed in the virtual webpage template frame in a centered mode;

s4: and maintaining the abscissa of the editing area in the webpage template unchanged, and increasing the longitudinal offset by the ordinate to obtain the adjusted webpage template.

The webpage template also comprises a background area, and the background area is used for inserting a background image; the editing area is a subset of the background area, is positioned above the background area and is separated from the background area;

before obtaining the adjusted web page template, the method further includes: and maintaining the abscissa of the background area in the webpage template unchanged, and increasing the longitudinal offset by the ordinate.

Step S605: and adapting the webpage template to the display screen.

Regarding the implementation process of each step shown in fig. 6, reference may be made to the same step in the embodiment shown in fig. 3, and details are not repeated here.

Referring to fig. 7, the present application further provides a web page adapting apparatus, including:

an acquiring ratio unit 71, configured to acquire a region ratio of an editing region in the web page template and a screen ratio of the display screen;

an excessively wide adjusting unit 72, configured to, when the display screen is determined to be excessively wide after comparing the area ratio with the screen ratio, adjust a plurality of coordinate values of an editing area in the web template, so that the editing area in the web template is completely displayed in a case where the virtual web template frame corresponds to the screen ratio;

the excessive width adjusting unit 72 specifically includes: adjusting the coordinate width of the virtual webpage template frame to be matched with the coordinate width of the webpage template; under the condition that the coordinate width of the virtual webpage template frame is matched with the coordinate width of the webpage template, calculating the coordinate length of the virtual webpage template frame corresponding to the screen proportion; calculating a quotient of the coordinate length of the virtual webpage template frame and the coordinate length of the webpage template, and determining a reduction ratio according to the quotient; and adjusting the webpage template according to the reduction proportion to obtain a reduced webpage template so as to enable the editing area in the webpage template to be completely displayed under the condition that the virtual webpage template frame corresponds to the screen proportion.

A centering display unit 73, configured to adjust a plurality of coordinate values of the editing area in the web page template, so that the editing area in the web page template is displayed in a centering manner in the virtual web page template frame corresponding to the screen scale.

The centering display unit 73 specifically includes: determining the transverse offset of the reduced webpage template according to the width of the reduced webpage template and the width of the virtual webpage template frame, wherein the transverse offset can enable the reduced webpage template to be displayed in the middle of the virtual webpage template frame; and maintaining the vertical coordinate of the editing area in the reduced webpage template unchanged, and adjusting the position of the webpage template according to the transverse offset.

The webpage template also comprises a background area, and the background area is used for inserting a background image; the editing area is a subset of the background area, the editing area is positioned above the background area, and the editing area is separated from the background area;

adjusting the webpage template according to the reduction ratio to obtain a reduced webpage template, comprising: and adjusting a background area and an editing area in the webpage template according to the reduction ratio.

Before the obtaining of the adjusted web page template, the method further includes: and maintaining the vertical coordinates of the background area and the editing area in the reduced webpage template unchanged, and increasing the horizontal offset by the horizontal coordinate.

And an overlength adjusting unit 74, configured to, when the display screen is determined to be overlength after comparing the area ratio with the screen ratio, adjust a plurality of coordinate values of the editing area in the web page template, so that the editing area in the web page template is displayed in the middle of the virtual web page template frame corresponding to the screen ratio.

The excessive length adjusting unit 74 specifically includes:

adjusting the coordinate width of the virtual webpage template frame to be matched with the coordinate width of the webpage template; under the condition that the coordinate width of the virtual webpage template frame is matched with the coordinate width of the webpage template, calculating the coordinate length of the virtual webpage template frame corresponding to the screen proportion, and determining the abscissa and the ordinate of an editing area in the webpage template based on the coordinate width and the coordinate length; determining a longitudinal offset of the webpage template, wherein the longitudinal offset can enable the webpage template to be displayed in the virtual webpage template frame in a centered mode; and maintaining the abscissa of the editing area in the webpage template unchanged, and increasing the longitudinal offset by the ordinate to obtain the adjusted webpage template.

The adapting unit 75 is configured to adapt the web page template to the display screen.

The adapting unit 75 specifically includes:

adapting the webpage module to the display screen so as to enable the pixel length of the edited area after the coordinate length conversion to be consistent with the pixel length of the display screen;

alternatively, the first and second electrodes may be,

and adapting the webpage module to the display screen so as to enable the pixel width of the edited area after the coordinate width conversion to be consistent with the pixel width of the display screen.

The web page adapting device comprises a processor and a memory, wherein the acquiring proportion unit 71, the over-width adjusting unit 72, the centering display unit 73, the over-length adjusting unit 74, the adapting unit 75 and the like are stored in the memory as program units, and the processor executes the program units stored in the memory to realize corresponding functions.

The processor comprises a kernel, and the kernel calls the corresponding program unit from the memory. The kernel can be set to be one or more than one, the fixed-scale webpage template is automatically adapted to the mobile equipment with different screen scales by adjusting kernel parameters, and the webpage template developed by the webpage editor is restored to the maximum extent.

The memory may include volatile memory in a computer readable medium, Random Access Memory (RAM) and/or nonvolatile memory such as Read Only Memory (ROM) or flash memory (flash RAM), and the memory includes at least one memory chip.

An embodiment of the present invention provides a storage medium on which a program is stored, and the program implements the web page adaptation method when executed by a processor.

The embodiment of the invention provides a processor, which is used for running a program, wherein the webpage adaptation method is executed when the program runs.

The embodiment of the invention provides equipment, which comprises a processor, a memory and a program which is stored on the memory and can run on the processor, wherein the processor executes the program and realizes the following steps:

and adapting the webpage template to the display screen.

Optionally, the adjusting the coordinate values of the editing area in the webpage template to enable the editing area in the webpage template to be completely displayed under the condition that the virtual webpage template frame corresponds to the screen ratio includes:

adjusting the coordinate width of the virtual webpage template frame to be matched with the coordinate width of the webpage template;

under the condition that the coordinate width of the virtual webpage template frame is matched with the coordinate width of the webpage template, calculating the coordinate length of the virtual webpage template frame corresponding to the screen proportion;

calculating a quotient of the coordinate length of the virtual webpage template frame and the coordinate length of the webpage template, and determining a reduction ratio according to the quotient;

and adjusting the webpage template according to the reduction proportion to obtain a reduced webpage template so as to enable the editing area in the webpage template to be completely displayed under the condition that the virtual webpage template frame corresponds to the screen proportion.

Optionally, before adapting the web page template to the display screen, the method further includes: adjusting a plurality of coordinate values of an editing area in the webpage template so that the editing area in the webpage template is displayed in the middle of a virtual webpage template frame corresponding to the screen proportion;

the adjusting the plurality of coordinate values of the editing area in the webpage template further comprises:

determining the transverse offset of the reduced webpage template according to the width of the reduced webpage template and the width of the virtual webpage template frame, wherein the transverse offset can enable the reduced webpage template to be displayed in the middle of the virtual webpage template frame;

and maintaining the vertical coordinate of the editing area in the reduced webpage template unchanged, and adjusting the position of the webpage template according to the transverse offset.

Optionally, the webpage template further includes a background area, and the background area is used for inserting a background image;

the editing area is a subset of the background area, the editing area is positioned above the background area, and the editing area is separated from the background area;

adjusting the webpage template according to the reduction ratio to obtain a reduced webpage template, comprising:

adjusting a background area and an editing area in the webpage template according to the reduction scale; and maintaining the vertical coordinates of the background area and the editing area in the reduced webpage template unchanged, and increasing the horizontal offset by the horizontal coordinate.

Optionally, the method further includes:

under the condition that the display screen is determined to be too long after the area proportion and the screen proportion are compared, adjusting a plurality of coordinate values of an editing area in the webpage template so that the editing area in the webpage template is displayed in the middle of a virtual webpage template frame corresponding to the screen proportion;

the adjusting the plurality of coordinate values of the editing area in the web page template further comprises:

under the condition that the coordinate width of the virtual webpage template frame is matched with the coordinate width of the webpage template, calculating the coordinate length of the virtual webpage template frame corresponding to the screen proportion, and determining the abscissa and the ordinate of an editing area in the webpage template based on the coordinate width and the coordinate length;

determining a longitudinal offset of the webpage template, wherein the longitudinal offset can enable the webpage template to be displayed in the virtual webpage template frame in a centered mode;

and maintaining the abscissa of the editing area in the webpage template unchanged, and increasing the longitudinal offset by the ordinate to obtain the adjusted webpage template.

before obtaining the adjusted web page template, the method further includes:

and maintaining the abscissa of the background area in the webpage template unchanged, and increasing the longitudinal offset by the ordinate.

Optionally, the adapting the web page module to the display screen includes:

alternatively, the first and second electrodes may be,

The device herein may be a server, a PC, a PAD, a mobile phone, etc.

The present application further provides a computer program product adapted to perform a program for initializing the following method steps when executed on a data processing device:

and adapting the webpage template to the display screen.

Optionally, the method further includes:

before obtaining the adjusted web page template, the method further includes:

Optionally, the adapting the web page module to the display screen includes:

alternatively, the first and second electrodes may be,

and adapting the webpage module to the display screen so as to enable the pixel width of the edited area after the coordinate width conversion to be consistent with the pixel width of the display screen. .

As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). The memory is an example of a computer-readable medium.

Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in the process, method, article, or apparatus that comprises the element.

The above are merely examples of the present application and are not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A method for web page adaptation, comprising:

and adapting the webpage template to the display screen.

2. The method of claim 1, wherein the adjusting the plurality of coordinate values of the editing region in the webpage template to make the editing region in the webpage template fully displayed if the virtual webpage template frame corresponds to the screen scale comprises:

3. The method of claim 2, further comprising, prior to adapting the web page template to the display screen: adjusting a plurality of coordinate values of an editing area in the webpage template so that the editing area in the webpage template is displayed in the middle of a virtual webpage template frame corresponding to the screen proportion;

4. The method of claim 3, wherein the web page template further comprises a background area for inserting a background image;

adjusting a background area and an editing area in the webpage template according to the reduction scale; before the obtaining of the adjusted web page template, the method further includes: and maintaining the vertical coordinates of the background area and the editing area in the reduced webpage template unchanged, and increasing the horizontal offset by the horizontal coordinate.

5. The method of claim 1, further comprising:

6. The method of claim 5, wherein the web page template further comprises a background area for inserting a background image;

before obtaining the adjusted web page template, the method further includes:

7. The method of claim 1, wherein said adapting the web page module to the display screen comprises:

alternatively, the first and second electrodes may be,

8. A web page adaptation apparatus, comprising:

and the adaptation unit is used for adapting the webpage template to the display screen.

9. A web page adaptation system, comprising:

the mobile terminal is used for sending a webpage template acquisition instruction to the server and receiving a webpage template which is fed back by the server and is associated with the webpage identifier in the webpage template acquisition instruction; the method is also used for obtaining the area proportion of an editing area in the webpage template and the screen proportion of the display screen, adjusting a plurality of coordinate values of the editing area in the webpage template under the condition that the display screen is determined to be too wide after comparing the area proportion with the screen proportion, so that the editing area in the webpage template is completely displayed under the condition that the virtual webpage template frame corresponds to the screen proportion, and the webpage template is adapted to the display screen.

10. An apparatus comprising a processor, a memory, and a program stored on the memory and executable on the processor, the processor implementing the web page adaptation method of any one of claims 1-7 when executing the program.