CN107608668B - Method and device for making and compatibly displaying H5 page, terminal equipment and storage medium - Google Patents
Method and device for making and compatibly displaying H5 page, terminal equipment and storage medium Download PDFInfo
- Publication number
- CN107608668B CN107608668B CN201710862836.6A CN201710862836A CN107608668B CN 107608668 B CN107608668 B CN 107608668B CN 201710862836 A CN201710862836 A CN 201710862836A CN 107608668 B CN107608668 B CN 107608668B
- Authority
- CN
- China
- Prior art keywords
- page
- mobile phone
- displaying
- making
- editing interface
- 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
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method for making and compatibly displaying an H5 page, which comprises the following steps: detecting the selected elements; when an event for moving the element is monitored, acquiring the position of the element in a page in real time; wherein the page comprises an H5 editing interface; judging that the element is positioned in the H5 editing interface according to the position of the element in the page; and when the position of the element in the page is judged to exceed any preset visual area, displaying out-of-range prompt information. The invention also provides a device, terminal equipment and storage medium for compatible display of H5 page production, which can dynamically calculate the display condition of H5 page elements in different terminal equipment in real time, assist H5 page production and achieve the purpose of compatible display of H5 page in different terminal equipment.
Description
Technical Field
The invention relates to the field of H5 page making, in particular to a method, a device, terminal equipment and a storage medium for making and compatibly displaying an H5 page.
Background
The H5 page refers to a page made based on HTML 5. HTML5 was designed with the goal of supporting multimedia on mobile devices, and new syntactic features were introduced to support this, such as video, audio, and canvas tags. HTML5 also introduces new functionality that can actually change the way a user interacts with a document.
Because the HTML5 gives a better meaning and structure to the web page, the H5 page developed based on the HTML5 is also widely applied to the scenes of recruitment publicity, new product publicity, campaign lottery, campaign voting and the like. Many companies see business opportunities, and H5 page making tools emerge like a bamboo shoot in the spring after rain.
In the process of making the H5 page by using the H5 page making tool, because the size problem of mobile phones of different models needs to be considered, the placement positions of page elements need to be adjusted to avoid that some page elements located at the edge of the page cannot be completely displayed. The prior art generally has two solutions as follows: the first scheme is as shown in fig. 1, the position and size information of the lowest element is directly observed in the element information, and the element position is adjusted after self-calculation according to different proportions of the length and the width of mobile phone screens of different models; the second solution is to use a long page when the H5 page is displayed, and the user can drag the page to view the complete page.
Disclosure of Invention
The disadvantages of the first solution are: the length-width ratios of different machine types need to be calculated by a page maker, and when elements are dragged and dropped automatically, the positions and sizes of the elements are controlled manually, so that the operation is very inconvenient, inaccurate and difficult.
The disadvantages of the second solution are: although the long page can avoid the elements from being blocked, the user needs to drag the page, so that the operation of the user is increased, and the user experience is poor.
In view of the above problems, an object of the present invention is to provide a method, an apparatus, a terminal device and a storage medium for making and displaying an H5 page, which can achieve the purpose of making and displaying an H5 page in different mobile phone models when making an H5 page.
The invention provides a method for making and compatibly displaying an H5 page, which comprises the following steps:
detecting the selected elements;
when an event for moving the element is monitored, acquiring the position of the element in a page in real time; wherein the page comprises an H5 editing interface;
judging that the element is positioned in the H5 editing interface according to the position of the element in the page;
and when the position of the element in the page is judged to exceed any preset visual area, displaying out-of-range prompt information.
Preferably, the determining, according to the position of the element in the page, that the element is located in the H5 editing interface specifically includes:
and judging that the element is positioned in the H5 editing interface according to the position of the element in a page, the length and the width of the element and the relative position of the H5 editing interface in the page.
Preferably, the H5 editing interface takes the straight line on which the top is located as a first reference line, and takes the straight line on which any vertical edge is located as a second reference line;
when the position of the element in the page is judged to exceed the visual area of any mobile phone in the mobile phone information base, displaying the prompt message exceeding the range specifically comprises:
when the element is judged to exceed the screen visible height of any mobile phone in the mobile phone information base according to the position of the element in the page and the first reference line, displaying an auxiliary line to mark the screen visible height of the mobile phone; and/or
And when the element is judged to exceed the screen visible width of any mobile phone in the mobile phone information base according to the position of the element in the page and the second reference line, displaying an auxiliary line to mark the screen visible width of the mobile phone.
Preferably, the H5 editing interface takes the straight line on which the top is located as a first reference line, and takes the straight line on which any vertical edge is located as a second reference line;
when the position of the element in the page is judged to exceed the visual area of any mobile phone in the mobile phone information base, displaying the prompt message exceeding the range specifically comprises:
when the element is judged to exceed the screen visible height of any mobile phone in the mobile phone information base according to the position of the element in the page, the length of the element and the first reference line, displaying an auxiliary line to mark the screen visible height of the mobile phone; and/or
And when the element is judged to exceed the screen visible width of any mobile phone in the mobile phone information base according to the position of the element in the page, the width of the element and the second reference line, displaying an auxiliary line to mark the screen visible width of the mobile phone.
Preferably, when the event of moving the element is monitored, the obtaining of the position of the element in the page in real time specifically includes:
when an event that the element is dragged through a control medium is monitored, acquiring the position of the control medium in a page and the position of the control medium relative to the element in real time;
and acquiring the position of the element in the page according to the position of the control medium in the page and the position of the control medium relative to the element.
The invention also provides a device for making and compatibly displaying the H5 page, which comprises the following components:
the detection module is used for detecting the selected elements;
the position acquisition module is used for acquiring the position of the element in a page in real time when an event for moving the element is monitored; wherein the page comprises an H5 editing interface;
the position judging module is used for judging that the element is positioned in the H5 editing interface according to the position of the element in the page;
and the information prompt module is used for displaying the prompt information beyond the range when the position of the element in the page is judged to exceed any preset visual area.
Preferably, the position determining module specifically includes:
and judging that the element is positioned in the H5 editing interface according to the position of the element in a page, the length and the width of the element and the relative position of the H5 editing interface in the page.
Preferably, the H5 editing interface takes the straight line on which the top is located as a first reference line, and takes the straight line on which any vertical edge is located as a second reference line;
the information prompting module specifically includes:
the first visual height judging unit is used for displaying an auxiliary line to mark the visual height of the screen of any mobile phone in the mobile phone information base when judging that the element exceeds the visual height of the screen of the mobile phone according to the position of the element in the page and the first reference line; and/or
And the first visible width judging unit is used for displaying an auxiliary line to mark the visible width of the screen of any mobile phone in the mobile phone information base when judging that the element exceeds the visible width of the screen of any mobile phone in the mobile phone information base according to the position of the element in the page and the second reference line.
Preferably, the H5 editing interface takes the straight line on which the top is located as a first reference line, and takes the straight line on which any vertical edge is located as a second reference line;
the information prompting module specifically includes:
the second visual height judging unit is used for displaying an auxiliary line to mark the screen visual height of any mobile phone in the mobile phone information base when judging that the element exceeds the screen visual height of the mobile phone according to the position of the element in the page, the length of the element and the first reference line; and/or
And the second visible width judging unit is used for displaying the auxiliary line to mark the visible width of the screen of any mobile phone in the mobile phone information base when judging that the element exceeds the visible width of the screen of the mobile phone according to the position of the element in the page, the width of the element and the second reference line.
Preferably, the position acquiring module specifically includes:
the control medium position acquisition unit is used for acquiring the position of the control medium in a page and the position of the control medium relative to the element in real time when an event that the element is dragged by the control medium is monitored;
and the element position acquisition unit is used for acquiring the position of the element in the page according to the position of the manipulation medium in the page and the position of the manipulation medium relative to the element.
The invention also provides terminal equipment for H5 page making compatible display, which comprises a processor, a memory and a computer program stored in the memory and configured to be executed by the processor, wherein the processor executes the computer program to realize the method for H5 page making compatible display.
The invention also provides a computer-readable storage medium, which is characterized by comprising a stored computer program, wherein when the computer program runs, a device where the computer-readable storage medium is located is controlled to execute any one of the methods for making a compatible display of the H5 page.
The invention provides a method, a device, terminal equipment and a storage medium for making and compatibly displaying an H5 page, wherein when a selected element is detected in the page and an event for moving the element is monitored, the position of the element in the page is acquired in real time, and after the element is judged to be positioned in an H5 editing interface according to the position of the element in the page, when the position of the element in the page is judged to be beyond any preset visible area, the prompt information beyond the range is displayed. According to the invention, the display conditions of the elements of the H5 page on different terminal devices are dynamically calculated in real time, the H5 page making is assisted, and a user can clearly know whether the elements in the page are shielded in the terminal devices with different resolutions without complex calculation in the H5 making process, so that the purpose of simply and conveniently compatible with different terminal devices and the resolutions thereof is achieved.
Drawings
In order to more clearly illustrate the technical solution of the present invention, the drawings needed to be used in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other drawings can be obtained according to the drawings without creative efforts.
Fig. 1 is a schematic diagram of a prior art implementation of the background art.
Fig. 2 is a flowchart illustrating a method for making a compatible display of an H5 page according to a first embodiment of the present invention.
Fig. 3 is a schematic diagram of an element provided in an embodiment of the present invention displaying a prompt message beyond a visualization area of a certain mobile phone in a mobile phone information base when a page is moved.
Fig. 4 is a schematic view of a partially enlarged view of fig. 3.
Fig. 5 is a schematic structural diagram of an apparatus for making a compatible display of H5 pages according to a fifth embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
In order to facilitate an understanding of the invention, some embodiments of the invention will be described further below.
Referring to fig. 2, a first embodiment of the present invention provides a method for making a compatible display on a H5 page, which is executed by a terminal device for making a compatible display on a H5 page, and includes the following steps:
and S11, detecting the selected element.
In the embodiment of the present invention, the H5 page making compatible display terminal device detects whether there is a selected element in a page in real time, where the selected method includes, but is not limited to, mouse click selection, touch pad click selection, touch screen click selection, and the like, and the present invention is not limited to this. When a selected element is detected in a page, a move event is bound for the element, for example, when the element is selected by a mouse, a mouse drag event is bound for the element and real-time monitoring is performed.
In the embodiment of the present invention, the elements may be pictures, control icons, artistic words, multimedia elements, and the like, and the present invention is not particularly limited.
S12, when the event of moving the element is monitored, the position of the element in the page is obtained in real time; wherein the page includes an H5 editing interface.
As shown in fig. 3, in the embodiment of the present invention, when the H5 page making compatible display terminal device monitors an event of moving the element, the position of the element 03 in the page 01 is obtained in real time, where the page 01 includes an H5 editing interface 02. The moving mode of the elements comprises the following modes: 1. dragging the element by a mouse to move the element; 2. after the element is selected, moving the element through a direction key on a keyboard or through a touch pad; 3. if the current display screen has a touch-sensitive surface, movement of the element through touch operation is also supported; 4. the elements may also be moved by a stylus if supported by the device hardware. These solutions are all within the scope of the present invention.
S13, judging that the element is positioned in the H5 editing interface according to the position of the element in the page.
In the implementation of the invention, after the page 01 is opened, the H5 page making compatible display terminal equipment acquires the relative coordinate position (x1, y1) of the H5 editing interface 02 in the whole page 01. When the selected element is detected, the H5 page making compatible display terminal equipment acquires and stores data of the length L1 and the width W1 of the element, so as to judge that the element is positioned in the H5 editing interface according to the position of the element in the page, the data of the length L1 and the width W1 of the element and the relative position of the H5 editing interface in the page.
And S14, when the position of the element in the page is judged to exceed any preset visual area, displaying out-of-range prompt information.
In the embodiment of the present invention, the any preset visualization area includes a visualization area of any type of terminal device in a terminal library, the terminal device includes smartphones of various models, tablet computers of various models, laptops of various models, desktop computers of various models, and the like, after the H5 page making compatible display terminal device determines that the element is located in the H5 editing interface, it determines whether the position of the element in the page exceeds the visualization area of any type of terminal device in the terminal library, for example, exceeds the visualization area of a certain mobile phone in the terminal library, if so, the H5 page making compatible display terminal device displays prompt information exceeding the range to remind the client to reposition the element position, and when the H5 page making compatible display terminal device detects that the element is deselected, hiding the prompt message; if not, no information is displayed.
In summary, the invention provides a method for making a compatible display of an H5 page, which obtains the position of a selected element in the page in real time when the element is detected and an event for moving the element is monitored, judging that the element is positioned in the H5 editing interface according to the position of the element in the page, when the position of the element in the page is judged to exceed any preset visual area, displaying out-of-range prompt information, dynamically calculating the display condition of the H5 page element on different terminal devices in real time, the method helps a user to make the H5 page, and the user can clearly know whether elements in the page are shielded in terminal equipment with different resolutions without complex calculation in the process of making the H5, so that the aim of simply and conveniently being compatible with different terminal equipment and the resolutions of the terminal equipment is fulfilled.
Second embodiment of the invention:
referring to fig. 4, based on the first embodiment of the present invention, the H5 editing interface uses the straight line on the top as the first reference line, and uses the straight line on any vertical edge as the second reference line.
Then the step S14 specifically includes:
and when the element is judged to exceed the screen visible height of any mobile phone in the mobile phone information base according to the position of the element in the page and the first reference line, displaying an auxiliary line to mark the screen visible height of the mobile phone.
In the embodiment of the present invention, the H5 page making compatible display terminal device obtains the position of the lower edge of the element in the page in real time, for example, when the H5 page making compatible display terminal device drags the element by a cursor, the position of the lower edge of the element in the page is obtained by obtaining the relative position of the cursor in the page and the relative position of the cursor in the element, then the H5 page making compatible display terminal device calculates the distance from the lower edge of the element to the first reference line in the moving process in real time, when it is determined that the value of the distance from the lower edge of the element to the first reference line exceeds the screen visible height of any mobile phone in the mobile phone information base, the auxiliary line 04 is displayed to mark the screen visible height of the mobile phone, and a prompt text can be displayed to prompt the user to exceed the visual area of the mobile phone, the display form of the prompt message is not limited, wherein the cursor is a moving mark correspondingly generated on the screen when the user moves a mouse, a touch pad or a touch pen.
And/or when the element is judged to exceed the screen visible width of any mobile phone in the mobile phone information base according to the position of the element in the page and the second reference line, displaying an auxiliary line 04 to mark the screen visible width of the mobile phone.
In the embodiment of the present invention, the straight line of any vertical edge may be a straight line of a left edge, or a straight line of a right edge, for example, the straight line of the right edge is taken as a second reference line, the H5 page making compatible display terminal device obtains the position of the left edge of the element in the page in real time, for example, when the H5 page making compatible display terminal device drags the element by touch pressing, the position of the left edge of the element in the page is obtained by obtaining the relative position of touch pressure in the page caused by the touch pressing and the relative position of the touch pressure in the element, then the H5 page making compatible display terminal device calculates the distance from the left edge of the element to the second reference line in real time during the moving process, when it is determined that the value of the distance from the left edge of the element to the second reference line exceeds the visible width of the screen of any mobile phone in the mobile phone information base, an auxiliary line 04 is displayed to mark the visible width of the screen of the mobile phone.
The third embodiment of the present invention:
referring to fig. 2 and fig. 3, based on the first embodiment of the present invention, the H5 editing interface uses the straight line on the top as the first reference line, and uses the straight line on any vertical edge as the second reference line.
Then the step S14 specifically includes:
and when the element is judged to exceed the screen visible height of any mobile phone in the mobile phone information base according to the position of the element in the page, the length of the element and the first reference line, displaying an auxiliary line to mark the screen visible height of the mobile phone.
In this embodiment of the present invention, the H5 page making compatible display terminal device obtains a coordinate position (x2, y2) of a certain point on the upper edge of the element in the page in real time, the H5 page making compatible display terminal device obtains a relative coordinate position (x1, y1) of the H5 editing interface in the whole page, a distance H between the upper edge of the element and the top of the H5 editing interface is calculated according to the coordinate position (x2, y2) of any point on the upper edge of the element in the page and the relative coordinate position (x1, y1) of the H5 editing interface in the whole page, where H is y2-y1, a length L1 of the element is obtained, and then the H5 page making compatible display terminal device calculates a distance H1 from the element to the first reference line in real time during the moving process, where H1 is H + L1, and when it is determined that a value of the distance H1 from the element to the first reference line exceeds a height of a mobile phone database of visual information of mobile phone And displaying the auxiliary line to mark the visible height of the screen of the mobile phone, and displaying reminding characters to remind a user of exceeding the visual area of the mobile phone.
It should be noted that, the H5 page making compatible display terminal device may also obtain the coordinate position of the center point of the element in the page, and obtain the distance from the element to the first reference line through the coordinate position, the length of the element, and the relative coordinate position of the H5 editing interface in the whole page, or the H5 page making compatible display terminal device may also obtain the coordinate of the position of the element 1/4, the position of 1/5, or the position of 1/8, and obtain the distance from the element to the first reference line by combining the length of the element and the relative coordinate position of the H5 editing interface in the whole page.
And/or displaying an auxiliary line to mark the screen visible width of the mobile phone when the element is judged to exceed the screen visible width of any mobile phone in the mobile phone information base according to the position of the element in the page, the width of the element and the second reference line.
In this embodiment of the present invention, the straight line of any vertical edge may be a straight line of a left edge, or a straight line of a right edge, for example, the straight line of the right edge is taken as a second reference line, the H5 page making compatible display terminal device obtains a coordinate position (x3, y3) of any point of the right edge of the element in the page in real time, the H5 page making compatible display terminal device obtains a relative coordinate position (x1, y1) of the H5 editing interface in the whole page, a distance W from the right edge of the element to the second reference line of the H5 editing interface is calculated by the coordinate position (x3, y3) of any point of the right edge of the element in the whole page and the relative coordinate position (x1, y1) of the H5 editing interface in the whole page, where W is x2-x1, a width W1 of the element is obtained, and then the H5 page making compatible display terminal device calculates the distance W from the right edge to the second reference line of the element in real time in the moving process And when the numerical value of the distance W from the element to the second reference line exceeds the screen visible width of any mobile phone in the mobile phone information base, displaying an auxiliary line 04 to mark the screen visible width of the mobile phone, and displaying a reminding character to remind a user of the visual area of the mobile phone.
It should be noted that, the H5 page making compatible display terminal device may also obtain coordinates of any point of the center point, the 1/4 position, the 1/5 position, or the 1/8 position of the element, and obtain the distance from the element to the second reference line by combining the width of the element and the relative coordinate position of the H5 editing interface in the whole page.
It should be noted that, in other embodiments of the present invention, the lower edge or the left edge of the H5 editing interface may also be selected as a reference line, which may be set according to the needs of a user, and these schemes are within the protection scope of the present invention and are not described herein again.
It should be noted that, when the position of the element in the page exceeds the visible width and the visible height of the multiple types of terminal devices, the assistant lines corresponding to the multiple types of mobile terminal devices may be displayed at the same time, or only the assistant line of the mobile terminal device with the largest exceeding amplitude may be displayed, for example, when the position of the element in the page exceeds the visible width or the visible height of the multiple types of mobile phones, the assistant line corresponding to each type of mobile phone may be displayed at the same time, or only the assistant line of the mobile phone with the largest exceeding amplitude may be displayed, which are all within the protection scope of the present invention.
The fourth embodiment of the present invention:
on the basis of the first embodiment, the second embodiment, or the third embodiment of the present invention, when the event of moving the element is monitored, the real-time obtaining of the position of the element in the page specifically includes:
when an event that the element is moved through the manipulation medium is monitored, the position of the manipulation medium in the page and the position of the manipulation medium relative to the element are obtained in real time.
In the embodiment of the present invention, the manipulation medium includes a mouse, a finger, a touch pen, and the like, and for example, the finger may be moved on a touch panel of a notebook computer to control the dragging element, or the finger may be used to touch, press and move on a screen allowing a touch operation to control the dragging element. When an event that a user moves the element through an operation medium is monitored, acquiring the coordinate position of a cursor on a display screen corresponding to the operation medium in a page coordinate system and the coordinate position of the cursor on the display screen corresponding to the operation medium in an element coordinate system controlled by the cursor in real time, for example, a coordinate system is established by taking the upper left corner of the page as an origin, and a coordinate system is established by taking the upper left corner of the element by the element.
And acquiring the position of the element in the page according to the position of the control medium in the page and the position of the control medium relative to the element.
In the embodiment of the invention, the position of the element in the page is calculated according to the coordinate position of the cursor on the display screen corresponding to the control medium in the page coordinate system and the coordinate position of the cursor on the display screen corresponding to the control medium in the element coordinate system of the element controlled by the cursor.
Referring to fig. 5, a fifth embodiment of the present invention further provides a device for making compatible display of H5 pages, including:
and the detection module 11 is used for detecting the selected elements.
The position acquisition module 12 is configured to acquire a position of the element in a page in real time when an event of moving the element is monitored; wherein the page includes an H5 editing interface.
And a position judging module 13, configured to judge, according to a position of the element in a page, that the element is located in the H5 editing interface.
And the information prompt module 14 is configured to display the prompt information exceeding the range when it is determined that the position of the element in the page exceeds any preset visual area.
Preferably, the position determining module 13 specifically includes:
and judging that the element is positioned in the H5 editing interface according to the position of the element in a page, the length and the width of the element and the relative position of the H5 editing interface in the page.
Preferably, the H5 editing interface takes the straight line on which the top is located as a first reference line, and takes the straight line on which any vertical edge is located as a second reference line.
The information prompting module 14 specifically includes:
and the first visual height judging unit is used for displaying an auxiliary line to mark the visual height of the screen of any mobile phone in the mobile phone information base when judging that the element exceeds the visual height of the screen of any mobile phone in the mobile phone information base according to the position of the element in the page and the first reference line. And/or
And the first visible width judging unit is used for displaying an auxiliary line to mark the visible width of the screen of any mobile phone in the mobile phone information base when judging that the element exceeds the visible width of the screen of any mobile phone in the mobile phone information base according to the position of the element in the page and the second reference line.
Preferably, the H5 editing interface takes the straight line on which the top is located as a first reference line, and takes the straight line on which any vertical edge is located as a second reference line.
The information prompting module 14 specifically includes:
and the second visual height judging unit is used for displaying an auxiliary line to mark the visual height of the screen of any mobile phone in the mobile phone information base when judging that the element exceeds the visual height of the screen of the mobile phone according to the position of the element in the page, the length of the element and the first reference line. And/or
And the second visible width judging unit is used for displaying the auxiliary line to mark the visible width of the screen of any mobile phone in the mobile phone information base when judging that the element exceeds the visible width of the screen of the mobile phone according to the position of the element in the page, the width of the element and the second reference line.
Preferably, the position obtaining module 12 specifically includes:
and the control medium position acquisition unit is used for acquiring the position of the control medium in a page and the position of the control medium relative to the element in real time when an event that the element is dragged through the control medium is monitored.
And the element position acquisition unit is used for acquiring the position of the element in the page according to the position of the manipulation medium in the page and the position of the manipulation medium relative to the element.
The sixth embodiment of the invention provides a terminal device for making and compatibly displaying H5 pages. The terminal device for H5 page creation compatible display of this embodiment includes: a processor, a memory, and a computer program, such as an H5 page making compatible display program, stored in the memory and executable on the processor. The processor, when executing the computer program, implements the steps in each of the above embodiments of the H5 page making compatible display method, such as step S12 shown in fig. 2. Alternatively, the processor implements the functions of the modules/units in the above device embodiments when executing the computer program, such as the position determination module.
Illustratively, the computer program may be partitioned into one or more modules/units that are stored in the memory and executed by the processor to implement the invention. The one or more modules/units may be a series of computer program instruction segments capable of performing specific functions, which are used for describing the execution process of the computer program in the H5 page making compatible display terminal device.
The terminal device for making and compatibly displaying the H5 page can be a desktop computer, a notebook, a palm computer, a cloud server and other computing devices. The terminal device for making the H5 page compatible display can include, but is not limited to, a processor and a memory. Those skilled in the art will appreciate that more or fewer components than those illustrated may be included, or certain components may be combined, or different components, for example, the H5 page making compatible display terminal device may also include input output devices, network access devices, buses, etc.
The Processor may be a Central Processing Unit (CPU), other general purpose Processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), an off-the-shelf Programmable Gate Array (FPGA) or other Programmable logic device, discrete Gate or transistor logic, discrete hardware components, etc. The general processor may be a microprocessor or the processor may be any conventional processor or the like, the processor is a control center of the H5 page making compatible display terminal device, and various interfaces and lines are used to connect various parts of the whole H5 page making compatible display terminal device.
The memory can be used for storing the computer programs and/or modules, and the processor can realize various functions of the terminal equipment for H5 page making compatible display by running or executing the computer programs and/or modules stored in the memory and calling the data stored in the memory. The memory may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required by at least one function (such as a sound playing function, an image playing function, etc.), and the like; the storage data area may store data (such as audio data, a phonebook, etc.) created according to the use of the cellular phone, and the like. In addition, the memory may include high speed random access memory, and may also include non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), at least one magnetic disk storage device, a Flash memory device, or other volatile solid state storage device.
Wherein, the terminal device integrated module/unit for making compatible display of H5 page can be stored in a computer readable storage medium if it is realized in the form of software functional unit and sold or used as independent product. Based on such understanding, all or part of the flow of the method according to the embodiments of the present invention may also be implemented by a computer program, which may be stored in a computer-readable storage medium, and when the computer program is executed by a processor, the steps of the method embodiments may be implemented. Wherein the computer program comprises computer program code, which may be in the form of source code, object code, an executable file or some intermediate form, etc. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, usb disk, removable hard disk, magnetic disk, optical disk, computer Memory, Read-Only Memory (ROM), Random Access Memory (RAM), electrical carrier wave signals, telecommunications signals, software distribution medium, and the like. It should be noted that the computer readable medium may contain content that is subject to appropriate increase or decrease as required by legislation and patent practice in jurisdictions, for example, in some jurisdictions, computer readable media does not include electrical carrier signals and telecommunications signals as is required by legislation and patent practice.
It should be noted that the above-described device embodiments are merely illustrative, where the units described as separate parts may or may not be physically separate, and the parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. In addition, in the drawings of the embodiment of the apparatus provided by the present invention, the connection relationship between the modules indicates that there is a communication connection between them, and may be specifically implemented as one or more communication buses or signal lines. One of ordinary skill in the art can understand and implement it without inventive effort.
While the foregoing is directed to the preferred embodiment of the present invention, it will be understood by those skilled in the art that various changes and modifications may be made without departing from the spirit and scope of the invention.
Claims (12)
1. A method for making a compatible display of an H5 page is characterized by comprising the following steps:
detecting the selected elements;
when an event for moving the element is monitored, acquiring the position of the element in a page in real time; wherein the page comprises an H5 editing interface;
judging that the element is positioned in the H5 editing interface according to the position of the element in the page;
dynamically calculating the display condition of the element in the H5 editing interface on multiple types of terminal equipment in a preset terminal library in real time, so as to judge whether the position of the element in a page exceeds a preset visual area of any one of the multiple types of terminal equipment in real time;
and when the position of the element in the page is judged to exceed the preset visual area of any type, displaying the prompt message exceeding the range.
2. The method for making a compatible display according to the H5 page of claim 1, wherein the determining that the element is located within the H5 editing interface according to the position of the element in the page comprises:
and judging that the element is positioned in the H5 editing interface according to the position of the element in a page, the length and the width of the element and the relative position of the H5 editing interface in the page.
3. The method for making a compatible display according to the H5 page of claim 1, wherein the H5 editing interface uses a straight line at the top as a first reference line and a straight line at any vertical edge as a second reference line;
when the position of the element in the page is judged to exceed the visual area of any mobile phone in the mobile phone information base, displaying the prompt message exceeding the range specifically comprises:
when the element is judged to exceed the screen visible height of any mobile phone in the mobile phone information base according to the position of the element in the page and the first reference line, displaying an auxiliary line to mark the screen visible height of the mobile phone; and/or
And when the element is judged to exceed the screen visible width of any mobile phone in the mobile phone information base according to the position of the element in the page and the second reference line, displaying an auxiliary line to mark the screen visible width of the mobile phone.
4. The method for making a compatible display according to the H5 page of claim 1, wherein the H5 editing interface uses a straight line at the top as a first reference line and a straight line at any vertical edge as a second reference line;
when the position of the element in the page is judged to exceed the visual area of any mobile phone in the mobile phone information base, displaying the prompt message exceeding the range specifically comprises:
when the element is judged to exceed the screen visible height of any mobile phone in the mobile phone information base according to the position of the element in the page, the length of the element and the first reference line, displaying an auxiliary line to mark the screen visible height of the mobile phone; and/or
And when the element is judged to exceed the screen visible width of any mobile phone in the mobile phone information base according to the position of the element in the page, the width of the element and the second reference line, displaying an auxiliary line to mark the screen visible width of the mobile phone.
5. The method for making a compatible display according to any one of claims 1 to 4, wherein the step of acquiring the position of the element in the page in real time when the event of moving the element is monitored is specifically as follows:
when an event that the element is moved through a control medium is monitored, acquiring the position of the control medium in a page and the position of the control medium relative to the element in real time;
and acquiring the position of the element in the page according to the position of the control medium in the page and the position of the control medium relative to the element.
6. An apparatus for making a compatible display of H5 pages, comprising:
the detection module is used for detecting the selected elements;
the position acquisition module is used for acquiring the position of the element in a page in real time when an event for moving the element is monitored; wherein the page comprises an H5 editing interface;
the position judging module is used for judging that the element is positioned in the H5 editing interface according to the position of the element in the page, and dynamically calculating the display condition of the element positioned in the H5 editing interface on multiple types of terminal equipment in a preset terminal library in real time, so as to judge whether the position of the element in the page exceeds a preset visual area of any one type of the multiple types of terminal equipment in real time;
and the information prompt module is used for displaying the prompt information beyond the range when the position of the element in the page is judged to exceed the preset visual area of any type.
7. The device for making and compatibly displaying an H5 page according to claim 6, wherein the position determining module specifically includes:
and judging that the element is positioned in the H5 editing interface according to the position of the element in a page, the length and the width of the element and the relative position of the H5 editing interface in the page.
8. The apparatus for making a compatible display according to the H5 page of claim 6, wherein the H5 editing interface uses the straight line of the top as a first reference line and the straight line of any vertical edge as a second reference line;
the information prompting module specifically includes:
the first visual height judging unit is used for displaying an auxiliary line to mark the visual height of the screen of any mobile phone in the mobile phone information base when judging that the element exceeds the visual height of the screen of the mobile phone according to the position of the element in the page and the first reference line; and/or
And the first visible width judging unit is used for displaying an auxiliary line to mark the visible width of the screen of any mobile phone in the mobile phone information base when judging that the element exceeds the visible width of the screen of any mobile phone in the mobile phone information base according to the position of the element in the page and the second reference line.
9. The apparatus for making a compatible display according to the H5 page of claim 6, wherein the H5 editing interface uses the straight line of the top as a first reference line and the straight line of any vertical edge as a second reference line;
the information prompting module specifically includes:
the second visual height judging unit is used for displaying an auxiliary line to mark the screen visual height of any mobile phone in the mobile phone information base when judging that the element exceeds the screen visual height of the mobile phone according to the position of the element in the page, the length of the element and the first reference line; and/or
And the second visible width judging unit is used for displaying the auxiliary line to mark the visible width of the screen of any mobile phone in the mobile phone information base when judging that the element exceeds the visible width of the screen of the mobile phone according to the position of the element in the page, the width of the element and the second reference line.
10. The device for making and compatibly displaying the H5 page according to any one of claims 6 to 9, wherein the position obtaining module specifically includes:
the control medium position acquisition unit is used for acquiring the position of the control medium in a page and the position of the control medium relative to the element in real time when an event that the element is dragged by the control medium is monitored;
and the element position acquisition unit is used for acquiring the position of the element in the page according to the position of the manipulation medium in the page and the position of the manipulation medium relative to the element.
11. A terminal device for H5 page making compatible display, comprising a processor, a memory, and a computer program stored in the memory and configured to be executed by the processor, the processor implementing the method for H5 page making compatible display as claimed in any one of claims 1 to 5 when executing the computer program.
12. A computer-readable storage medium, comprising a stored computer program, wherein the computer program, when executed, controls an apparatus on which the computer-readable storage medium is located to perform the method for making a compatible display of the H5 page according to any one of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710862836.6A CN107608668B (en) | 2017-09-22 | 2017-09-22 | Method and device for making and compatibly displaying H5 page, terminal equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710862836.6A CN107608668B (en) | 2017-09-22 | 2017-09-22 | Method and device for making and compatibly displaying H5 page, terminal equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107608668A CN107608668A (en) | 2018-01-19 |
| CN107608668B true CN107608668B (en) | 2021-02-05 |
Family
ID=61062180
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710862836.6A Active CN107608668B (en) | 2017-09-22 | 2017-09-22 | Method and device for making and compatibly displaying H5 page, terminal equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107608668B (en) |
Families Citing this family (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108073343B (en) * | 2018-01-26 | 2019-12-17 | 维沃移动通信有限公司 | display interface adjusting method and mobile terminal |
| CN110928542B (en) * | 2018-09-20 | 2023-12-26 | 北京国双科技有限公司 | Webpage adaptation method, device, system and equipment |
| CN109739501A (en) * | 2018-12-18 | 2019-05-10 | 北京字节跳动网络技术有限公司 | The method, apparatus and electronic equipment of streaming effect are realized in absolute fix layout |
| CN109901902B (en) * | 2019-02-19 | 2020-09-01 | 广州视源电子科技股份有限公司 | Interface display method and device, computer equipment and storage medium |
| CN109948091A (en) * | 2019-03-20 | 2019-06-28 | 网宿科技股份有限公司 | A kind of web page processing method and client device |
| CN110888635B (en) * | 2019-11-28 | 2023-07-04 | 百度在线网络技术（北京）有限公司 | Same-layer rendering method and device, electronic equipment and storage medium |
| CN112596728A (en) * | 2020-12-26 | 2021-04-02 | 中国农业银行股份有限公司 | Page generation method and device |
| CN112987992B (en) * | 2021-03-09 | 2022-08-05 | 北京金山云网络技术有限公司 | Navigation element display method and device and electronic equipment |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101944021A (en) * | 2010-08-30 | 2011-01-12 | 创野至易网络技术（北京）有限公司 | Method and system for realizing graphical user interface |
| US8396745B2 (en) * | 2003-04-28 | 2013-03-12 | The Pen | Expanding computer display advertising method and system |
-
2017
- 2017-09-22 CN CN201710862836.6A patent/CN107608668B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8396745B2 (en) * | 2003-04-28 | 2013-03-12 | The Pen | Expanding computer display advertising method and system |
| CN101944021A (en) * | 2010-08-30 | 2011-01-12 | 创野至易网络技术（北京）有限公司 | Method and system for realizing graphical user interface |
Non-Patent Citations (1)
| Title |
|---|
| 木疙瘩，0.1.6.8版本;作者不详;《天极下载：http://mydown.yesky.com/pcsoft/329158539/versions》;20170914;第1-4页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107608668A (en) | 2018-01-19 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107608668B (en) | Method and device for making and compatibly displaying H5 page, terminal equipment and storage medium | |
| CN105068727B (en) | A kind of implementation method and device of drawing tool | |
| US10095389B2 (en) | Gesture-based on-chart data filtering | |
| CN103914260B (en) | Control method and device for operation object based on touch screen | |
| US10228835B2 (en) | Method for displaying information, and terminal equipment | |
| CN104331246A (en) | Device and method for split screen display in terminal | |
| US20180121076A1 (en) | Drawing processing method, drawing program, and drawing device | |
| CN107844953B (en) | Conference file management method, device, terminal and computer readable storage medium | |
| US20140365954A1 (en) | Electronic device, graph display method and storage medium | |
| CN106469000A (en) | A kind of screen content amplification method and terminal unit | |
| CN113721808B (en) | Control method and device | |
| WO2018010316A1 (en) | Desktop page management method and device | |
| JP2015158900A (en) | Information processing device, information processing method and information processing program | |
| WO2016130344A1 (en) | Supporting digital ink in markup language documents | |
| CN113783995A (en) | Display control method, display control device, electronic apparatus, and medium | |
| CN112269501A (en) | Icon moving method and device and electronic equipment | |
| US20130127745A1 (en) | Method for Multiple Touch Control Virtual Objects and System thereof | |
| TW201433943A (en) | Method for displaying touch cursor | |
| US20130169660A1 (en) | Image editing system and method | |
| CN109085974B (en) | Screen control method, system and terminal equipment | |
| KR101294458B1 (en) | Apparatus and method of inputting text in mobile device | |
| CN113448473B (en) | Visual operation method and device for picture cropping area | |
| CN114879872A (en) | Display method, display device, electronic equipment and storage medium | |
| CN111796736B (en) | Application sharing method and device and electronic equipment | |
| CN114629800A (en) | Visual generation method, device, terminal and storage medium for industrial control network target range |
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 |