CN113407878B - Page adaptation method, display terminal and readable storage medium - Google Patents
Page adaptation method, display terminal and readable storage medium Download PDFInfo
- Publication number
- CN113407878B CN113407878B CN202110945842.4A CN202110945842A CN113407878B CN 113407878 B CN113407878 B CN 113407878B CN 202110945842 A CN202110945842 A CN 202110945842A CN 113407878 B CN113407878 B CN 113407878B
- Authority
- CN
- China
- Prior art keywords
- hot spot
- terminal
- target
- page
- target webpage
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a page adaptation method, a display terminal and a readable storage medium, which comprise the following steps: acquiring a first screen resolution of a first terminal, a second screen resolution of a second terminal and an original image resolution of a target webpage when the target webpage is displayed at the first terminal; determining a first root element font size according to the first screen resolution, and determining a second root element font size according to the second screen resolution; and determining the image resolution of the target webpage when the target webpage is displayed at the second terminal according to the first root element font size, the second root element font size and the original image resolution. The target webpage can be adapted to mobile terminals with different sizes through the font size of the root element, so that the display effect of the target webpage on different mobile terminals is improved.
Description
Technical Field
The invention relates to the technical field of page display, in particular to a page adaptation method, a display terminal and a readable storage medium.
Background
In order to generate a hyperlink in an image hot spot area to improve convenience of user operation, a link jump function in the image hot spot area is mainly realized by configuring an area (area) tag attribute at present. However, the area tag defines the coordinate position by a coordinate (coords) attribute, and the coordinate point of the hot spot region does not change with the adjustment of the display window. Therefore, the webpage with the hot spot area hyperlink generated through the area tag attribute cannot be adapted to different mobile terminals.
Disclosure of Invention
The invention mainly aims to provide a page adaptation method, a display terminal and a readable storage medium, aiming at enabling the same webpage to be adapted to different mobile terminals so as to improve the display effect of the webpage on different display terminals.
In order to achieve the above object, the present invention provides a page adaptation method, which comprises the following steps:
acquiring a first screen resolution of a first terminal, a second screen resolution of a second terminal and an original image resolution of a target webpage when the first terminal displays;
determining a first root element font size according to the first screen resolution, and determining a second root element font size according to the second screen resolution;
and determining the image resolution of the target webpage when the target webpage is displayed at the second terminal according to the first root element font size, the second root element font size and the original image resolution.
Optionally, the step of determining the image resolution of the target webpage when displayed on the second terminal according to the first root element font size, the second root element font size and the original image resolution includes:
determining the scaling of the target webpage when the second terminal displays according to the first root element font size and the second root element font size;
determining the image resolution according to the original image resolution and the scaling.
Optionally, before the step of obtaining the first screen resolution of the first terminal, the second screen resolution of the second terminal, and the original image resolution of the target webpage when the first terminal displays, the method further includes:
loading and displaying a target image;
receiving a setting operation of a hot spot region triggered based on the target image;
and setting at least one hot spot area for the target image according to the setting operation so as to obtain the target webpage.
Optionally, the step of setting at least one hot spot region for the target image according to the setting operation includes:
setting display parameters and jump links of a hot spot area in the target image according to the setting operation, wherein the display parameters comprise shape, rotation angle, position and size;
and generating a hot spot area in the target image according to the display parameter and the jump link.
Optionally, the step of generating a hot spot region in the target image according to the display parameter and the skip link includes:
converting a preset hot spot region model into a form corresponding to the shape, the rotation angle and the size;
dragging the converted hot spot region model to the position in the target image, and adding a jump link for the hot spot region model at the position to generate a hot spot region according to the hot spot region model;
after the hot spot area is generated, the display parameter of the generated hot spot area is in a fixed state, and the display parameter of the hot spot area model is in an editing state.
Optionally, the step of setting display parameters and jump links of the hot spot region in the target image according to the setting operation includes:
setting the shape and the rotation angle according to a first setting operation;
setting the position and the size according to a second setting operation;
and setting the jump link according to a third setting operation.
Optionally, after the step of setting at least one hot spot region for the target image according to the setting operation to obtain the target webpage page, the method further includes:
when code copying operation is received, generating a page layout code of the target webpage, and acquiring the type of an application platform required by the target webpage;
converting the page layout code into a target page layout code adapted to the type of application platform to apply the target page layout code to the type of application platform.
Optionally, before the step of obtaining the first screen resolution of the first terminal, the second screen resolution of the second terminal, and the original image resolution of the target webpage when the first terminal displays, the method includes:
acquiring a first type of the first terminal and a second type of the second terminal;
if the second type is not consistent with the first type, executing the step of acquiring the first screen resolution of the first terminal, the second screen resolution of the second terminal and the original image resolution of the target webpage when the first terminal displays;
and if the second type is consistent with the first type, taking the original image resolution as the image resolution of the target webpage when the target webpage is displayed at the second terminal.
In addition, in order to achieve the above object, the present invention further provides a display terminal, where the display terminal includes a memory, a processor, and a page adaptation program stored on the processor and capable of running on the processor, and the processor implements the steps of the page adaptation method when executing the page adaptation program.
In addition, to achieve the above object, the present invention further provides a readable storage medium, where a page adaptation program is stored, and the page adaptation program, when executed by a processor, implements the steps of the page adaptation method as described above.
In the embodiment of the invention, by acquiring the first screen resolution of the first terminal, the second screen resolution of the second terminal and the original image resolution of the target webpage when the first terminal displays, the first root element font size can be determined according to the first screen resolution, the second root element font size can be determined according to the second screen resolution, and then the image resolution of the target webpage when the second terminal displays can be determined according to the first root element font size, the second root element font size and the original image resolution. Therefore, different mobile terminals can be automatically adapted according to the font size of the first root element, the font size of the second root element and the resolution of the original image, the situation that different mobile terminals cannot be adapted when the webpage with the image hot spot area hyperlink generated through the area tag attribute is generated is avoided, and the display effect of the target webpage when the target webpage is displayed on different display terminals can be improved.
Drawings
Fig. 1 is a schematic structural diagram of a display terminal of a hardware operating environment according to an embodiment of the present invention;
FIG. 2 is a flowchart illustrating a first embodiment of a page adaptation method according to the present invention;
FIG. 3 is a flowchart illustrating a page adaptation method according to a second embodiment of the present invention;
FIG. 4 is a flowchart illustrating a page adaptation method according to a third embodiment of the present invention;
FIG. 5 is a schematic view of a process involved in an application example of the page adaptation method of the present invention;
FIG. 6 is a schematic diagram of a display interface of a hot spot region generation system in an application example of the page adaptation method of the present invention.
The implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
The main solution of the invention is: acquiring a first screen resolution of a first terminal, a second screen resolution of a second terminal and an original image resolution of a target webpage when the first terminal displays; determining a first root element font size according to the first screen resolution, and determining a second root element font size according to the second screen resolution; and determining the image resolution of the target webpage when the target webpage is displayed at the second terminal according to the first root element font size, the second root element font size and the original image resolution.
When the webpage with the hot spot area is generated through the area tag attribute, the coordinate point of the hot spot area cannot change along with the adjustment of the display window, and the coords attribute coordinates corresponding to different mobile terminals are different, so that the webpage with the hot spot area cannot be adapted to different mobile terminals. Therefore, the present invention proposes the above solution, and aims to adapt a web page with a hot spot region to different mobile terminals, so as to improve the display effect of the web page with the hot spot region when the web page is displayed on different mobile terminals.
Referring to fig. 1, fig. 1 is a schematic structural diagram of a display terminal of a hardware operating environment according to an embodiment of the present invention.
As shown in fig. 1, the display terminal may include: a communication bus 1002, a processor 1001, such as a CPU, a user interface 1003, a network interface 1004, and a memory 1005. Wherein a communication bus 1002 is used to enable connective communication between these components. The user interface 1003 may include a Display screen (Display), an input unit such as a Keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface, a wireless interface. The network interface 1004 may optionally include a standard wired interface, a wireless interface (e.g., WI-FI interface). The memory 1005 may be a high-speed RAM memory or a non-volatile memory (e.g., a magnetic disk memory). The memory 1005 may alternatively be a storage device separate from the processor 1001.
Those skilled in the art will appreciate that the display terminal configuration shown in fig. 1 is not intended to be limiting of display terminals and may include more or fewer components than those shown, or some components may be combined, or a different arrangement of components.
In the display terminal shown in fig. 1, the network interface 1004 is mainly used for connecting to a backend server and performing data communication with the backend server; the user interface 1003 is mainly used for connecting a client (user side) and performing data communication with the client; and the processor 1001 may be configured to invoke a page adaptation program stored in the memory 1005 and perform the relevant steps of the various embodiments of the following page adaptation method.
Referring to fig. 2, fig. 2 is a flowchart of a first embodiment of a page adaptation method of the present invention, in this embodiment, the page adaptation method includes the following steps:
step S10: acquiring a first screen resolution of a first terminal, a second screen resolution of a second terminal and an original image resolution of a target webpage when the first terminal displays;
step S20: determining a first root element font size according to the first screen resolution, and determining a second root element font size according to the second screen resolution;
step S30: and determining the image resolution of the target webpage when the target webpage is displayed at the second terminal according to the first root element font size, the second root element font size and the original image resolution.
It should be noted that the first terminal refers to a terminal device, such as a computer, currently adapted to the target webpage; the second terminal refers to a terminal device, such as a mobile phone, to which the target webpage page needs to be adapted; the target webpage refers to a webpage which needs to be subjected to page adaptation after the hot spot area is currently set; the first screen resolution refers to a display resolution of the first terminal, the second screen resolution refers to a display resolution of the second terminal, and an image resolution of a target webpage page, which is referred to by the original image resolution, when the target webpage page is set and displayed on the first terminal.
In order to improve the effectiveness of page adaptation and avoid occupying system resources by performing page adaptation when the page adaptation is not required, before performing the page adaptation, a terminal type (a first type) to which a first terminal belongs and a terminal type (a second type) to which a second terminal belongs may be acquired, and then the first type and the second type are compared to determine whether the page adaptation is required for a target webpage. If the second type is consistent with the first type, the resolution of the first screen is consistent with that of the second screen, and page adaptation is not needed. At this time, the original image resolution may be used as the image resolution of the target webpage when displayed at the second terminal. If the second type is not consistent with the first type, the first screen resolution is not consistent with the second screen resolution, and the target webpage can be adapted to the second terminal only by carrying out page adaptation so as to achieve a better display effect, so that the problem that the target webpage is displayed too small on the second terminal and is inconvenient to look up or the target webpage is displayed too large on the second terminal so that the image definition is poor or exceeds the display interface of the second terminal is avoided.
When the target webpage page needs to be subjected to page adaptation, in order to improve the effectiveness of page adaptation, the page adaptation can be performed based on the font size of the root element. The method specifically comprises the following steps: and determining the image resolution of the target webpage when the target webpage is displayed at the second terminal according to the first root element font size corresponding to the first terminal, the second root element font size corresponding to the second terminal and the original image resolution of the target webpage when the first terminal is displayed. Wherein the first root element font size is available according to a first screen resolution and the second root element font size is available according to a second screen resolution. The method specifically comprises the following steps: a unit conversion scale is preset to convert the first screen resolution to a first root element font size and the second screen resolution to a second root element font size. Here, the root element font size refers to a size unit of a font size relative to a root element (html), and is dynamically adjustable according to different standards according to different screen resolutions of different terminals.
For example, the unit transition scale may be set to 20rem, and at this time, if the first screen resolution is 640pi × 320pi and the second screen resolution is 1280pi × 320pi, the corresponding first root element size is 640pi/20 pi =32pi/rem and the second root element size is 1280pi/20pi =64pi/rem based on the screen width. Of course, the screen height can be used as a reference, and the selection can be reasonably carried out according to specific situations. For example, when the screen width of the first terminal is not consistent with the screen width of the second terminal, the screen width is taken as a reference; when the screen height of the first terminal is not consistent with the screen height of the second terminal, taking the screen height as a reference; when the screen width of the first terminal is not consistent with the screen width of the second terminal and the screen height of the first terminal is not consistent with the screen height of the second terminal, the screen width may be used as a width reference, and the screen height may be used as a height reference, respectively, which is not specifically limited herein.
After the first root element font size and the second root element font size are determined, the image resolution of the target webpage when the target webpage is displayed at the second terminal can be determined according to the first root element font size, the second root element font size and the original image resolution. Specifically, the original image resolution of the target webpage when displayed at the first terminal may be converted into a target size corresponding to the first root element size according to the first root element size, and then the image resolution of the target webpage when displayed at the second terminal may be determined according to the target size and the second root element size. For example, when the first root element size is 32pi/rem and the original image resolution is 320pi × 160pi, the target size obtained by conversion according to the first root element size is 320pi/(32pi/rem) =10rem, and 160pi/(32pi/rem) =5 rem. That is, the resulting target size is 10rem by 5 rem. At this time, if the size of the second root element is 64pi/rem, the image resolution of the target webpage when displayed at the second terminal is 10rem × 64pi/rem =640pi, and 5rem × 64pi/rem =320pi, that is, the image resolution of the target webpage when displayed at the second terminal is 640pi × 320 pi. That is, the quotient of the font size of the second root element and the font size of the first root element may be used as the scaling ratio of the image resolution of the target webpage when the second terminal displays, and the image resolution of the target webpage when the second terminal displays may be determined by scaling the original image resolution according to the scaling ratio.
In the embodiment, the image resolution of the target webpage when the second terminal displays is determined through the font size of the first root element, the font size of the second root element and the resolution of the original image, so that the target webpage can be adapted to terminal devices with different screen sizes, and a better display effect can be achieved on different terminal devices.
Referring to fig. 3, fig. 3 is a flowchart of a second embodiment of the page adaptation method of the present invention, in this embodiment, before step S10, the method further includes:
step S01: loading and displaying a target image;
step S02: receiving a setting operation of a hot spot region triggered based on the target image;
step S03: and setting at least one hot spot area for the target image according to the setting operation so as to obtain the target webpage.
Before performing page adaptation on the target webpage, parameter setting can be performed on a target webpage setting interface of the first terminal to generate the target webpage with at least one hot spot area, and then page adaptation is performed on the target webpage to enable the target webpage to be adapted to the second terminal. It should be noted that the hot spot region refers to an image region that can jump to a preset jump link after being triggered.
Optionally, a picture address can be input on a setting interface of the target webpage page to load the target image; or, importing the target image by the image importing function on the target webpage page setting interface; alternatively, the target image or the like is imported by image scanning. In order to improve the security of the target webpage configuration, in this embodiment, it is preferable that the target image is loaded and displayed in a manner of inputting a picture address on the target webpage setting interface. It should be noted that the target image refers to an image to which a hot spot region needs to be added to obtain a target webpage page.
After the target image is loaded and displayed, the setting operation of the hot spot area of the target image can be triggered on the target webpage page setting interface according to the self requirement, so that at least one hot spot area can be set for the target image according to the triggered setting operation, and the design requirement of a user on the hot spot area of the target webpage page can be flexibly met.
Optionally, when a hot spot region is set for the target image according to the setting operation, a display parameter of the hot spot region in the target image and a jump link of the hot spot region may be set, so as to generate the hot spot region according to the set display parameter in the target image according to the jump link, so as to form the target webpage. Optionally, the settable display parameters include: the shape of the hot spot region, such as a square or circle; the rotation angle of the hot spot region, such as 30 degrees left-handed rotation and 60 degrees right-handed rotation; the fixed position of the hot spot area, such as the position where a preset hot spot area model is located; the size of the hot spot region, such as the length, width, height, radius, etc., is not particularly limited herein.
Different display parameters can be set through different setting modes. In this embodiment, on the one hand, the shape and the rotation angle of the hot spot region may be set by the first setting operation. Alternatively, the first setting operation may be at least one of a click operation, an input operation, and/or a slide operation, and is not particularly limited herein. For example, a desired set shape may be selected from preset shape buttons by a click operation, and a desired set rotation angle may be selected from a progress bar of preset rotation angles; or, the identification information such as a shape name or a shape pattern can be directly input through input operation to acquire a shape matched with the identification information from the hot spot region, and a rotation direction and/or a rotation angle can also be input; alternatively, the shape may be switched by a slide operation to select a shape to be set as desired, and the rotation direction and the rotation angle may be selected by a slide operation.
On the other hand, the position and size of the hot spot region can be set by the second setting operation. Optionally, the second setting operation may be at least one of a click operation, a drag operation, a zoom operation, and/or an input operation, which is not limited in detail herein. For example, the hot spot region may be set at the clicked position by a clicking operation (such that the center of the hot spot region coincides with the clicked position), and the size of the hot spot region may be set by a plurality of clicking operations, for example, when the hot spot region is circular, the center of the circle may be set by a first clicking operation, and the radius (the distance between the clicked position of a second clicking operation and the clicked position of the first clicking operation) may be set by a second clicking operation. Or, the preset hot spot region model can be dragged to a target position through a dragging operation, so that the target position is set as the position of the hot spot region; then, the size of the hot spot region and the like are set by the scaling operation.
In yet another aspect, the jump link may be set through a third setting operation. Alternatively, the third setting operation may be an input operation, an import operation, a scan operation, or the like, and is not particularly limited herein. For example, the input can be directly input in an input box of a jump link on a target webpage setting interface; or, importing the data through a website importing function; or by scanning a two-dimensional code, etc.
Alternatively, the first setting operation, the second setting operation, and the third setting operation may be the same or different. In order to improve convenience of inputting the display parameters and the jump link, the first setting operation, the second setting operation, and the third setting operation in this embodiment are preferably different setting operations. Alternatively, the first setting operation may be a click operation, the second setting operation may be a drag operation, and the third setting operation may be an input operation. Of course, the same display parameter may also support a plurality of different setting modes, and the user may flexibly select the setting mode according to the user's own use habit, which is not specifically limited herein.
After the display parameters and the jump link of the hot spot area in the target image are set according to the setting operation, the hot spot area can be generated in the target image by means of a preset hot spot area model. Specifically, the hot spot region mode may be converted from the initial form to a form corresponding to the set shape, rotation angle, and size, the hot spot region model after the form conversion is dragged on the target image to drag the hot spot region mode to a position where a hot spot region is desired to be generated, then an add link operation is triggered to add a jump link to the hot spot region model, then a copy of the hot spot region model is generated and fixed at the current position of the hot spot region model, and the current hot spot region model is still in an editable state, and adjustment of the display parameter and the jump link may be performed, so as to be used for generating a next hot spot region.
It should be noted that before the link adding operation is triggered, the display parameters and the jump link of the current hot spot area can be set arbitrarily; after the link adding operation is triggered, the display parameters and the jump link of the current hot spot area cannot be changed, and only the display parameters and the jump link of the next hot spot area can be changed.
Optionally, after the hot spot area is generated, the hot spot area can be quickly deleted by clicking the hot spot area; further, in order to realize batch deletion of the hot spot areas, after a plurality of hot spot areas are simultaneously selected through the selection box, the deletion operation of the hot spot areas is triggered.
According to the embodiment, the hot spot area is added in the target image to acquire the target webpage, so that when the target webpage is adapted to different terminal devices, the hot spot area in the target webpage can also be adapted to different terminal devices, the situation that the hot spot area is too large and is easy to operate by mistake or the hot spot area is too small and is not convenient to trigger is avoided, and the convenience of hot spot area operation can be improved.
Referring to fig. 4, fig. 4 is a flowchart of a third embodiment of the page adaptation method of the present invention, in this embodiment, after step S03, the page adaptation method further includes:
step S04: when code copying operation is received, generating a page layout code of the target webpage, and acquiring the type of an application platform required by the target webpage;
step S05: converting the page layout code into a target page layout code adapted to the type of application platform to apply the target page layout code to the type of application platform.
After at least one hot spot area is generated in a target image according to the display parameters and the jump link, if code copying operation is received, a page layout code of a target webpage adaptive to a current application platform can be automatically generated. For example, when the H5 browser configures a hot spot area of a web page, the correspondingly generated page layout code is a page layout code adapted to the H5 browser. However, different platform types have different page layouts and correspondingly adapted page layout codes. Therefore, after the page layout of the target webpage is generated, the page layout code of the target webpage needs to be converted into the target page layout code adapted to the selected application platform type (such as the WeChat applet) according to the type of the pre-selected application platform, so that when the target page layout code is applied to the selected application platform type, the problems of messy codes, disordered layout and the like do not occur.
Specifically, to convert the page layout code of the target web page into the target page layout code, on one hand, mapping between partitions and nodes is implemented, and on the other hand, mapping of a hyperlink function is implemented. Taking an H5 browser and a wechat applet as examples, a Div tag in a page layout code corresponding to the H5 browser may be mapped to a view tag in a page layout code corresponding to the wechat applet; and the href function of the a link in the page layout code corresponding to the H5 browser can be mapped through the function of the custom component of the WeChat applet. The method specifically comprises the following steps: after the page layout code is analyzed into the abstract syntax tree, the abstract syntax tree is traversed and replaced according to the node mapping relation and the function mapping relation between the current application platform and the application platform to be applied to generate a new abstract syntax tree, and then the new abstract syntax tree is compiled to generate a target page layout code.
Optionally, after generating at least one hot spot region in the target image according to the display parameters and the jump link, when the code copying operation is received, if the target webpage is applied to the second terminal, the steps of obtaining the first screen resolution of the first terminal, the second screen resolution of the second terminal and the original image resolution of the target webpage when the target webpage is displayed at the first terminal can be executed first to determine the image resolution of the target webpage when the target webpage is displayed at the second terminal, then generating a page layout code in combination with the page layout of the target web page and the determined image resolution, and converts the page layout code into a target page layout code, so that the page layout code can be suitable for different application platforms, and when different terminal equipment runs the page code, the page code can be displayed according to the display sizes of the different terminal equipment.
In the embodiment, the page layout code is converted into the target page layout code adapted to the selected application platform, so that the target page layout code can be applied to the selected application platform, and the problem that the display effect of the target webpage when the selected application platform is displayed is influenced due to the problems of code disorder, layout disorder and the like caused by the improper code matching is avoided.
Referring to fig. 5, fig. 5 is a flowchart illustrating a specific application example of the page adaptation method of the present invention. The page adaptation method in the application example comprises the following steps:
step S1: constructing a picture hot spot region generation system based on HTML + JS + CSS front-end technology;
step S2: configuring parameter values such as picture addresses, jump links, cross-platform types, image hot spot area shape types and the like;
step S3: dynamically adding, modifying and deleting the hyperlink, and dragging and adjusting the position of the picture at the hot spot;
step S4: calculating and adapting different mobile terminals according to the generated hot spot region model and generating different codes supported by cross-platform;
for example, in the current stage h5, most mobile terminals are arranged in css rem units, and the rem units are font-size attribute values relative to html labels, so that it is only necessary to calculate font-size values of different mobile terminals by js, and it can be ensured that the positions of the hot spot areas relative to the image are all at the same position under the condition that the rem of different mobile terminals is not changed.
Step S5: the generated hot spot area code is quickly copied by one key, so that the quick operation of operators is facilitated;
therefore, all different platform scenes can be integrated, and the effect of cross-platform adaptation is achieved; moreover, the hyperlink of the banner picture area can be rapidly configured, so that the operation efficiency of operators is improved; moreover, the research and development cost of enterprise investment can be reduced, and the development time is saved. An interface diagram of the image hot spot region generation system is built based on the HTML + JS + CSS front-end technology, as shown in FIG. 6.
In addition, an embodiment of the present invention further provides a display terminal, where the display terminal includes a memory, a processor, and a page adaptation program stored on the processor and capable of running on the processor, and the processor implements the steps of the page adaptation method when executing the page adaptation program.
In addition, an embodiment of the present invention further provides a readable storage medium, where a page adaptation program is stored on the readable storage medium, and the page adaptation program, when executed by a processor, implements the steps of the page adaptation method described above.
It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or system 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 system. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or system that comprises the element.
The above-mentioned serial numbers of the embodiments of the present invention are merely for description and do not represent the merits of the embodiments.
Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium (e.g., ROM/RAM, magnetic disk, optical disk) as described above and includes instructions for enabling a terminal device (e.g., a mobile phone, a computer, a server, a television, or a network device) to execute the method according to the embodiments of the present invention.
The above description is only a preferred embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes, which are made by using the contents of the present specification and the accompanying drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (6)
1. A page adaptation method is characterized by comprising the following steps:
loading and displaying a target image;
receiving a setting operation of a hot spot region triggered based on the target image;
setting display parameters and jump links of a hot spot area in the target image according to the setting operation, wherein the display parameters comprise shape, rotation angle, position and size;
converting a preset hot spot region model into a form corresponding to the shape, the rotation angle and the size;
dragging the converted hot spot region model to the position in the target image, and when detecting an adding link operation, adding a jump link to the hot spot region model to generate a copy of the hot spot region model;
fixing the copy at the current position of the hot spot region model, generating a hot spot region for the target image, and taking the target image after the hot spot region is generated as a target webpage;
acquiring a first screen resolution of a first terminal, a second screen resolution of a second terminal and an original image resolution of a target webpage when the first terminal displays;
determining a first root element font size according to the first screen resolution, and determining a second root element font size according to the second screen resolution;
determining the scaling of the target webpage when the second terminal displays according to the first root element font size and the second root element font size;
determining the image resolution of the target webpage when the second terminal displays according to the original image resolution and the scaling;
after the hot spot area is generated, the display parameter of the generated hot spot area is in a fixed state, and the display parameter of the hot spot area model is in an editing state.
2. The page adaptation method according to claim 1, wherein the step of setting display parameters of a hot spot region in the target image and a jump link according to the setting operation comprises:
setting the shape and the rotation angle according to a first setting operation;
setting the position and the size according to a second setting operation;
and setting the jump link according to a third setting operation.
3. The page adaptation method according to claim 1, wherein after the step of dragging the converted hot spot region model to the position in the target image and adding a jump link to the hot spot region model at the position to generate a target web page provided with a hot spot region according to the hot spot region model, the method further comprises:
when code copying operation is received, generating a page layout code of the target webpage, and acquiring the type of an application platform required by the target webpage;
converting the page layout code into a target page layout code adapted to the type of application platform to apply the target page layout code to the type of application platform.
4. The page adaptation method of claim 1, wherein the step of obtaining a first screen resolution of the first terminal, a second screen resolution of the second terminal, and an original image resolution of the target web page when displayed at the first terminal is preceded by:
acquiring a first type of the first terminal and a second type of the second terminal;
if the second type is not consistent with the first type, executing the step of acquiring the first screen resolution of the first terminal, the second screen resolution of the second terminal and the original image resolution of the target webpage when the first terminal displays;
and if the second type is consistent with the first type, taking the original image resolution as the image resolution of the target webpage when the target webpage is displayed at the second terminal.
5. A display terminal, characterized in that the display terminal comprises a memory, a processor and a page adaptation program stored in the memory and operable on the processor, and the processor implements the steps of the page adaptation method according to any one of claims 1-4 when executing the page adaptation program.
6. A readable storage medium, characterized in that the readable storage medium has stored thereon a page adaptation program, which when executed by a processor implements the steps of the page adaptation method according to any one of claims 1-4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110945842.4A CN113407878B (en) | 2021-08-18 | 2021-08-18 | Page adaptation method, display terminal and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110945842.4A CN113407878B (en) | 2021-08-18 | 2021-08-18 | Page adaptation method, display terminal and readable storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113407878A CN113407878A (en) | 2021-09-17 |
| CN113407878B true CN113407878B (en) | 2022-02-08 |
Family
ID=77688876
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110945842.4A Active CN113407878B (en) | 2021-08-18 | 2021-08-18 | Page adaptation method, display terminal and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113407878B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115080027B (en) * | 2022-08-24 | 2023-01-06 | 深圳市信润富联数字科技有限公司 | Web page automatic adaptation method, device, equipment and storage medium |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103593196A (en) * | 2013-11-25 | 2014-02-19 | 深信服网络科技（深圳）有限公司 | Page layout self-adaptation method and device |
| CN104899217A (en) * | 2014-03-06 | 2015-09-09 | 阿里巴巴集团控股有限公司 | Method and apparatus for implementing customized function |
| CN108647348A (en) * | 2018-05-15 | 2018-10-12 | 平安普惠企业管理有限公司 | Textual presentation method, apparatus, equipment and storage medium |
| CN109254818A (en) * | 2018-08-28 | 2019-01-22 | 北京影谱科技股份有限公司 | For the Pixel-level localization method and device of browser different resolution |
| CN110147230A (en) * | 2019-04-18 | 2019-08-20 | 浙江数链科技有限公司 | Page adaptation method, apparatus, equipment and storage medium |
| CN110795666A (en) * | 2019-10-18 | 2020-02-14 | 腾讯科技（深圳）有限公司 | Webpage generation method, device, terminal and storage medium |
| CN110837617A (en) * | 2019-10-11 | 2020-02-25 | 平安科技（深圳）有限公司 | Webpage self-adaptive layout method, server and computer readable storage medium |
| CN111984351A (en) * | 2020-08-07 | 2020-11-24 | 中移（杭州）信息技术有限公司 | Page adaptation method, electronic device and computer-readable storage medium |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| BE1023607B1 (en) * | 2016-12-22 | 2017-05-15 | Valipat Sa | METHOD AND SYSTEM FOR COLLECTING DIGITAL DOCUMENTS FROM A PLURALITY OF SOURCE |
| CN110502710A (en) * | 2019-07-11 | 2019-11-26 | 平安普惠企业管理有限公司 | Page generation method, device, equipment and readable storage medium storing program for executing |
-
2021
- 2021-08-18 CN CN202110945842.4A patent/CN113407878B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103593196A (en) * | 2013-11-25 | 2014-02-19 | 深信服网络科技（深圳）有限公司 | Page layout self-adaptation method and device |
| CN104899217A (en) * | 2014-03-06 | 2015-09-09 | 阿里巴巴集团控股有限公司 | Method and apparatus for implementing customized function |
| CN108647348A (en) * | 2018-05-15 | 2018-10-12 | 平安普惠企业管理有限公司 | Textual presentation method, apparatus, equipment and storage medium |
| CN109254818A (en) * | 2018-08-28 | 2019-01-22 | 北京影谱科技股份有限公司 | For the Pixel-level localization method and device of browser different resolution |
| CN110147230A (en) * | 2019-04-18 | 2019-08-20 | 浙江数链科技有限公司 | Page adaptation method, apparatus, equipment and storage medium |
| CN110837617A (en) * | 2019-10-11 | 2020-02-25 | 平安科技（深圳）有限公司 | Webpage self-adaptive layout method, server and computer readable storage medium |
| CN110795666A (en) * | 2019-10-18 | 2020-02-14 | 腾讯科技（深圳）有限公司 | Webpage generation method, device, terminal and storage medium |
| CN111984351A (en) * | 2020-08-07 | 2020-11-24 | 中移（杭州）信息技术有限公司 | Page adaptation method, electronic device and computer-readable storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113407878A (en) | 2021-09-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110968309B (en) | Template generation method and device, electronic equipment and storage medium | |
| CN108920048B (en) | Large drawing browsing method, system, server and computer readable storage medium | |
| CN111949351A (en) | Page rendering method, device, equipment and computer readable storage medium | |
| US8645823B1 (en) | Converting static websites to resolution independent websites in a web development environment | |
| CN107229760B (en) | Storage medium, electronic device, the display methods of web page contents and device | |
| US20170169122A1 (en) | Webpage display method, mobile terminal, intelligent terminal, program and storage medium | |
| CN113741898B (en) | Form generation method, device and equipment | |
| CN113407878B (en) | Page adaptation method, display terminal and readable storage medium | |
| CN112036123A (en) | PDF (Portable document Format) generation method, device and equipment based on webpage and storage medium | |
| CN107391914B (en) | Parameter display method, device and equipment | |
| JP2021163504A (en) | Information processing program, information processing apparatus and information processing method | |
| CN106155674B (en) | Method and device for displaying report page | |
| CN109543166B (en) | House property poster template generation method, server and computer readable storage medium | |
| CN110728736A (en) | Picture labeling method and device, computer equipment and storage medium | |
| US20170060511A1 (en) | Portable drawing display device and drawing display system | |
| CN108846883B (en) | Quick drawing method and system for fractal graph, user equipment and storage medium | |
| CN112306488A (en) | Combined icon generation method, device, equipment and computer readable storage medium | |
| JP4191670B2 (en) | Data file management apparatus, data file management processing method and program | |
| CN113778429A (en) | Walk-through method, walk-through device and storage medium | |
| JP6520674B2 (en) | Display system, display terminal, display method, and display program | |
| CN112434500A (en) | Resume generation method, device, client, server and storage medium | |
| CN112764644B (en) | Object display change method, device, equipment and computer readable storage medium | |
| JP2005208706A (en) | Position information acquisition apparatus and method, display media creation apparatus, and the like | |
| JP4444766B2 (en) | Web page layout setting device, Web page layout setting method, Web page layout setting program, and recording medium | |
| JP5817957B2 (en) | Information processing apparatus, information processing method, and program |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |