CN112764752A - Page display method and device, storage medium and electronic device - Google Patents

Page display method and device, storage medium and electronic device Download PDF

Info

Publication number
CN112764752A
CN112764752A CN202110204715.9A CN202110204715A CN112764752A CN 112764752 A CN112764752 A CN 112764752A CN 202110204715 A CN202110204715 A CN 202110204715A CN 112764752 A CN112764752 A CN 112764752A
Authority
CN
China
Prior art keywords
resolution
page
target
display
terminal
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110204715.9A
Other languages
Chinese (zh)
Inventor
郑耀明
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Weimin Insurance Agency Co Ltd
Original Assignee
Weimin Insurance Agency Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Weimin Insurance Agency Co Ltd filed Critical Weimin Insurance Agency Co Ltd
Publication of CN112764752A publication Critical patent/CN112764752A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Controls And Circuits For Display Device (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

The application discloses a page display method and device, a storage medium and an electronic device. Wherein, the method comprises the following steps: acquiring a first page to be displayed on a target terminal; under the condition that the display resolution of the first page is not matched with the target resolution, carrying out scaling processing on the first page based on the target resolution and the display resolution of the first page to obtain a second page with the display resolution matched with the target resolution, wherein the target resolution is the resolution matched with the target terminal; and displaying the second page on the target terminal according to the target resolution. The method and the device solve the technical problem that the efficiency of adjusting the page style is low, and improve the accuracy, universality and performance of page adaptation.

Description

Page display method and device, storage medium and electronic device
The priority of the chinese patent application, entitled "display method and apparatus of pages, storage medium, electronic apparatus", filed in chinese patent office on 24/02/2020, priority number 202010113477.6, is claimed, and is incorporated by reference in its entirety.
Technical Field
The application relates to the field of computers, in particular to a page display method and device, a storage medium and an electronic device.
Background
CSS is an abbreviation for a capturing Style Sheet, generally interpreted as a "Cascading Style Sheet", a markup language for (enhanced) control of page styles and allowing separation of page styles from page content. When the CSS page style is adopted in page making, the page style, such as the layout, font, color, background and the like of the page can be controlled more accurately. For example, by adopting the CSS page style, a picture is displayed on the upper portion of a page, a text and an icon are displayed on the middle lower portion of the page, the displayed position, size, color, and the like of the picture, the text and the icon in the page belong to the category of the page style, the content of the text, the content of the picture, and the like displayed in the page belong to the content of the page, and the page style can be set by the CSS page style.
However, although the page style can be separated from the page content by using the CSS page style, so as to achieve more accurate control over the page style, because the style value of the CSS page style needs to be directly written into the source code of the CSS page style, in the source code of the CSS style, style parameters such as the position and color of the text are set, for example, "width: 10px "," height: 14px ", it is set that the width of the letter is 10 pixel units and the height is 14 pixel units," color: #49A9EE "sets the color source code of the text to be displayed, and since the display resolution of different devices is different, the page designer needs to modify the CSS page style in order to adapt to different devices, and the program developer of the source code rewrites the source code of the CSS page style according to the needs of the page designer, which results in increased labor cost and reduced efficiency in page style maintenance.
In view of the above problems, no effective solution has been proposed.
Disclosure of Invention
The embodiment of the application provides a page display method and device, a storage medium and an electronic device, which are used for at least solving the technical problem of low efficiency of adjusting page styles and improving the accuracy, universality and performance of page adaptation.
According to an aspect of an embodiment of the present application, a method for displaying a page is provided, including: acquiring a first page to be displayed on a target terminal; under the condition that the display resolution of the first page is not matched with the target resolution, carrying out scaling processing on the first page based on the target resolution and the display resolution of the first page to obtain a second page with the display resolution matched with the target resolution, wherein the target resolution is the resolution matched with the target terminal; and displaying the second page on the target terminal according to the target resolution.
According to another aspect of the embodiments of the present application, there is also provided a device for displaying a page, including: the system comprises an acquisition unit, a display unit and a display unit, wherein the acquisition unit is used for acquiring a first page to be displayed on a target terminal; the zooming unit is used for zooming the first page based on the target resolution and the display resolution of the first page under the condition that the display resolution of the first page is not matched with the target resolution, so as to obtain a second page with the display resolution matched with the target resolution, wherein the target resolution is the resolution matched with the target terminal; and the display unit is used for displaying the second page on the target terminal according to the target resolution.
According to another aspect of the embodiments of the present application, there is also provided a storage medium including a stored program which, when executed, performs the above-described method.
According to another aspect of the embodiments of the present application, there is also provided an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor executes the above method through the computer program.
In the embodiment of the application, the zooming processing is executed, the page adaptation is not perceived by the user, the full-screen adaptation effect is seen no matter what size equipment is used by the user, the scheme can be used on equipment with any size, due to automatic adaptation, source codes of CSS page styles do not need to be rewritten by people, the technical problem that the efficiency of adjusting the page styles is low can be solved, and the technical effect of automatic adaptation is achieved.
Drawings
The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:
FIG. 1 is a schematic diagram of a hardware environment for a method of presenting pages in accordance with an embodiment of the present application;
FIG. 2 is a flow chart of an alternative page display method according to an embodiment of the present application;
FIG. 3 is a schematic diagram of an alternative page scaling approach according to an embodiment of the present application;
FIG. 4 is a schematic illustration of an alternative page according to an embodiment of the present application;
FIG. 5 is a schematic illustration of an alternative page according to an embodiment of the present application;
FIG. 6 is a schematic diagram of an alternative page processing capability according to an embodiment of the present application;
FIG. 7 is a schematic view of an alternative page display apparatus according to an embodiment of the present application;
fig. 8 is a block diagram of a terminal according to an embodiment of the present application;
FIG. 9 is a schematic diagram of an alternative page restore scheme according to an embodiment of the present application; and the number of the first and second groups,
FIG. 10 is a schematic diagram of an alternative page restore scheme according to an embodiment of the present application.
Detailed Description
In order to make the technical solutions better understood by those skilled in the art, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only partial embodiments of the present application, but not all 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 application.
It should be noted that the terms "first," "second," and the like in the description and claims of this application and in the drawings described above are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the application described herein are capable of operation in sequences other than those illustrated or described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
Page adaptation (i.e., the process of normally showing a page on various devices) is a problem to be faced by all front-end development, and is one of the most difficult problems of front-end development. How to make the page be able to be correctly shown on various devices and various screens requires many efforts, and various capabilities such as viewport, rem, percentage, media query (a query statement in CSS 3) and the like can be adopted to support page adaptation.
1) The viewport is a visual area of a webpage of a user, the viewport is translated into Chinese and can be called as a 'view area', a browser puts the webpage in a virtual 'window' (viewport), usually the virtual 'window' (viewport) is wider than a screen, so that each webpage is not squeezed into a small window (the layout of the webpage which is not optimized for the browser is damaged), the user can see different parts of the webpage by translation and zoom, the viewport has the defects that the viewport is similar to the resolution of a display, and the page size is adapted by adjusting the resolution, but the compatibility of the scheme is poor, for example, a certain characteristic has different support degrees or different display effects on different browsers, namely, the compatibility problem exists, and many browsers cannot support or support the browser, so the browser cannot be used universally;
2) EM is a relative length unit, relative to the font size of the text in the current object, if the font size of the text in the current line is not artificially set, relative to the default font size of the browser, REM is a new relative unit (root ) of CSS3, and the difference between EM and EM is that when REM is used to set the font size for an element, the element is still a relative size, but only the HTML root element is relatively. The drawback of rem is that rem scales with the page font size as a reference, for example, 32px is 1rem, so that complicated conversion is required when writing codes, and meanwhile, due to a rounding relationship, the precision is insufficient, and meanwhile, the scheme cannot be used for elements such as pictures and the like, and the universality is insufficient;
3) rpx (reactive pixel), which can be adaptive according to the screen width, is a specification or a designed scheme for an application of REM in the instant messaging software, rpx has the disadvantage that the rpx scheme of an applet (in an application environment, such as a Web-based modified page frame in the environment of an instant messaging application) is similar to REM, and is automatically converted during compiling, so that a developer does not care about the conversion process, but the problem of insufficient precision exists;
4) the disadvantage of percentage is that percentage, in addition to the disadvantage of accuracy problems, may also cause problems with too little or too much page scaling, and may not result in a consistent user experience.
It can be seen that the various adaptation schemes mentioned above have some disadvantages, and cannot perfectly support various scenarios, such as compatibility problems, performance problems, precision problems, development difficulty problems, and the like. Similar problems exist with rpx schemes similar to rem, used in applets.
According to an aspect of the embodiments of the present application, a method embodiment of a method for displaying a page is provided, which can solve the above problems, and is a simple, efficient, accurate, and universal page adaptation scheme, and can adapt to any screen size.
Alternatively, in this embodiment, the page presentation method may be applied to a hardware environment formed by the terminal 101 and the server 103 as shown in fig. 1. As shown in fig. 1, a server 103 is connected to a terminal 101 through a network, which may be used to provide services (such as game services, application services, etc.) for the terminal or a client installed on the terminal, and a database 105 may be provided on the server or separately from the server, and is used to provide data storage services (such as storing page data, style data, etc.) for the server 103, and the network includes but is not limited to: the terminal 101 is not limited to a PC, a mobile phone, a tablet computer, and the like.
The page display method of the embodiment of the application may be executed by the terminal 101, or may be executed by both the server 103 and the terminal 101. The terminal 101 may execute the method for displaying the page according to the embodiment of the present application, or may be executed by a client installed thereon. Fig. 2 is a flowchart of a method for displaying an optional page according to an embodiment of the present application, and as shown in fig. 2, the method may include the following steps:
in step S202, the processor of the target terminal obtains a first page to be displayed, and the size of the pattern in the first page is set to take the pixel px as a unit.
Optionally, the first page mainly comprises two parts, one of which is a page style, such as layout, font, color, background, etc. of the page; the other is content in the page, such as text content, picture content, etc.
Step S204, under the condition that the display resolution of the first page is not matched with the target resolution, the processor of the target terminal performs scaling processing on the first page based on the target resolution and the display resolution of the first page to obtain a second page with the display resolution matched with the target resolution, wherein the target resolution is the resolution matched with the target terminal. The scaling processing here includes two types of reduction processing and enlargement processing.
The target resolution is a resolution of a display interface for displaying the first page, such as a resolution of the device, a resolution of the display client, and the like.
And step S206, displaying the second page on the target terminal according to the target resolution.
Through the steps S202 to S206, the page adaptation is not perceived by the user by executing the scaling processing, the full-screen adaptation effect is seen no matter what size equipment is used by the user, the scheme can be used for equipment with any size, and due to automatic adaptation, the source code of the CSS page style does not need to be rewritten by people, so that the technical problem of low efficiency of adjusting the page style can be solved, and the technical effect of automatic adaptation is further achieved. The technical solution of the present application is further detailed below with reference to the steps shown in fig. 2:
in the technical solution provided in step S202, the processor of the target terminal obtains the first page to be displayed, the size of the pattern in the first page may be set to be in units of pixels, or in other types of units, and the description will be made in units of pixels.
The scheme of the application is suitable for various scenes, for example, a browser client side, and when a user operates or the client side is started, the first page needing to be displayed can be obtained from a server or can be obtained locally from the client side; for another example, in an applet (the applet is a service opened in other applications, such as an applet in instant messaging software), when the applet is opened or a click jump is performed in the applet, a first page to be displayed is obtained from a server.
Subsequently, the small program scene is taken as an example for explanation, and at this time, the obtaining of the first page to be displayed on the target terminal includes: the method comprises the steps of obtaining a first page of a first application (equivalent to an applet in a second application) in a target client, wherein the target client is a client formed by installing the second application on a target terminal, and the second application is different from the first application.
In the technical solution provided in step S204, under the condition that the display resolution of the first page is not matched with the target resolution, the processor of the target terminal performs scaling processing on the first page based on the target resolution and the display resolution of the first page to obtain a second page whose display resolution is matched with the target resolution, where the target resolution is a resolution adapted to the target terminal.
Optionally, the determining whether the display resolution of the first page matches the target resolution includes the following four cases:
one is that, the target resolution is a terminal resolution of the target terminal, and determining whether the display resolution of the first page matches the target resolution includes: under the condition that the display resolution of the first page is the same as the terminal resolution, determining that the display resolution of the first page is matched with the terminal resolution; and under the condition that the display resolution of the first page is different from the terminal resolution, determining that the display resolution of the first page is not matched with the terminal resolution.
Secondly, the target resolution is a first resolution (the resolution is smaller than the terminal resolution) set by the target terminal, and at this time, determining whether the display resolution of the first page matches the target resolution includes: determining that the display resolution of the first page is matched with the first resolution under the condition that the display resolution of the first page is the same as the first resolution; and under the condition that the display resolution of the first page is not the same as the first resolution, determining that the display resolution of the first page is not matched with the first resolution.
Thirdly, the target resolution is the display resolution of the target client, and at this time, determining whether the display resolution of the first page matches the target resolution includes: determining that the display resolution of the first page is matched with the display resolution under the condition that the display resolution of the first page is the same as the display resolution; and under the condition that the display resolution and the display resolution of the first page are not the same, determining that the display resolution and the display resolution of the first page are not matched.
Fourthly, the target resolution is a second resolution set by the target client for the target client (the second resolution is smaller than the display resolution of the client, and the display window represented by the second resolution is equivalent to a part of the complete display window of the client), and at this time, determining whether the display resolution of the first page is matched with the target resolution includes: determining that the display resolution of the first page is matched with the second resolution under the condition that the display resolution of the first page is the same as the second resolution; and under the condition that the display resolution of the first page is not the same as the second resolution, determining that the display resolution of the first page is not matched with the second resolution.
Optionally, the scaling the first page based on the target resolution and the display resolution of the first page, and obtaining a second page with the display resolution matched with the target resolution includes: obtaining a scaling parameter representing a ratio between a target resolution and a presentation resolution of the first page, e.g., the target resolution is 750px, the presentation resolution is 1080, and then the scaling parameter is 1.44; and zooming the first page according to the zooming parameters to obtain a second page.
Optionally, in order to improve the efficiency of page processing, when the first page is scaled according to the scaling parameter to obtain the second page, the GPU may be invoked to implement the scaling, and the CPU of the target terminal captures data, such as the scaling parameter and the first information used for representing the first page, and then transmits the scaling parameter and the first information to the graphics processor of the target terminal; the graphics processor performs transform processing on the first information according to the scaling parameter, such as scaling on the X axis by the value of X axis, transform (X), scaling on the Y axis by the value of Y axis, transform (Y), and the like, to obtain second information representing the second page.
In the technical solution provided in step S206, the second page is displayed on the target terminal according to the target resolution.
Optionally, displaying the second page according to the target resolution on the target terminal includes: and displaying the second page on a display interface of the target client according to the target resolution.
The application provides a simple, efficient, accurate and universal page adaptation algorithm, which can adapt to any screen size, although the method is introduced based on an applet, the method is not limited to the applet and can be used for all client page adaptations.
The effect achieved by the scheme is similar to that of rpx of an applet, screen adaptation can be automatically processed by the system, and a developer only needs to write a style according to the size of a visual manuscript without any special processing. However, the implementation principle is different, and the rpx solution of the applet needs a compiling process, which is roughly as follows:
step 1, a developer writes styles in rpx units, rpx is an abstract unit, and finally, the styles need to be compiled into px units during operation;
step 2, before the code runs on the user equipment, rpx needs to be compiled into px through a compiling process, the process is a core of rpx adaptation, the core process is a process of scaling each element to a target device, because each element is scaled, the calculation amount is large, the performance is poor, and due to floating point numbers caused by the scaling process, errors of a plurality of pixels can be caused by rounding up, the situations of inaccurate layout, edge cutting of pictures and the like occur, the scaling process in the step 2 is complex, large basic library support is needed, and the code size of the basic library is not small;
step 3, rpx units are all converted into px units after compiling, so that the target device can run.
It can be seen from the above processes that rpx units have the advantages of automatic adaptation and transparency for developers, but there are some inherent defects, such as that the terminal performance is affected by the compiling during the running (it is necessary to traverse each CSS pattern, perform one conversion on rpx units therein, and switch rpx units into px units, the more complicated the pattern is, the larger the calculation amount is), the inaccuracy of the pattern is caused by rounding up the scaling process (the scaling process is difficult to guarantee that all the CSS patterns are integers, so a large number of rounding operations are required, which results in loss of precision, performance degradation is caused if rounding is not performed, because the minimum unit of the physical screen is 1px, if the minimum unit of the physical screen cannot be aligned with a physical pixel, the operating system automatically selects the nearest pixel point to display, the process is very performance consuming, and also causes jaggy, so rounding is generally performed), and the picture is trimmed, and the like. The performance and the style are very harm to the user experience, the scheme has the advantages of rpx scheme, and can avoid various defects of rpx scheme, and the flow of the scheme is as follows:
step 1, a developer directly writes a style in px units, and px is completely consistent with the size of the visual draft without any conversion.
And 2, when the code runs, the page is wholly zoomed once, the operation can be completed only by simple style processing, only one simple transform is needed in the CSS, the process utilizes hardware acceleration of equipment, only one transform is needed, and the performance is hardly influenced. And meanwhile, the conversion of each parameter by traversing the pattern like rpx is not needed, so that the performance is not influenced no matter how complex the page is. Because the element sizes within the page do not change, no matter whether the scaling is an integer or not, there is no effect on the accuracy.
The whole process is transparent to developers, the whole scaling of the step 2 (namely scaling of a complete page comprising page styles and page data) is also completed instantly, and no compiling and conversion are needed, so that the performance and the accuracy are perfect.
Fig. 3 illustrates the principle of scaling the same page on different size screens, and assuming that the original size of the visual manuscript of the page is 750px, no scaling is needed on the device on the left 750px (scale ═ 1), and on a larger size screen, the scaling is 1.44(scale ═ 1.44) converted according to the specific screen size, but the content displayed by the page is 750 px. That is, 750px can be displayed in full screen on any size screen by scaling.
The method is equivalent to rpx schemes of small programs, rem and other schemes, the adaptation process of the scheme is transparent to developers, the precision is not output in rem, and the scheme is a simple, efficient, accurate and universal page adaptation algorithm and can be adapted to any screen size. Compared with the rpx scheme, the greatest advantage is performance and accuracy, fig. 4 is a design draft of a certain map page, fig. 5 adopts a rpx scheme and a px scheme for comparison, in a screenshot of real machine operation of the rpx scheme and the px scheme shown in fig. 5, the px scheme and the rpx scheme have differences in line thickness and the like, it can be seen that the scheme has advantages in accuracy, fig. 6 shows the performance of the rpx scheme and the px scheme, and it can be seen that the time consumed by the rpx scheme is low, that is, the scheme is more excellent in performance.
The page adaptation is a problem to be faced by any client side presentation, and although the scheme mainly describes the comparison with the applet, the scheme can be used for the adaptation of any client side page, including but not limited to the applet, the Web, the Flash, the iOS, the Android and the like. The scheme describes an adaptive mode, is independent of a specific programming language, and can be realized by adopting a corresponding computer language programming according to requirements. By adopting the scheme, the page adaptation is not perceived by the user, and the effect of full-screen adaptation is seen no matter what size of equipment is used by the user.
The target terminal of the application can be a user terminal, and the embodiment solves the problem of screen adaptation of the user terminal, namely how to perfectly adapt a page to the user terminal, and the page is displayed in a full screen mode on the user terminal without margin.
The target terminal can also be a restoring terminal, the restoring terminal is mainly used for visually restoring a complete page displayed on a user terminal (namely, a process of restoring a picture and an operation process of a user in a background is similar to screen recording), visual acquisition and restoration are brand new application scenes, no complete solution is available in the market at present, and the size restoring part of equipment is not involved.
In the visual reduction, the resolution ratio is related to the screen size in the visual reduction, the resolution ratio represents the fineness of screen particles, and the higher the resolution ratio is, the finer the picture is, so that more picture details can be displayed; the screen size represents the size and width-height ratio of a picture, and the larger the screen size is, the larger the picture can be displayed. The resolution and the screen size are in a mutually-restricted relationship, for example, if the screen size is large, but the resolution is low, then too large pictures cannot be displayed, because the resolution grain is too large, one pixel occupies a large area, so that the picture size that can be displayed by the whole screen is not too large, such as early movies, although there are macroscreens, but because the resolution is too low, the displayed pictures are still coarse, such as only pictures with a resolution of 480 × 320; in contrast, the current high-definition movie is a screen that is almost as large as the earlier movie, but because of its high resolution, it can display a very large picture, such as the current 4k high-definition movie, which can display content with a resolution of 4096 × 2160. It can be seen that under the same screen size (i.e. screen size), pictures with completely different resolutions can be played, and the higher the resolution, the more content can be displayed.
The sizes of the screens of the devices are various, the collected devices and the restored devices are generally different in size, and as a result, the restored pictures cannot accurately reflect the collected pictures, for example, if the collected devices are large and the restored terminals are small, elements which can be seen on the collected devices can appear, but cannot be seen on the restored terminals; for another example, the content can be displayed only by one screen on the acquisition device, and the content can be displayed only by scrolling two screens on the recovery terminal. Under the condition that user equipment is very different, it is very important how to perfectly render a page on the user equipment, how to accurately restore a user picture to a background, and various sizes and resolutions are compatible.
In order to adapt to devices with different sizes, a large number of restoring terminals need to be purchased in the restoring operation in the related technology, a large number of special servers need to be processed to adapt to different restoring terminals, and high device maintenance cost is achieved.
The method and the device solve the problems that the picture seen by a user is perfectly restored, the user needs to restore how large the user sees, and the screen size of the restoring device needs to be fully utilized, so that the picture can keep the maximum possible definition. For example, the picture can be restored to a fixed size, so that the restoring equipment is required to be larger than or identical to the collecting equipment, otherwise, the picture cannot be displayed completely, so that the cost of the restoring equipment is increased (the user equipment has various types, which is equivalent to the fact that the equipment same as the user is prepared for restoration), the efficiency is greatly reduced, the equipment needs to be found first for each restoration, or the picture seen by the user cannot be accurately reflected regardless of the size of the user equipment, and the accuracy and the authority are greatly reduced.
By using the scheme, the size of the acquisition equipment can be accurately recorded and restored, and the user picture can be accurately restored on the restoration terminal, including the content displayed on one screen and the scrolling multiple screens, including the scrolling position, and cannot be influenced by the size of the acquisition and reference equipment.
As an optional implementation scheme, when the technical scheme of the application is used in a real environment, the method mainly comprises two parts of acquisition and restoration, wherein an acquisition end can run on a mobile phone (namely a user terminal) of a user, user equipment information such as screen size, page rolling position and the like is automatically acquired in a background in a manner that the user does not sense, and the screen size and the rolling position comprise information in two directions, namely a horizontal direction and a vertical direction, so that the method has good universality, and the restoration can be perfectly restored regardless of the horizontal screen and the vertical screen and the rolling direction and the size of the restoration equipment; the restoring end runs in the management background, and when the video is restored and played, the restoring end is automatically adapted according to the information such as the size and the like collected by the collecting end, plays the video according to the size of the picture of the user, and truly restores the state of the user during operation. The technical scheme of the application is further detailed by combining specific steps as follows:
it should be noted that, in this embodiment, the target resolution is a resolution for performing a restore presentation on the restore terminal, such as a physical resolution of a screen of the restore terminal, or a resolution of a partial screen for performing the restore presentation on the restore terminal (for example, a large-screen device with a resolution of 4096px 3112px may divide the screen into four portions, each of which has a resolution of 1024 × 778, each of which is used as a restore screen separately, px represents a pixel, and for the sake of description, the units of the resolution in the following text are px); the second resolution is the actual resolution of the second page, and the second resolution and the target resolution have at least one of the following relations: the resolution of the second page in width is the same as the resolution of the target resolution in width; the resolution of the second page in height is the same as the resolution of the target resolution in height; the first resolution is the resolution of the first page, if the user terminal displays the first page in a full-screen display mode, the first resolution is the physical resolution of the user terminal, and if the user terminal displays the first page in a split-screen non-full-screen display mode, the first resolution is the resolution of a partial area of the first page displayed on the user terminal.
Subsequently, it is described by taking an example that the restoring terminal and the user terminal both adopt a full-screen mode to display (that is, the target resolution is the physical resolution of the screen of the restoring terminal, and the first resolution is the physical resolution of the user terminal), and for the non-full-screen mode implementation mode such as split-screen mode, which is adopted by the restoring terminal or the user terminal, details are not repeated in this way.
Step 1, when a user terminal displays a first page according to a first resolution, acquiring the first page and recording the resolution of the first page, wherein the first page is a page interface displayed by the user terminal in a process of executing a service, the service can be insurance, finance and other services, taking insurance as an example, and the first page is a page in a process of browsing insurance products, consulting insurance products, purchasing insurance products, settling claims and the like by a user.
For example, the collection end running on the user's mobile phone automatically collects the user device information in the background in a manner that is imperceptible to the user, such as information (including the internal width and height in pixels, i.e., the first resolution) of the screen size (window. lnnerwidth, window. lnnerheight), the page scrolling position (elem. scrolltop), and the like, and then the information is automatically reported to the server in the background for logging and recording.
And 2, the user terminal sends the collected first page and the first resolution to a server for storage.
And 3, when the page visual reduction is carried out at the reduction terminal, acquiring the first page from the server, for example, reading the information acquired in the step 1 from the log background so as to accurately reduce the window content of the user picture and ensure the picture seen by the user at that time under the real condition.
Step 4, in order to adapt to the restoring terminal, the first page is processed: and zooming the first page based on the target resolution and the display resolution of the first page to obtain a second page with the display resolution matched with the target resolution.
The important point of the reduction effect is that the picture content seen by the user is not one-to-one picture size of the user, so that the equipment with any size can support collection and reduction, namely, the requirement on the reduction equipment is avoided, and the applicability of the scheme is further improved.
In the visual reduction, the resolution ratio is related to the screen size, the resolution ratio represents the fineness of screen particles, and the higher the resolution ratio is, the finer the picture is, so that more picture details can be displayed; the screen size represents the size and width-height ratio of a picture, and the larger the screen size is, the larger the picture can be displayed. It should be noted that, if the sizes occupied by the single display pixels of the display screens of the user terminal and the restore terminal are the same (that is, the unit corresponding to the sizes of the user terminal and the restore terminal is "pixel"), the first resolution not only represents the resolution of the first page, but also represents the physical resolution of the user terminal, that is, indirectly represents the size of the user terminal, and similarly, the target resolution also represents the resolution of the second page and the size of the restore terminal, that is, indirectly represents the size of the restore terminal. If the sizes of the single display pixels of the display screens of the user terminal and the restoring terminal are different, the sizes of the user terminal and the restoring terminal can be determined according to the size of the single display pixel and the resolution of the terminal. The following description will be given taking as an example that the occupied sizes of the single display pixels of the display screens of the user terminal and the restore terminal are the same.
Since the aspect ratio of the user terminal is more likely and the aspect ratio of the target resolution is fixed, the target resolution may not be the same as the aspect ratios of all the user terminals, and in order to ensure that the content displayed on the restore terminal is the same as that displayed on the user terminal, it is necessary to ensure that the aspect ratio of the page restored on the restore terminal is the same as that displayed on the user terminal, and therefore, the second resolution of the second page displayed on the restore terminal may be different from the target resolution.
For example, a user watches a webpage on a tablet computer with a larger screen, the restored device is a mobile phone with a smaller screen, and if the restored device requires the sizes to be the same, the restored device cannot be used, but the size of the window that the user sees is needed to be restored, that is, how much content the user sees, so that the user picture can be restored based on the data of the collection terminal obtained in the first step during the restoration, specifically, the following steps are included:
step 41, a first aspect ratio between the resolution in the width represented by the first resolution and the resolution in the height represented by the first resolution is obtained, and a second aspect ratio between the resolution in the width represented by the target resolution and the resolution in the height represented by the target resolution is obtained.
Step 42 determines whether the first aspect ratio is the same as the second aspect ratio.
If the size of the acquisition equipment is completely the same as that of the reduction equipment, the pictures are completely matched without any blank; if the dimensions are different but the aspect ratio is the same (i.e., as described in step 43), then a perfect match can be achieved by scaling the aspect ratio, which is the most perfect case.
However, most of the cases encountered in reality are those of different sizes (i.e., the case described in step 44), and at this time, the matching cannot be completed, and some margin is left, and the specific adaptation scheme will be described in two cases later.
It should be noted that the aspect ratio is described below, regardless of the specific pixel size, because the size problem can be solved by scaling the aspect ratio, and what affects the picture content is the aspect ratio, such as a very long picture, if it is played on a square screen, the aspect ratio of the screen is not suitable for displaying the picture, if the screen is full, the width is needed, but the height is not enough, and the picture cannot be displayed completely. The example is used for explaining the influence of the aspect ratio on the display of the picture, and in a visual backtracking scene, the picture seen by the user can be completely restored, so that the strategy of filling the width in the example is not adopted, the height is selected to be filled, and then the width is left empty, so that the picture seen by the user can be accurately restored.
And 43, under the condition that the first aspect ratio is the same as the second aspect ratio, zooming the first page according to the relation between the first resolution and the target resolution to obtain a second page with the second resolution.
The resolution at the height represented by the second resolution is the same as the resolution at the height represented by the target resolution, and the resolution at the width represented by the second resolution is the same as the resolution at the width represented by the target resolution.
When the first page is scaled according to the relationship between the first resolution and the target resolution, for example, the first resolution of the user terminal is 1600 × 1200, the width-to-height ratio is 3:4, the target resolution is 800 × 600, and the width-to-height ratio is also 3:4, and the first page may be scaled by an equal ratio, and it should be noted that, if the first page is directly scaled down without changing the resolution, since the resolution of the restore terminal is small and the second page cannot be displayed according to the first resolution, the size of the first page may be scaled down by an equal ratio according to a ratio m (for example, 2) between the resolution at the height in the first resolution and the resolution at the height in the target resolution, and then the resolution at both the height and the width in the first resolution may be multiplied by 1/m, so as to obtain the second resolution, such as 800 x 600.
Similarly, if the first resolution of the user terminal is 800 × 600, the width-to-height size ratio is 3:4, the target resolution is 1600 × 1200, and the width-to-height size ratio is also 3:4, at this time, if the size of the first page is directly enlarged, the resolution of the second page displayed is lower, or the resolution of the first page may be enlarged by two times, and the resolution enlargement may be implemented by a super-resolution scheme (super-resolution is an underlying image processing task, and an image with low resolution is mapped to high resolution).
And 44, under the condition that the first aspect ratio is different from the second aspect ratio, zooming the first page to obtain a second page with a second resolution.
In an alternative embodiment, the resolution at the height represented by the second resolution is the same as the resolution at the height represented by the target resolution, and a first ratio p between the resolution at the height represented by the first resolution and the resolution at the height represented by the target resolution may be obtained during the processing, and the first page is scaled, that is, the resolution at the height and the resolution at the width of the first page are multiplied by 1/p, so as to obtain a second page as the second resolution, and the resolution at the width of the second page is smaller than the resolution at the width represented by the target resolution.
As shown in fig. 9, a situation that the restoring device is wider (i.e. has a larger width and a larger height) than the collecting device is presented, in this case, in order to completely restore the collected pictures, and in order to maximally reveal the collected pictures, the height of the restoring device is used up, and then a part of the width of the right side (or a part of the width of the left side) is left, and if the width is used up, the height exceeds the screen of the restoring device, so that the height can only be adapted to the width of the restoring device, and the width is left.
The scheme herein is illustrated below with a specific example (assuming that the size occupied by the individual display pixels of the display screens of the user terminal and the restore terminal is the same, i.e. the resolution and size are equivalent to equivalent concepts): assuming that the size of the acquisition device (corresponding to the first resolution) is 300 × 200, the aspect ratio is 1.5, the size of the reduction device (corresponding to the target resolution) is 100 × 50, and the aspect ratio is 2, it is necessary to calculate the scaling ratio (equal scaling means that the width and the height both use the same scaling ratio, so that the picture is not deformed, and otherwise the picture is stretched or compressed) with the height, i.e. the target height is 50, the scaling ratio rate is 50/200 is 0.25, and the width is scaled with the same scaling ratio, width is 300 × 0.25, so that the size finally exhibited (corresponding to the second resolution) is 75 × 50, and the width of the space is 100-75 — 25. Therefore, the restored picture can be perfectly rendered, and the size of the restoring equipment is smaller than that of the collecting equipment but larger in aspect ratio, which is a characteristic of the scheme, the scheme has 100% compatibility with the collecting and restoring equipment, and the scheme can perfectly support the screen with any size.
In yet another alternative embodiment, the resolution in the width represented by the second resolution is the same as the resolution in the width represented by the target resolution, and a second ratio q between the resolution in the width represented by the first resolution and the resolution in the width represented by the target resolution may be obtained during the processing, and the resolution in the height and the resolution in the width of the first page may be scaled, that is, the resolution in the height and the resolution in the width of the first page are multiplied by 1/q, so as to obtain a second page as the second resolution, where the resolution in the width of the second page is the same as the resolution in the width represented by the target resolution, and the resolution in the height of the second page is smaller than the resolution in the height represented by the target resolution.
As shown in fig. 10, the situation is shown that the reduction device is higher (i.e. the width and the height are smaller) than the collection device, in this case, in order to completely reduce the collected pictures, and in order to maximally represent the collected pictures, the reduction device will use the full width, and then leave a part of the height of the bottom, and if the height is used, the width will exceed the screen of the reduction device, so that the width can only be adapted to the height, and the height is left empty.
The algorithm here is illustrated below with specific examples: assuming that the size of the collecting device is 50 × 100, the aspect ratio is 0.5, the size of the reducing device is 200 × 500, and the aspect ratio is 0.25, it is necessary to calculate the scaling ratio by width adaptation, i.e. the target width is 200, and the scaling ratio by width is equal to that, which means that the widths and heights all use the same scaling ratio, so that the picture is not deformed, or else is stretched or compressed, rate is 200/50 is 4, and height is 100 × 4 is 400 by the same scaling ratio, so the size finally displayed is 200 × 400, and the height of the blank is 500 × 400 is 100. Therefore, the reduction picture can be perfectly rendered, and the size of the reduction equipment is larger than that of the acquisition equipment, but the aspect ratio is smaller, so that the reduction equipment cannot be directly scaled in an equal ratio.
The strategy can be used for using the screen space to the maximum extent, and simultaneously accurately restoring the size of the picture seen by the user, certainly, if the restoring equipment is larger than the collecting equipment, the restoring equipment can not be amplified, but only a small position of the screen of the restoring equipment can be used, the rest is blank, the picture is very small, the space of a large screen is wasted, meanwhile, the restoring equipment is not universal, only the screen of the restoring equipment is large, the requirement on the restoring equipment is very high, and the cost is very high.
According to the technical scheme, the scrolling position of the page can be recorded, the size is recorded and restored after the most important step is completed, and the picture of the user can be perfectly restored by recording the scrolling position of the picture. For example, if a page is ten screens long, the user can perfectly restore the process based on the size of the device and the scrolling data by scrolling to the second screen.
It can be seen that the reduction effect displayed on the picture is completely the same no matter what the size of the reduction equipment is, that is, the picture content of one screen that the user really sees accurately shows all the content that the user sees, and the reduction effect is accurate. Because the size and the rolling position of the acquisition equipment are accurately recorded, the accurate reduction of the position of the scroll bar and the number of scroll screens is realized simultaneously. An example is illustrated: for example, the height of one screen is 100px, the total height of the page content is 1000px, the user scrolls to the position of 400px at this time, that is, the user scrolls 4 screens, if the size of the acquisition device can not be accurately restored, the restored effect is random, the height of one screen is 200px according to the size of the restoration device, for example, if the restoration device is longer, the user can not see the content on one screen, although the user can see the content behind the restoration device, the user can not see the content actually.
The scheme can realize the effect of 100% matching of the collected picture and the restored picture, and greatly improves the accuracy and authority of the visual restoration system. Meanwhile, the realization of the scheme has no requirement on the size of reduction equipment, and is different from the prior art that the picture of a user can be accurately reduced by using equipment with the same model as acquisition equipment, so that a large amount of equipment does not need to be reserved, equipment matching is not needed during reduction, the reduction efficiency is greatly improved, the system cost is saved, and huge economic benefits are brought.
And 5, displaying the second page on the restoring terminal according to a second resolution, wherein the aspect ratio represented by the second resolution is the same as that represented by the first resolution, and the second resolution is the resolution which is matched with the target resolution and can completely display the second page on the restoring terminal.
The display content of the second page includes the display content of the first page, and includes two cases: if the aspect ratio of the user terminal is the same as that of the restoring terminal, the page content in the second page is completely the same as that in the first page; if the aspect ratio of the user terminal is different from that of the restoring terminal, the second page may include a blank in addition to the page content of the first page.
By collecting and restoring the size of the screen of the collecting end, complete restoring effects, such as accurate restoring of displaying effects of one-screen displaying, multi-screen scrolling and the like, are achieved. The method is not sensitive to the user, and is used for accurately displaying the picture seen by the user at the moment in the backtracking background, namely how large the mobile phone of the user is and how large the content of one screen is. Since different sized handsets see different amounts of content, such precise control is required to accurately restore the user's picture.
For example, the size of the user mobile phone (taking the mobile phone as a vertical state as an example, the size is the width and the height) is 100 × 100, and the reduction device is 100 × 200, that is, the reduction device is longer than the collection device, and if the processing of the scheme is not performed, the picture seen on the reduction device is 2 times the height of the collection device, that is, the picture cannot be seen on the collection device, and the picture is seen on the reduction device. Therefore, when disputes occur, the problem of inconsistent restoration is faced, the user can say that the user does not see the videos, but the videos are restored, and therefore the authority of the visual restoration system is greatly reduced. The same goes for the other way, if the user equipment is larger than the reduction equipment, the user may see but not the reduction equipment, which is also not strict.
Fig. 9 and 10 show the reduction effect of different sizes of the reduction devices, where the inner frame is the size of the collection device (the edge of the inner frame is partially overlapped with the outer frame), and the outer frame is the size of the reduction device. The two figures can well describe the effect realized by the scheme, not only can the picture seen by the user be faithfully restored, but also the size of the restoring equipment can be automatically adapted, no special requirement is required for the restoring equipment, and the restoring equipment can be a mobile phone, a tablet or a computer, and has good applicability.
In the technical scheme of the application, no matter how large the size of the user equipment is, no matter how long the page content is, no matter how large the size of the reduction equipment is, no matter how many screens need to be rolled, the content which the user sees at that time can be accurately reduced through the adaptation and reduction scheme designed by the scheme, the number of the screens rolled by the user is reduced, and perfect reduction and good applicability are realized. The method has no perception to users during collection, and has no special requirements on equipment during reduction.
By adopting the technical scheme, the user pictures including the number and the rolling position of the rolling screen can be accurately collected and restored, and the user is not aware of the user and has no requirement on equipment; the screen can be adapted to any size, including a collection end and a reduction end, and can be perfectly adapted and accurately reduced; the method has no any requirement on acquisition and reduction equipment and no compatibility problem, so that special equipment does not need to be purchased for reduction, the cost is greatly reduced, and huge economic benefits are brought.
It should be noted that, for simplicity of description, the above-mentioned method embodiments are described as a series of acts or combination of acts, but those skilled in the art will recognize that the present application is not limited by the order of acts described, as some steps may occur in other orders or concurrently depending on the application. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required in this application.
Through the above description of the embodiments, those skilled in the art can clearly understand that the method according to the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but the former is a better implementation mode in many cases. Based on such understanding, the technical solutions of the present application 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) and includes instructions for enabling a terminal device (e.g., a mobile phone, a computer, a server, or a network device) to execute the method according to the embodiments of the present application.
According to another aspect of the embodiment of the application, a page display device for implementing the page display method is further provided. Fig. 7 is a schematic diagram of an alternative page display apparatus according to an embodiment of the present application, and as shown in fig. 7, the apparatus may include:
an obtaining unit 701, configured to obtain a first page to be displayed on a target terminal;
the scaling unit 703 is configured to, when the display resolution of the first page is not matched with the target resolution, scale the first page based on the target resolution and the display resolution of the first page to obtain a second page with the display resolution matched with the target resolution, where the target resolution is a resolution adapted to the target terminal;
the display unit 705 is configured to display the second page on the target terminal according to the target resolution.
It should be noted that the obtaining unit 701 in this embodiment may be configured to execute step S202 in this embodiment, the scaling unit 703 in this embodiment may be configured to execute step S204 in this embodiment, and the showing unit 705 in this embodiment may be configured to execute step S206 in this embodiment.
It should be noted here that the modules described above are the same as the examples and application scenarios implemented by the corresponding steps, but are not limited to the disclosure of the above embodiments. It should be noted that the modules described above as a part of the apparatus may operate in a hardware environment as shown in fig. 1, and may be implemented by software or hardware.
Through the module, the page adaptation is not perceived by the user by executing the scaling processing, the effect of full-screen adaptation is seen no matter what size equipment is used by the user, the scheme can be used on equipment of any size, and due to automatic adaptation, source codes of CSS page styles do not need to be rewritten by people, the technical problem that the efficiency of adjusting the page styles is low can be solved, and the technical effect of automatic adaptation is achieved.
Optionally, the scaling unit comprises: an obtaining module, configured to obtain a scaling parameter representing a ratio between a target resolution and a presentation resolution of the first page; and the zooming module is used for zooming the first page according to the zooming parameters to obtain a second page.
Optionally, the scaling module may be further operable to: transmitting the scaling parameter and first information for representing the first page to a graphic processor of the target terminal; and calling a graphics processor to process the first information according to the scaling parameter to obtain second information for representing the second page.
Optionally, the obtaining unit may be further configured to: the method comprises the steps that a first page of a first application is obtained from a target client, wherein the target client is a client formed by installing a second application on a target terminal, and the second application is different from the first application; the presentation unit may also be used to: and displaying the second page on a display interface of the target client according to the target resolution.
Optionally, the target resolution includes a terminal resolution of the target terminal, and the scaling unit may further determine whether the presentation resolution of the first page matches the target resolution as follows: under the condition that the display resolution of the first page is the same as the terminal resolution, determining that the display resolution of the first page is matched with the terminal resolution; and under the condition that the display resolution of the first page is different from the terminal resolution, determining that the display resolution of the first page is not matched with the terminal resolution.
Optionally, the target resolution includes a display resolution of the target client, and the scaling unit may further determine whether the presentation resolution of the first page matches the target resolution as follows: determining that the display resolution of the first page is matched with the display resolution under the condition that the display resolution of the first page is the same as the display resolution; and under the condition that the display resolution and the display resolution of the first page are not the same, determining that the display resolution and the display resolution of the first page are not matched.
It should be noted here that the modules described above are the same as the examples and application scenarios implemented by the corresponding steps, but are not limited to the disclosure of the above embodiments. It should be noted that the modules described above as a part of the apparatus may be operated in a hardware environment as shown in fig. 1, and may be implemented by software, or may be implemented by hardware, where the hardware environment includes a network environment.
According to another aspect of the embodiment of the application, a server or a terminal for implementing the page display method is also provided.
Fig. 8 is a block diagram of a terminal according to an embodiment of the present application, and as shown in fig. 8, the terminal may include: one or more processors 801 (only one shown in fig. 8), a memory 803, and a transmission means 805, as shown in fig. 8, the terminal may further include an input-output device 807.
The memory 803 may be used to store software programs and modules, such as program instructions/modules corresponding to the method and apparatus for displaying a page in the embodiment of the present application, and the processor 801 executes various functional applications and data processing by running the software programs and modules stored in the memory 803, that is, implements the above-described method for displaying a page. The memory 803 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory 803 may further include memory located remotely from the processor 801, which may be connected to the terminal via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
The above-mentioned transmission device 805 is used for receiving or sending data via a network, and may also be used for data transmission between a processor and a memory. Examples of the network may include a wired network and a wireless network. In one example, the transmission device 805 includes a Network adapter (NIC) that can be connected to a router via a Network cable and other Network devices to communicate with the internet or a local area Network. In one example, the transmission device 805 is a Radio Frequency (RF) module, which is used for communicating with the internet in a wireless manner.
Among them, the memory 803 is used to store an application program, in particular.
The processor 801 may call an application stored in the memory 803 via the transmission means 805 to perform the following steps:
acquiring a first page to be displayed on a target terminal;
under the condition that the display resolution of the first page is not matched with the target resolution, carrying out scaling processing on the first page based on the target resolution and the display resolution of the first page to obtain a second page with the display resolution matched with the target resolution, wherein the target resolution is the resolution matched with the target terminal;
and displaying the second page on the target terminal according to the target resolution.
The processor 801 is further configured to perform the following steps:
under the condition that the display resolution of the first page is the same as the terminal resolution, determining that the display resolution of the first page is matched with the terminal resolution;
and under the condition that the display resolution of the first page is different from the terminal resolution, determining that the display resolution of the first page is not matched with the terminal resolution.
By adopting the embodiment of the application, the page adaptation has no perception to the user by executing the zooming processing, and the user sees the full-screen adaptation effect no matter what size equipment is used, so that the scheme can be used on equipment of any size, and the source code of the CSS page style does not need to be rewritten by people due to automatic adaptation, so that the technical problem of low efficiency of adjusting the page style can be solved, and the technical effect of automatic adaptation can be further achieved.
Optionally, the specific examples in this embodiment may refer to the examples described in the above embodiments, and this embodiment is not described herein again.
It can be understood by those skilled in the art that the structure shown in fig. 8 is only an illustration, and the terminal may be a terminal device such as a smart phone (e.g., an Android phone, an iOS phone, etc.), a tablet computer, a palm computer, and a Mobile Internet Device (MID), a PAD, etc. Fig. 8 is a diagram illustrating a structure of the electronic device. For example, the terminal may also include more or fewer components (e.g., network interfaces, display devices, etc.) than shown in FIG. 8, or have a different configuration than shown in FIG. 8.
Those skilled in the art will appreciate that all or part of the steps in the methods of the above embodiments may be implemented by a program instructing hardware associated with the terminal device, where the program may be stored in a computer-readable storage medium, and the storage medium may include: flash disks, Read-Only memories (ROMs), Random Access Memories (RAMs), magnetic or optical disks, and the like.
Embodiments of the present application also provide a storage medium. Optionally, in this embodiment, the storage medium may be used to execute a program code of a page presentation method.
Optionally, in this embodiment, the storage medium may be located on at least one of a plurality of network devices in a network shown in the above embodiment.
Optionally, in this embodiment, the storage medium is configured to store program code for performing the following steps:
acquiring a first page to be displayed on a target terminal;
under the condition that the display resolution of the first page is not matched with the target resolution, carrying out scaling processing on the first page based on the target resolution and the display resolution of the first page to obtain a second page with the display resolution matched with the target resolution, wherein the target resolution is the resolution matched with the target terminal;
and displaying the second page on the target terminal according to the target resolution.
Optionally, the storage medium is further arranged to store program code for performing the steps of:
under the condition that the display resolution of the first page is the same as the terminal resolution, determining that the display resolution of the first page is matched with the terminal resolution;
and under the condition that the display resolution of the first page is different from the terminal resolution, determining that the display resolution of the first page is not matched with the terminal resolution.
Optionally, the specific examples in this embodiment may refer to the examples described in the above embodiments, and this embodiment is not described herein again.
Optionally, in this embodiment, the storage medium may include, but is not limited to: a U-disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a removable hard disk, a magnetic or optical disk, and other various media capable of storing program codes.
The above-mentioned serial numbers of the embodiments of the present application are merely for description and do not represent the merits of the embodiments.
The integrated unit in the above embodiments, if implemented in the form of a software functional unit and sold or used as a separate product, may be stored in the above computer-readable storage medium. Based on such understanding, the technical solution of the present application may be substantially implemented or a part of or all or part of the technical solution contributing to the prior art may be embodied in the form of a software product stored in a storage medium, and including instructions for causing one or more computer devices (which may be personal computers, servers, network devices, or the like) to execute all or part of the steps of the method described in the embodiments of the present application.
In the above embodiments of the present application, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.
In the several embodiments provided in the present application, it should be understood that the disclosed client may be implemented in other manners. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one type of division of logical functions, and there may be other divisions when actually implemented, for example, a plurality of units or components may be combined or may be integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, units or modules, and may be in an electrical or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.
The foregoing is only a preferred embodiment of the present application and it should be noted that those skilled in the art can make several improvements and modifications without departing from the principle of the present application, and these improvements and modifications should also be considered as the protection scope of the present application.

Claims (12)

1. A page display method is characterized by comprising the following steps:
acquiring a first page to be displayed on a target terminal;
under the condition that the display resolution of the first page is not matched with a target resolution, carrying out scaling processing on the first page based on the target resolution and the display resolution of the first page to obtain a second page with the display resolution matched with the target resolution, wherein the target resolution is a resolution matched with the target terminal;
and displaying the second page on the target terminal according to the target resolution.
2. The method of claim 1, wherein scaling the first page based on the target resolution and the presentation resolution of the first page to obtain a second page having a presentation resolution matching the target resolution comprises:
obtaining a scaling parameter for representing a ratio between the target resolution and a presentation resolution of the first page;
and zooming the first page according to the zooming parameters to obtain the second page.
3. The method of claim 2, wherein scaling the first page according to the scaling parameter to obtain the second page comprises:
transmitting the scaling parameter and first information for representing the first page to a graphic processor of the target terminal;
and calling the graphics processor to process the first information according to the scaling parameters to obtain second information for representing the second page.
4. The method of claim 1,
the method for acquiring the first page to be displayed on the target terminal comprises the following steps: the first page of a first application is obtained in a target client, wherein the target client is a client formed by installing a second application on a target terminal, and the second application is different from the first application;
displaying the second page on the target terminal according to the target resolution comprises: and displaying the second page on a display interface of the target client according to the target resolution.
5. The method according to any one of claims 1 to 4, wherein the target resolution comprises a terminal resolution of the target terminal, and wherein determining whether the presentation resolution of the first page matches the target resolution comprises:
under the condition that the display resolution of the first page is the same as the terminal resolution, determining that the display resolution of the first page is matched with the terminal resolution;
and under the condition that the display resolution of the first page is different from the terminal resolution, determining that the display resolution of the first page is not matched with the terminal resolution.
6. The method of any of claims 1-4, wherein the target resolution comprises a display resolution of a target client, and wherein determining whether the presentation resolution of the first page matches the target resolution comprises:
determining that the display resolution of the first page is matched with the display resolution under the condition that the display resolution of the first page is the same as the display resolution;
and under the condition that the display resolution of the first page is different from the display resolution, determining that the display resolution of the first page is not matched with the display resolution.
7. The method of claim 1,
the method for acquiring the first page to be displayed on the target terminal comprises the following steps: the first page is obtained from a server, wherein the server is used for storing the first page displayed by the user terminal according to a first resolution, and the first page is a page interface displayed by the user terminal in a service execution process;
displaying the second page on the target terminal according to the target resolution comprises: and displaying the second page according to a second resolution on a restoring terminal, wherein the target terminal comprises the restoring terminal, the aspect ratio represented by the second resolution is the same as that represented by the first resolution, the second resolution is a resolution which is matched with the target resolution and can completely display the second page on the restoring terminal, and the display content of the second page comprises the display content of the first page.
8. The method of claim 7, wherein scaling the first page based on the target resolution and the presentation resolution of the first page to obtain a second page having a presentation resolution matching the target resolution comprises:
obtaining a first aspect ratio between a resolution in a width of the first resolution representation and a resolution in a height of the first resolution representation, and obtaining a second aspect ratio between a resolution in a width of the target resolution representation and a resolution in a height of the target resolution representation;
under the condition that the first aspect ratio is the same as the second aspect ratio, scaling the first page according to the relationship between the first resolution and the target resolution to obtain the second page of the second resolution, wherein the resolution in the height represented by the second resolution is the same as the resolution in the height represented by the target resolution, and the resolution in the width represented by the second resolution is the same as the resolution in the width represented by the target resolution;
and under the condition that the first aspect ratio is different from the second aspect ratio, scaling the first page to obtain the second page with the second resolution, wherein the resolution at the height represented by the second resolution is the same as the resolution at the height represented by the target resolution, or the resolution at the width represented by the second resolution is the same as the resolution at the width represented by the target resolution.
9. The method of claim 8, wherein scaling the first page to obtain the second page at the second resolution if the first aspect ratio is not the same as the second aspect ratio comprises:
obtaining a first ratio between a resolution at the height represented by the first resolution and a resolution at the height represented by the target resolution, and scaling the first page according to the first ratio to obtain a second page with the second resolution, wherein the resolution at the height of the second page is the same as the resolution at the height represented by the target resolution, and the resolution at the width of the second page is smaller than the resolution at the width represented by the target resolution; or the like, or, alternatively,
and obtaining a second ratio between the resolution in the width represented by the first resolution and the resolution in the width represented by the target resolution, and scaling the first page according to the second ratio to obtain the second page with the second resolution, wherein the resolution in the width of the second page is the same as the resolution in the width represented by the target resolution, and the resolution in the height of the second page is smaller than the resolution in the height represented by the target resolution.
10. A device for displaying pages, comprising:
the system comprises an acquisition unit, a display unit and a display unit, wherein the acquisition unit is used for acquiring a first page to be displayed on a target terminal;
the scaling unit is used for scaling the first page based on the target resolution and the display resolution of the first page to obtain a second page with the display resolution matched with the target resolution under the condition that the display resolution of the first page is not matched with the target resolution, wherein the target resolution is the resolution matched with the target terminal;
and the display unit is used for displaying the second page on the target terminal according to the target resolution.
11. A storage medium, characterized in that the storage medium comprises a stored program, wherein the program when executed performs the method of any of the preceding claims 1 to 9.
12. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor executes the method of any of the preceding claims 1 to 9 by means of the computer program.
CN202110204715.9A 2020-02-24 2021-02-23 Page display method and device, storage medium and electronic device Pending CN112764752A (en)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202010113477.6A CN111399831A (en) 2020-02-24 2020-02-24 Page display method and device, storage medium and electronic device
CN2020101134776 2020-02-24

Publications (1)

Publication Number Publication Date
CN112764752A true CN112764752A (en) 2021-05-07

Family

ID=71430411

Family Applications (2)

Application Number Title Priority Date Filing Date
CN202010113477.6A Pending CN111399831A (en) 2020-02-24 2020-02-24 Page display method and device, storage medium and electronic device
CN202110204715.9A Pending CN112764752A (en) 2020-02-24 2021-02-23 Page display method and device, storage medium and electronic device

Family Applications Before (1)

Application Number Title Priority Date Filing Date
CN202010113477.6A Pending CN111399831A (en) 2020-02-24 2020-02-24 Page display method and device, storage medium and electronic device

Country Status (1)

Country Link
CN (2) CN111399831A (en)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113626120A (en) * 2021-08-04 2021-11-09 挂号网(杭州)科技有限公司 Method and device for determining display page, electronic equipment and storage medium
CN114281445A (en) * 2021-11-26 2022-04-05 华能酒泉风电有限责任公司 Page display method and device, electronic equipment and storage medium

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112148407A (en) * 2020-09-25 2020-12-29 百度国际科技(深圳)有限公司 Visual draft generation method and device, electronic equipment and computer readable medium
CN112860255A (en) * 2021-02-08 2021-05-28 无线生活(杭州)信息科技有限公司 Page adaptation method and device
CN116260998A (en) * 2023-05-04 2023-06-13 深圳市康索特软件有限公司 System and method for solving multi-terminal picture switching interference of intelligent camera system

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104598107A (en) * 2014-12-31 2015-05-06 乐视网信息技术(北京)股份有限公司 Generating method and system of interface control
WO2017012111A1 (en) * 2015-07-23 2017-01-26 Hewlett-Packard Development Company, L.P. Presenting display data on a text display
CN109101233A (en) * 2017-06-20 2018-12-28 福建星网视易信息系统有限公司 It is adapted to the method, storage equipment and Android device of a variety of screen resolutions
CN110147230A (en) * 2019-04-18 2019-08-20 浙江数链科技有限公司 Page adaptation method, apparatus, equipment and storage medium

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104598107A (en) * 2014-12-31 2015-05-06 乐视网信息技术(北京)股份有限公司 Generating method and system of interface control
WO2017012111A1 (en) * 2015-07-23 2017-01-26 Hewlett-Packard Development Company, L.P. Presenting display data on a text display
CN109101233A (en) * 2017-06-20 2018-12-28 福建星网视易信息系统有限公司 It is adapted to the method, storage equipment and Android device of a variety of screen resolutions
CN110147230A (en) * 2019-04-18 2019-08-20 浙江数链科技有限公司 Page adaptation method, apparatus, equipment and storage medium

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113626120A (en) * 2021-08-04 2021-11-09 挂号网(杭州)科技有限公司 Method and device for determining display page, electronic equipment and storage medium
CN114281445A (en) * 2021-11-26 2022-04-05 华能酒泉风电有限责任公司 Page display method and device, electronic equipment and storage medium

Also Published As

Publication number Publication date
CN111399831A (en) 2020-07-10

Similar Documents

Publication Publication Date Title
CN112764752A (en) Page display method and device, storage medium and electronic device
US10984177B2 (en) System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout
KR102278932B1 (en) Application program processing method and terminal device
EP3220249B1 (en) Method, device and terminal for implementing regional screen capture
CN102934063B (en) Display control unit and display control method
US8745515B2 (en) Presentation of large pages on small displays
US20070118821A1 (en) Displaying consumer device graphics using scalable vector graphics
CN107341018A (en) A kind of method and apparatus for continuing to show view after page layout switch
US20230367953A1 (en) Display rendering method and system
CN105930464B (en) Web rich media cross-screen adaptation method and device
CN110908762B (en) Dynamic wallpaper implementation method and device
CN108492338B (en) Compression method and device for animation file, storage medium and electronic device
CN108647348A (en) Textual presentation method, apparatus, equipment and storage medium
JP2012008686A (en) Information processor and method, and program
CN103870508B (en) A kind of webpage Zoom method, device and system
CN114579912A (en) Page layout method, device, equipment and medium
CN117055987A (en) Webpage display method and device, electronic equipment and computer readable storage medium
CN113096217B (en) Picture generation method and device, electronic equipment and storage medium
CN115222840A (en) Table rendering method, computer-readable storage medium, and electronic device
CN113888673A (en) Map editing method, system, device, computing equipment and storage medium
CN109257643B (en) Live broadcast room display method, terminal equipment and storage medium
CN110473146B (en) Remote sensing image display method and device, storage medium and computer equipment
KR101430964B1 (en) Method for controlling display
CN115587269B (en) Client H5 page generation method and device
CN114185473B (en) Method, device, equipment and readable storage medium for displaying pictures in page

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