WO2020155785A1 - 屏幕适配显示方法、电子设备及计算机存储介质 - Google Patents

屏幕适配显示方法、电子设备及计算机存储介质 Download PDF

Info

Publication number
WO2020155785A1
WO2020155785A1 PCT/CN2019/119262 CN2019119262W WO2020155785A1 WO 2020155785 A1 WO2020155785 A1 WO 2020155785A1 CN 2019119262 W CN2019119262 W CN 2019119262W WO 2020155785 A1 WO2020155785 A1 WO 2020155785A1
Authority
WO
WIPO (PCT)
Prior art keywords
screen
resolution
vertical
layout template
current
Prior art date
Application number
PCT/CN2019/119262
Other languages
English (en)
French (fr)
Inventor
汪亚磊
Original Assignee
掌阅科技股份有限公司
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 掌阅科技股份有限公司 filed Critical 掌阅科技股份有限公司
Priority to US17/427,465 priority Critical patent/US20220137796A1/en
Publication of WO2020155785A1 publication Critical patent/WO2020155785A1/zh

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0483Interaction with page-structured environments, e.g. book metaphor

Definitions

  • the embodiments of the present disclosure relate to the field of computer technology, and in particular to a screen adaptation display method, electronic equipment and computer storage media.
  • smart devices with mainstream screen specifications can obtain a screen-adapted display based on the corresponding page layout template.
  • smart devices with other screen specifications cannot adapt and display corresponding page layout templates according to mainstream screen specifications, thereby affecting the effective display of page information, reducing the aesthetics of page display and the user experience of users belonging to smart devices with different screen specifications.
  • the embodiments of the present disclosure are proposed to provide a screen adaptation display method, electronic equipment, and computer storage medium that overcome the above problems or at least partially solve the above problems.
  • a screen adaptation display method for adjusting the page layout to adapt to the screen display.
  • the method includes: obtaining a preset layout template of the page to be displayed on the current screen; and detecting the screen length of the current screen Whether the aspect ratio is consistent with the standard aspect ratio of the preset layout template; if the screen aspect ratio is inconsistent with the standard aspect ratio, it will be based on the screen aspect ratio, standard aspect ratio and the number of interface elements included in the preset layout template. Adjust the page layout of the page to be displayed to fit the current screen for display.
  • an electronic device including: a processor, a memory, a communication interface, and a communication bus.
  • the processor, the memory, and the communication interface communicate with each other through the communication bus;
  • the memory is used to store at least one Executable instructions, the executable instructions make the processor perform the following operations: get the preset layout template of the page to be displayed on the current screen; check whether the screen aspect ratio of the current screen is consistent with the standard aspect ratio of the preset layout template; if the screen is long If the aspect ratio is inconsistent with the standard aspect ratio, adjust the page layout of the page to be displayed according to the screen aspect ratio, the standard aspect ratio, and the number of interface elements included in the preset layout template to fit the current screen for display.
  • a non-volatile computer-readable storage medium stores at least one executable instruction, and the executable instruction causes a processor to perform the following operations : Obtain the preset layout template of the page to be displayed on the current screen; check whether the screen aspect ratio of the current screen is consistent with the standard aspect ratio of the preset layout template; if the screen aspect ratio is inconsistent with the standard aspect ratio, it will be based on the screen length Aspect ratio, standard aspect ratio, and the number of interface elements included in the preset layout template, adjust the page layout of the page to be displayed to fit the current screen for display.
  • a computer program product which includes a computer program stored on the aforementioned non-volatile computer-readable storage medium.
  • the preset page layout template of the page to be displayed is obtained, and the screen aspect ratio of the current screen is associated with the preset layout template. Compare the aspect ratios of the standard screens that are equipped. When it is determined that they are inconsistent, they will be displayed based on the screen aspect ratio of the current screen, the standard aspect ratio of the preset layout template and the number of interface elements included in the preset layout template.
  • the page layout of the page is adjusted to fit the current screen for display.
  • the page layout can be adjusted to achieve the adaptation display of the page to be displayed on the current screen, avoiding the page layout There are a lot of blank or incomplete display phenomena, thereby improving the effectiveness of the page information display, the aesthetics of the page display, and the user experience of users belonging to smart devices with different screen specifications.
  • FIG. 1 shows a flowchart of a method for screen adaptation and display according to Embodiment 1 of the present disclosure
  • FIG. 2 shows an example diagram of page layout adjustment provided by Embodiment 1 of the present disclosure
  • FIG. 3 shows a flowchart of a screen adaptation display method provided in the second embodiment of the present disclosure
  • FIG. 4 shows another example diagram of page layout adjustment provided by the second embodiment of the present disclosure
  • FIG. 5 shows another example diagram of page layout adjustment provided by the second embodiment of the present disclosure
  • Fig. 6 shows another example diagram of page layout adjustment provided by the second embodiment of the present disclosure
  • FIG. 7 shows another example diagram of page layout adjustment provided by the second embodiment of the present disclosure.
  • FIG. 8 shows a flowchart of a screen adaptation display method provided in the third embodiment of the present disclosure
  • FIG. 9 shows a schematic structural diagram of an electronic device according to Embodiment 5 of the present disclosure.
  • Fig. 1 shows a flowchart of a method for screen adaptation and display according to Embodiment 1 of the present disclosure, which is used to adjust the page layout to adapt to the screen display. As shown in Figure 1, the method includes the following steps:
  • Step S101 Obtain a preset layout template of a page to be displayed on the current screen.
  • the current screen refers to the screen on which the electronic device held by the user performs page display.
  • the attribute information of the current screen can be obtained.
  • the attribute information of the current screen may include aspect ratio information such as screen resolution and screen ratio.
  • the page to be displayed refers to a page that is about to be displayed but not displayed on the screen of the electronic device.
  • the page to be displayed can be any display page associated with the application, and the page can include various forms of interface elements.
  • the preset layout template refers to a page layout template pre-designed by the developers of the application background.
  • the preset layout template is based on the pre-specified screen resolution, such as the current mainstream resolution.
  • the specific content displayed by each interface element in the page, the display position of the interface element, and each interface are pre-designed Layout design such as spacing between elements. Therefore, the electronic device can display the associated pages according to the page layout specified in the preset layout template by calling the preset layout template.
  • the electronic device may obtain the preset layout template of the page to be displayed from the server.
  • the preset layout template may be pre-stored in the local storage of the electronic device when the application is installed, so that the electronic device can obtain the preset layout template of the page to be displayed from the local storage.
  • Step S102 detecting whether the screen aspect ratio of the current screen is consistent with the standard aspect ratio of the preset layout template.
  • the aspect ratio refers to the ratio between the width and height of the screen, which can also be called the aspect ratio or the screen ratio, and is usually represented by the ratio between the longer length and the shorter length of the screen. It can be calculated based on the physical resolution of the screen.
  • a long screen refers to a screen whose vertical length significantly exceeds the horizontal length
  • a wide screen refers to a screen whose horizontal length significantly exceeds the vertical length.
  • the aspect ratio of the screen may include 16:9 or 19:9, etc.
  • the screen resolution may be 1080 ⁇ 1920 or 1080 ⁇ 2280, but it is not limited thereto. For a resolution of 1080 ⁇ 1920, it means that the screen contains 1080 pixels in the horizontal direction and 1920 pixels in the vertical direction.
  • the normal display of the screen or picture is taken as a reference, and the ratio of the vertical length to the horizontal length is determined to indicate the aspect ratio.
  • the screen aspect ratio of the current screen refers to the ratio of the vertical length to the horizontal length of the screen when the current screen is normally displayed, such as a vertical screen or a horizontal screen. Since the preset layout template is adapted to the specified screen aspect ratio or screen resolution, such as the current mainstream screen, the screen aspect ratio that the preset layout template is adapted to is called the standard aspect ratio, and the preset layout The screen resolution to which the template is adapted is called the standard resolution.
  • the screen information of the current screen can be obtained through the system interface, and the screen aspect ratio can be obtained, or the screen aspect ratio can be determined according to the screen resolution and screen display direction.
  • the standard aspect ratio adapted to the preset layout template may be obtained, or the standard aspect ratio may be determined according to the screen resolution adapted to the preset layout template. And compare the screen aspect ratio with the standard aspect ratio to determine whether the current screen aspect ratio meets the standard aspect ratio.
  • the preset layout template can be adjusted by the following page layout adjustment method to adapt the page to be displayed on the current screen. If the screen aspect ratio of the current screen is consistent with the standard aspect ratio, it can be further determined whether the screen resolution of the current screen meets the standard resolution. If the screen resolution is inconsistent with the standard resolution, you can adjust the preset layout template by adjusting the overall layout of the page to fit the page to be displayed on the current screen; if the screen resolution is consistent with the standard resolution, you can directly Display the page to be displayed.
  • Step S103 If the screen aspect ratio is inconsistent with the standard aspect ratio, adjust the page layout of the page to be displayed according to the screen aspect ratio, the standard aspect ratio, and the number of interface elements included in the preset layout template to adapt to the current The screen displays.
  • the current screen is directly displayed in accordance with the preset page layout template, there may be a preset page layout template and the current The screen does not fit, which in turn leads to blank or incomplete display on the current screen. Therefore, if the screen aspect ratio is inconsistent with the standard aspect ratio, it is necessary to adjust the layout details in the preset page layout template, such as adjusting the spacing between interface elements, and adjusting the size and size of each interface element. The adjustment of the display content, etc., to adapt to the current screen for display, making the page display more coordinated.
  • interface elements refer to a series of elements that meet user interaction requirements contained in software or system interfaces that can meet interaction requirements, such as interface elements such as windows, dialog boxes, menus, scroll bars, and graphics.
  • the number of interface elements included in the preset layout template may refer to the number of all interface elements included in the preset layout template, or may be the data of the interface elements arranged vertically in the preset layout template.
  • the aspect ratio of the screen and the standard aspect ratio it can be derived from the proportional relationship.
  • the difference in the vertical length ratio between the current screen and the preset layout template is determined value.
  • the screen resolution or the standard resolution when the current screen and the preset layout template have the same number of horizontal pixels, the difference in the number of vertical pixels between the current screen and the preset layout template is determined.
  • the number of interface elements included in the preset layout template the number of vertical intervals between interface elements in the preset layout template is determined.
  • the page layout of the page to be displayed is adjusted based on the preset layout template according to the longitudinal length ratio difference or the number of vertical pixels, and the number of vertical intervals, so as to adjust the vertical interval between interface elements on the preset layout template. Stretching or compressing, the size of each interface element and its display content can also be adjusted, so that the page to be displayed can be filled with the current screen for display or the page to be displayed can be completely displayed on the current screen.
  • Figure 2 shows an example of page layout adjustment.
  • the page layout is designed for the current mainstream mobile phone screen, that is, the preset layout template is based on the mobile phone screen aspect ratio of 16:9 or the screen resolution of 1080 ⁇ 1920, as shown in the left picture of Figure 2. Show. If the screen aspect ratio of the current screen is 19:9 or the screen resolution is 1080 ⁇ 2280, the current screen has the same horizontal length or horizontal pixel number as compared to the screen fitted to the preset layout template. The vertical length of the screen is longer than the vertical length of the screen adapted by the preset layout template, that is, a mobile phone integrated with the current screen can be called a long-screen mobile phone.
  • this embodiment obtains the preset layout template associated with the page to be displayed, and compares the screen aspect ratio of the current screen with the standard aspect ratio, that is, the screen aspect ratio of 19:9 is inconsistent with the standard aspect ratio of 16:9. Make sure to display normally after the page layout is adapted and adjusted.
  • the difference between the vertical length ratio of the current screen and the preset layout template is 3.
  • the vertical interval included in the preset layout template is 4.
  • the longitudinal length ratio difference is arranged in the interval distance of each longitudinal interval on average, that is, the length of [(1/19)*(3/4)] of the longitudinal length of the long-screen mobile phone is arranged at the interval distance of each longitudinal interval. in.
  • the difference between the number of vertical pixels of the current screen and the preset layout template is 360.
  • the difference in the number of vertical pixels is averagely arranged in each vertical interval, that is, 90 rows of pixels are arranged in each vertical interval.
  • the final display is based on the adjusted page layout as shown in the right figure of Figure 2 to stretch the distance between the interface elements in the long-screen mobile phone, so that the page to be displayed is filled with the display in the long-screen mobile phone.
  • a display level may be set for each interface element in advance according to evaluation factors such as the importance of the display content of each interface element and the degree of attracting users. Therefore, when the page layout is adjusted, according to the display level of each interface element, a weight is set for at least one vertical interval adjacent to each interface element, and the difference is based on the vertical length ratio difference or the vertical pixel number difference, as well as the vertical interval number and each vertical interval. The weight of the interval is to adjust the vertical interval between the interface elements in the initial page layout template.
  • this embodiment can also preset at least one of the lower limit distance threshold and the upper limit distance threshold of the longitudinal interval. After the longitudinal interval is adjusted, if the interval distance of the longitudinal interval exceeds the lower limit distance threshold or the upper limit distance threshold, the corresponding Adjust the vertical size of the interface elements and adjust the display content adaptively.
  • the full-screen scaling ratio between the screen resolution of the current screen and the standard resolution can be determined; the preset layout template is scaled according to the full-screen scaling ratio Processing, determine the current page layout template to adapt to the current screen for display.
  • the preset page layout template of the page to be displayed can be obtained before the page is displayed, and the screen aspect ratio of the current screen is associated with the preset layout template. The aspect ratio is compared.
  • the page layout of the page to be displayed is based on the screen aspect ratio of the current screen, the standard aspect ratio associated with the preset layout template, and the number of interface elements included in the preset layout template. Make adjustments to fit the current screen for display.
  • the page layout can be adjusted to achieve the adaptation display of the page to be displayed on the current screen, avoiding the page layout There are a lot of blank or incomplete display phenomena, thereby improving the effectiveness of the page information display, the aesthetics of the page display, and the user experience of users belonging to smart devices with different screen specifications.
  • FIG. 3 shows a flowchart of a screen adaptation display method provided in the second embodiment of the present disclosure.
  • This embodiment is applied to adjust the page layout to adapt to the scene displayed on the screen.
  • adjusting the page layout of the page to be displayed includes: determining the horizontal resolution based on the standard resolution associated with the preset layout template The vertical resolution difference between the screen resolution of the current screen and the standard resolution; according to the preset layout template and the number of interface elements, determine the number of vertical intervals between the interface elements in the page to be displayed; according to the vertical resolution difference and The number of vertical intervals, adjust the page layout of the page to be displayed.
  • the method includes:
  • Step S301 Obtain a preset layout template of the page to be displayed on the current screen.
  • Step S302 It is detected whether the screen aspect ratio of the current screen is consistent with the standard aspect ratio of the preset layout template.
  • Step S303 If the screen aspect ratio is inconsistent with the standard aspect ratio, determine the vertical resolution difference between the screen resolution of the current screen and the standard resolution based on the horizontal resolution of the standard resolution associated with the preset layout template.
  • this embodiment is preferred to prioritize the resolution of the current screen by changing the ratio. If the horizontal resolution of the current screen resolution is the same as the horizontal resolution of the standard resolution, the difference between the vertical resolution of the current screen resolution and the vertical resolution of the standard resolution is determined, and the adjustment of the page layout is summarized as Adjust the vertical spacing between interface elements in the preset layout template.
  • the horizontal scaling ratio refers to the scaling ratio between the horizontal resolution of the current screen and the horizontal resolution of the standard resolution.
  • the screen is not adjusted, but derivation calculation is performed based on the resolution value.
  • the horizontal resolution of the current screen after zooming is consistent with the horizontal resolution of the standard resolution, and when the horizontal resolution is the same, the vertical resolution of the current screen is determined based on the horizontal zoom ratio.
  • the preset layout template is based on the adaptation design of the mobile phone screen resolution of 1080 ⁇ 1920, which is the standard resolution; the screen resolution of the current screen is 1080 ⁇ 2280. It can be determined that the horizontal scaling ratio between the horizontal resolution 1080 of the current screen and the horizontal resolution 1080 of the standard resolution is 1. Correspondingly, based on the horizontal scaling ratio, it is determined that the vertical resolution of the current screen after scaling is 2280. Furthermore, it is determined that the vertical resolution difference between the scaled vertical resolution and the vertical resolution of the standard resolution is 360. Based on the above derivation calculation process, it can be applied to the adjustment of any screen parameters, such as the screen display of old mobile phones or the screen display of new mobile phones.
  • Step S304 Determine the number of vertical intervals between interface elements in the page to be displayed according to the preset layout template and the number of interface elements.
  • the number of interface elements may refer to the number of all interface elements included in the preset layout template, or may be the data of the interface elements arranged vertically in the preset layout template. There is an interval between two adjacent interface elements, so the number of vertical intervals between interface elements in the page to be displayed can be determined according to the number of interface elements.
  • the interface elements in the preset layout template may be arranged in one vertical column, may also be arranged in at least two vertical columns, or may also be alternately arranged vertically.
  • the number of intervals at different longitudinal positions may be different, so the number of intervals at each longitudinal position can be determined according to the preset layout template and the number of interface elements, so as to facilitate subsequent adjustments to all longitudinal intervals.
  • Step S305 Adjust the page layout of the page to be displayed according to the vertical resolution difference and the number of vertical intervals.
  • the page layout of the page to be displayed is adjusted based on the preset layout template according to the vertical resolution difference and the number of vertical intervals, so as to adjust the vertical interval between the interface elements on the preset layout template.
  • Expand or compress in which the size of each interface element and its display content can also be adjusted, so that the page to be displayed can be filled with the current screen for display, or the page to be displayed can be completely displayed in the current screen.
  • the preset layout template is scaled according to the horizontal scaling ratio, and the initial page layout template is determined to adapt to the horizontal display of the current screen; according to the vertical resolution difference and the number of vertical intervals, adjust each of the initial page layout templates
  • the vertical interval between interface elements determines the current page layout template to fit the vertical display of the current screen.
  • the preset layout template itself is adjusted based on the derivation parameters, that is, the page layout is adjusted vertically on the premise of ensuring the horizontal adaptation and adjustment of the page layout. Therefore, first, the page layout template is scaled and adjusted as a whole according to the horizontal scaling ratio to obtain the initial page layout template, so that each interface element is adapted to the current screen display in the horizontal direction. Accordingly, there may be blank or incomplete display in the vertical direction of the current screen.
  • the interval distance required to adjust the vertical interval between each interface element is determined, so as to obtain the current page layout template, which is also adapted to the current screen in the vertical direction, so that the preset layout template All of the interface elements are fully displayed in the current screen.
  • the page layout of the page to be displayed can be adjusted in a variety of ways according to the vertical resolution difference and the number of vertical intervals.
  • This embodiment is described in two more typical ways here: Method one, the vertical The resolution difference is averagely arranged in the longitudinal interval between the interface elements; the second method, according to the preset display level of each interface element, the longitudinal resolution difference is weighted and arranged in the longitudinal interval between the interface elements.
  • Method 1 Determine the average adjustment distance according to the vertical resolution difference and the number of vertical intervals; according to the vertical resolution difference, if the vertical resolution of the current screen zoomed is greater than the vertical resolution of the standard Adjust the distance between the vertical intervals and extend the average adjustment distance to determine the current page layout template; or if the vertical resolution of the current screen after zooming is less than the vertical resolution of the standard resolution, adjust the vertical interval between the interface elements Reduce the average adjustment distance and determine the current page layout template.
  • the order of the difference between the vertical resolution of the current screen zoomed and the vertical resolution of the standard resolution can be determined in advance, so as to determine the vertical resolution of the current screen after zooming and the standard resolution according to the sign of the vertical resolution difference.
  • the relationship between the rate of the vertical resolution If the vertical resolution of the current screen after zooming is greater than the vertical resolution of the standard resolution, the vertical spacing between the mask elements in the initial page layout template will be stretched, that is, the spacing distance of each vertical spacing will be extended and adjusted on average Distance, such as the long-screen mobile phone in the example of Figure 2 above.
  • the left image of Figure 4 is the page layout of the default layout template based on mainstream mobile phone screen aspect ratio adaptation design. Assuming that the middle image of Figure 4 shows the old mobile phone directly according to the default layout template, it cannot be based on the default The layout template completely displays the page to be displayed, so after the horizontal adaptation adjustment, that is, after the overall proportion of the preset layout module is adjusted, the vertical interval between the interface elements is adjusted to reduce the average adjustment distance. As shown in Figure 4 on the right.
  • Method 2 Determine the weight of at least one vertical interval adjacent to each interface element according to the preset display level associated with the display content of each interface element in the current page layout template; according to the vertical resolution difference, the number of vertical intervals, and each vertical The weight of the interval is to adjust the vertical interval between the interface elements in the initial page layout template to determine the current page layout template.
  • the display level can be set for each interface element in advance according to evaluation factors such as the importance of the display content of each interface element and the degree of attracting users. Therefore, when the page layout is adjusted, a weight is set for at least one longitudinal interval adjacent to each interface element according to the display level of each interface element. And according to the longitudinal resolution difference, the number of longitudinal intervals and the weight of each longitudinal interval, the adjustment distance of each longitudinal interval is determined. Finally, according to the relationship between the vertical resolution of the current screen after zooming and the vertical resolution of the standard resolution, the vertical spacing between the interface elements in the initial page layout template is adjusted accordingly. To highlight the more important interface elements of the display level, improve the display efficiency of the content, attract more users to browse, and improve the user experience.
  • the left image of FIG. 5 is a page layout of a preset layout template based on the adaptation design of the mainstream mobile phone screen aspect ratio
  • the middle image of FIG. 5 is a direct display effect according to the preset layout template.
  • the page layout template includes 5 interface elements. Assuming that the first interface element has the highest degree of user attraction, the display level of the first interface element is preset to be level one. Assuming that the display content of the second to fourth interface elements is of the highest importance, the display level of the second to fourth interface elements is preset to be level two, and accordingly, the display level of the fifth interface element is level three. Among them, the first level is the highest level, and the third level is the lowest level.
  • the weight of the longitudinal interval adjacent to the first interface element can be set to a larger value, and the longitudinal interval between the second to fourth interface elements can be set to a larger value.
  • the weight is set to an intermediate value, and the weight of the adjacent longitudinal interval of the fifth interface element is set to the minimum value.
  • the first interface element that can attract the user is highlighted, the second to fourth interface elements with more important content are highlighted, and the fifth interface element is displayed normally, as shown in the right diagram of FIG. 5.
  • this embodiment can also preset at least one of the lower limit distance threshold and the upper limit distance threshold of the longitudinal interval. After the longitudinal interval is adjusted, if the interval distance of the longitudinal interval exceeds the lower limit distance threshold or the upper limit distance threshold, the corresponding Adjust the vertical size of the interface elements and adjust the display content adaptively.
  • the vertical size of each interface element in the current page layout template is compressed, and the display content in each interface element is reduced to make the interval distance of each vertical interval Not less than the preset lower limit distance threshold.
  • the preset lower distance threshold refers to the minimum separation distance between the interface elements in the longitudinal direction.
  • the longitudinal separation distance is less than the preset lower distance threshold, there may be overlap between different interface elements, as shown in Figure 6.
  • the separation distance of each longitudinal interval can be adjusted to the distance of the preset lower distance threshold, or adjusted to be between the preset lower distance threshold and the preset upper distance threshold.
  • the vertical size of each interface element in the current page layout template is enlarged so that the distance between each vertical interval is not greater than the preset upper limit distance threshold.
  • the preset upper limit distance threshold refers to the maximum separation distance of the longitudinal separation between interface elements.
  • the longitudinal separation distance is greater than the preset upper limit distance threshold, there may be a large number of longitudinal separation distances between the interface elements. Blank space affects the overall appearance of the page and the efficiency of content display. Therefore, if the distance between each vertical interval is greater than the preset upper limit distance threshold, the vertical size of each interface element in the current page layout template is enlarged so that the distance between each vertical interval is not greater than the preset upper distance threshold.
  • the separation distance of each longitudinal interval can be adjusted to the distance of the preset upper distance threshold, or adjusted to be between the preset lower distance threshold and the preset upper distance threshold.
  • the display content in the interface element can be appropriately increased.
  • each interface element in the current page layout template determines the potential display content associated with each interface element; add the potential display content to the associated Interface elements.
  • the display content of each interface element may be display content in various forms such as text, icons, or pictures.
  • the potential display content associated with the interface element can be determined according to the enlarged vertical size of the interface element.
  • the potential display content is increased and displayed in the associated interface elements to improve content display efficiency, as shown in Figure 7.
  • the preset page layout template of the page to be displayed can be obtained before the page is displayed, and the screen aspect ratio of the current screen is determined in association with the preset layout template.
  • the aspect ratio is inconsistent, based on the situation that the horizontal resolution of the current screen is consistent with the horizontal resolution of the standard resolution, according to the vertical resolution difference between the vertical resolution of the current screen and the vertical resolution of the standard resolution, As well as the number of vertical intervals between interface elements in the preset layout template, the vertical interval between interface elements in the page is adjusted to fit the current screen for display.
  • the longitudinal intervals can be averagely arranged according to the longitudinal resolution difference, or the longitudinal intervals can be weighted according to the preset display level of each interface element.
  • the page layout can be adjusted to achieve the adaptation display of the page to be displayed on the current screen, avoiding the page layout There are a lot of blank or incomplete display phenomena, thereby improving the effectiveness of the page information display, the aesthetics of the page display, and the user experience of users belonging to smart devices with different screen specifications.
  • FIG. 8 shows a flowchart of a screen adaptation display method provided in the third embodiment of the present disclosure. This embodiment is applied to adjust the page layout to adapt to the screen display. As shown in Figure 8, the method includes the following steps:
  • Step S801 Obtain a preset layout template of the page to be displayed on the current screen.
  • Step S802 detecting whether the screen aspect ratio of the current screen is consistent with the standard aspect ratio of the preset layout template.
  • step S803 if the screen aspect ratio is consistent with the standard aspect ratio, the full-screen zoom ratio between the screen resolution of the current screen and the standard resolution is determined.
  • the preset layout template can be scaled to fit the current screen display. Therefore, the ratio between the screen resolution of the current screen and the standard resolution is the full-screen zoom ratio.
  • Step S804 Perform zoom processing on the preset layout template according to the full-screen zoom ratio, and determine the current page layout template to adapt to the current screen for display.
  • the entire preset layout template is zoomed according to the full-screen zoom ratio to obtain the current page layout template, which is displayed on the current screen.
  • the screen resolution of the current screen is the same as the standard resolution, it can be regarded as a full-screen zoom ratio of 1, and it can be displayed directly according to the preset layout template.
  • the preset page layout template of the page to be displayed can be obtained before the page is displayed, and the screen aspect ratio of the current screen is determined in association with the preset layout template.
  • the aspect ratio is the same, determine the direct ratio of the screen resolution of the current screen to the standard resolution as the full-screen zoom ratio, and perform the overall zoom processing on the preset layout template according to the full-screen zoom ratio.
  • the page layout can be adjusted to achieve the adaptation display of the page to be displayed on the current screen, avoiding the page layout There are a lot of blank or incomplete display phenomena, thereby improving the effectiveness of the page information display, the aesthetics of the page display, and the user experience of users belonging to smart devices with different screen specifications.
  • the fourth embodiment of the present disclosure also provides a non-volatile computer-readable storage medium.
  • the non-volatile computer-readable storage medium stores at least one executable instruction.
  • the computer-executable instruction can execute any of the foregoing method embodiments. Screen adaptation display method in.
  • the executable instructions can be specifically used to cause the processor to perform the following operations:
  • executable instructions also cause the processor to perform the following operations:
  • executable instructions also cause the processor to perform the following operations:
  • the screen resolution and standard resolution of the current screen determine the horizontal scaling ratio between the horizontal resolution of the current screen and the horizontal resolution of the standard resolution
  • the vertical resolution difference is determined.
  • executable instructions also cause the processor to perform the following operations:
  • the preset layout template is scaled according to the horizontal scaling ratio, and the initial page layout template is determined to adapt to the horizontal display of the current screen;
  • the vertical resolution difference and the number of vertical intervals adjust the vertical interval between the interface elements in the initial page layout template to determine the current page layout template to fit the vertical display of the current screen.
  • executable instructions also cause the processor to perform the following operations:
  • the vertical resolution difference if the vertical resolution of the current screen after zooming is greater than the vertical resolution of the standard resolution, the vertical spacing between interface elements is adjusted to extend the average adjustment distance, and the current page layout template is determined; or
  • the vertical spacing between the interface elements is adjusted to reduce the average adjustment distance, and the current page layout template is determined.
  • executable instructions also cause the processor to perform the following operations:
  • the interval distance between the vertical intervals between the interface elements in the initial page layout template is adjusted to determine the current page layout template.
  • executable instructions also cause the processor to perform the following operations:
  • the vertical size of each interface element in the current page layout template is compressed, and the display content in each interface element is reduced, so that the distance between each vertical interval is not less than the preset distance Lower distance threshold;
  • the vertical size of each interface element in the current page layout template is enlarged so that the distance between each vertical interval is not greater than the preset upper limit distance threshold.
  • executable instructions also cause the processor to perform the following operations:
  • executable instructions also cause the processor to perform the following operations:
  • the preset layout template is zoomed according to the full-screen zoom ratio, and the current page layout template is determined to fit the current screen for display.
  • FIG. 9 shows a schematic structural diagram of an electronic device according to the fifth embodiment of the present disclosure, and the specific embodiment of the present disclosure does not limit the specific implementation of the electronic device.
  • the electronic device may include: a processor (processor) 902, a communication interface (Communications Interface) 904, a memory (memory) 906, and a communication bus 908.
  • processor processor
  • Communication interface Communication Interface
  • memory memory
  • the processor 902, the communication interface 904, and the memory 906 communicate with each other through the communication bus 908.
  • the communication interface 904 is used to communicate with network elements of other devices, such as clients or other servers.
  • the processor 902 is configured to execute the program 910, and specifically can execute the relevant steps in the embodiment of the foregoing screen adaptation display method.
  • the program 910 may include program code, and the program code includes computer operation instructions.
  • the processor 902 may be a central processing unit CPU, or an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement the embodiments of the present disclosure.
  • the one or more processors included in the electronic device may be processors of the same type, such as one or more CPUs; or processors of different types, such as one or more CPUs and one or more ASICs.
  • the memory 906 is used to store the program 910.
  • the memory 906 may include a high-speed RAM memory, and may also include a non-volatile memory (non-volatile memory), for example, at least one disk memory.
  • the program 910 may be specifically used to enable the processor 902 to perform the following operations:
  • program 910 may be specifically used to cause the processor 902 to perform the following operations:
  • program 910 may be specifically used to cause the processor 902 to perform the following operations:
  • the screen resolution and standard resolution of the current screen determine the horizontal scaling ratio between the horizontal resolution of the current screen and the horizontal resolution of the standard resolution
  • the vertical resolution difference is determined.
  • program 910 may be specifically used to cause the processor 902 to perform the following operations:
  • the preset layout template is scaled according to the horizontal scaling ratio, and the initial page layout template is determined to adapt to the horizontal display of the current screen;
  • the vertical resolution difference and the number of vertical intervals adjust the vertical interval between the interface elements in the initial page layout template to determine the current page layout template to fit the vertical display of the current screen.
  • program 910 may be specifically used to cause the processor 902 to perform the following operations:
  • the vertical resolution difference if the vertical resolution of the current screen after zooming is greater than the vertical resolution of the standard resolution, the vertical spacing between interface elements is adjusted to extend the average adjustment distance, and the current page layout template is determined; or
  • the vertical spacing between the interface elements is adjusted to reduce the average adjustment distance, and the current page layout template is determined.
  • program 910 may be specifically used to cause the processor 902 to perform the following operations:
  • the interval distance between the vertical intervals between the interface elements in the initial page layout template is adjusted to determine the current page layout template.
  • program 910 may be specifically used to cause the processor 902 to perform the following operations:
  • the vertical size of each interface element in the current page layout template is compressed, and the display content in each interface element is reduced, so that the distance between each vertical interval is not less than the preset distance Lower distance threshold;
  • the vertical size of each interface element in the current page layout template is enlarged so that the distance between each vertical interval is not greater than the preset upper limit distance threshold.
  • program 910 may be specifically used to cause the processor 902 to perform the following operations:
  • program 910 may be specifically used to cause the processor 902 to perform the following operations:
  • the preset layout template is zoomed according to the full-screen zoom ratio, and the current page layout template is determined to fit the current screen for display.
  • modules or units or components in the embodiments can be combined into one module or unit or component, and in addition, they can be divided into multiple sub-modules or sub-units or sub-components. Except that at least some of such features or processes or units are mutually exclusive, any combination can be used to compare all the features disclosed in this specification (including the accompanying claims, abstract, and drawings) and any method or device thus disclosed. All processes or units are combined. Unless expressly stated otherwise, each feature disclosed in this specification (including the accompanying claims, abstract and drawings) may be replaced by an alternative feature providing the same, equivalent or similar purpose.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

一种屏幕适配显示方法、电子设备及计算机存储介质,用于调整页面布局以适配屏幕显示。其中方法包括:获取当前屏幕待显示页面的预设布局模板(101);检测当前屏幕的屏幕长宽比与预设布局模板的标准长宽比是否一致(102);若屏幕长宽比与标准长宽比不一致,则依据屏幕长宽比、标准长宽比以及预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配当前屏幕进行显示(103)。

Description

屏幕适配显示方法、电子设备及计算机存储介质
相关申请的交叉参考
本申请要求于2019年1月31日提交中国专利局、申请号为2019101003264、名称为“屏幕适配显示方法、电子设备及计算机存储介质”的中国专利申请的优先权,其全部内容通过引用结合在本申请中。
技术领域
本公开实施例涉及计算机技术领域,具体涉及一种屏幕适配显示方法、电子设备及计算机存储介质。
背景技术
随着智能设备配合计算机技术的快速发展,基于不同屏幕规格的智能设备越来越普及于大众。
目前,不同屏幕规格的智能设备在现有市场当中的占有率不同。相应地,各类软件例如电子书等,通常会基于主流屏幕规格的智能设备而对用户界面进行设计,得到主流屏幕规格对应页面布局模板,从而以该页面布局模板为标准,在各类智能设备上进行显示。
其中,主流屏幕规格的智能设备基于对应页面布局模板可以得到屏幕适配显示。然而,其他屏幕规格的智能设备无法依据主流屏幕规格对应页面布局模板进行适配显示,进而影响页面信息的有效显示,降低页面显示的美观性以及不同屏幕规格智能设备所属用户的用户体验。
发明内容
鉴于上述问题,提出了本公开实施例以便提供一种克服上述问题或者至少部分地解决上述问题的屏幕适配显示方法、电子设备及计算机存储介质。
根据本公开的一个方面,提供了一种屏幕适配显示方法,用于调整页面布局以适配屏幕显示,该方法包括:获取当前屏幕待显示页面的预设布局模板;检测当前屏幕的屏幕长宽比与预设布局模板的标准长宽比是否一致;若屏幕长宽比与标准长宽比不一致,则依据屏幕长宽比、标准长宽比以及预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配当前屏幕进行显示。
根据本公开的另一方面,提供了一种电子设备,包括:处理器、存储器、通信接口和通信总线,处理器、存储器和通信接口通过通信总线完成相互间的通信;存储器用于存放至少一可执行指令,可执行指令使处理器执行以下操作:获取当前屏幕待显示页面的预设布局模板;检测当前屏幕的屏幕长宽比与预设布局模板的标准长宽比是否一致;若屏幕长宽比与标准长宽比不一致,则依据屏幕长宽比、标准长宽比以及预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配当前屏幕进行显示。
根据本公开的又一方面,提供了一种非易失性计算机可读存储介质,该 非易失性计算机可读存储介质中存储有至少一可执行指令,可执行指令使处理器执行以下操作:获取当前屏幕待显示页面的预设布局模板;检测当前屏幕的屏幕长宽比与预设布局模板的标准长宽比是否一致;若屏幕长宽比与标准长宽比不一致,则依据屏幕长宽比、标准长宽比以及预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配当前屏幕进行显示。
根据本公开的再一方面,还提供了一种计算机程序产品,该计算机程序产品包括存储在上述非易失性计算机可读存储介质上的计算机程序。
根据本公开的屏幕适配显示方法、电子设备及计算机存储介质,在进行页面显示之前,获取待显示页面的预设页面布局模板,通过对当前屏幕的屏幕长宽比与预设布局模板关联适配的标准屏幕长宽比进行比较,在确定不一致时,基于当前屏幕的屏幕长宽比、预设布局模板关联适配的标准长宽比以及预设布局模板所包括的界面元素数量,对待显示页面的页面布局进行调整,以适配当前屏幕进行显示。利用本实施例的屏幕适配显示方法,可以在页面布局模板与当前屏幕不适配的情况下,通过对页面布局的调整,实现了待显示页面在当前屏幕的适配显示,避免了页面中出现大量空白或不能完全显示的现象,从而提高了页面信息显示的有效性、页面显示的美观性以及不同屏幕规格智能设备所属用户的用户体验。
上述说明仅是本公开实施例技术方案的概述,为了能够更清楚了解本公开实施例的技术手段,而可依照说明书的内容予以实施,并且为了让本公开实施例的上述和其它目的、特征和优点能够更明显易懂,以下特举本公开实施例的具体实施方式。
附图概述
通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本公开的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:
图1示出了本公开实施例一提供的一种屏幕适配显示方法的流程图;
图2示出了本公开实施例一提供的页面布局调整的示例图;
图3示出了本公开实施例二提供的一种屏幕适配显示方法的流程图;
图4示出了本公开实施例二提供的页面布局调整的另一示例图;
图5示出了本公开实施例二提供的页面布局调整的另一示例图;
图6示出了本公开实施例二提供的页面布局调整的另一示例图;
图7示出了本公开实施例二提供的页面布局调整的另一示例图;
图8示出了本公开实施例三提供的一种屏幕适配显示方法的流程图;
图9示出了本公开实施例五提供的一种电子设备的结构示意图。
本公开的较佳实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示 了本公开的示例性实施例,然而应当理解,可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反,提供这些实施例是为了能够更透彻地理解本公开,并且能够将本公开的范围完整的传达给本领域的技术人员。
实施例一
图1示出了本公开实施例一提供的一种屏幕适配显示方法的流程图,用于调整页面布局以适配屏幕显示。如图1所示,该方法包括以下步骤:
步骤S101,获取当前屏幕待显示页面的预设布局模板。
在本公开具体实施例中,当前屏幕是指用户所持电子设备进行页面显示的屏幕。通过对电子设备的系统接口,可以获得当前屏幕的属性信息。其中,当前屏幕的属性信息可以包括屏幕分辨率以及屏幕比例等长宽比信息。
本实施例中,待显示页面是指电子设备屏幕当前即将显示但并未显示出来的页面。待显示页面可以为应用程序所关联的任何显示页面,页面中可以包括各种形式的界面元素。相应地,预设布局模板是指应用程序后台开发人员预先设计的页面布局模板。预设布局模板以预先指定的屏幕分辨率为基准,例如当下主流的分辨率,在预设布局模板中,预先设计了页面中各界面元素所显示的具体内容、界面元素的显示位置以及各界面元素之间的间隔等布局设计。从而电子设备可以通过调用预设布局模板,按照预设布局模板中规定的页面布局进行关联页面的显示。
具体地,在当前屏幕即将显示待显示页面时,电子设备可以从服务端获取待显示页面的预设布局模板。或者,预设布局模板可以在应用程序的安装时,预先保存在电子设备的本地存储中,从而电子设备可以从本地存储中获取待显示页面的预设布局模板。
步骤S102,检测当前屏幕的屏幕长宽比与预设布局模板的标准长宽比是否一致。
在本公开具体实施例中,长宽比是指屏幕宽度和高度之间的比例,还可以称为纵横比或屏幕比例,通常由屏幕的较长长度与较短长度之间的比值来表示,可以根据屏幕物理分辨率计算得到。长屏是指屏幕的纵向长度明显超过横向长度的屏幕,宽屏是指屏幕的横向长度明显超过纵向长度的屏幕。不同屏幕在长宽比相同的情况下,其分辨率不一定相同。例如,根据现有电子设备所采用的屏幕,屏幕长宽比可以包括16:9或19:9等,相应地,屏幕分辨率分可以为1080×1920或1080×2280,但不限于此。其中针对1080×1920分辨率,表示屏幕水平方向含有像素数量为1080个,竖直方向含有像素数量为1920个。
本实施例中,以屏幕或画面正常显示为基准,确定纵向长度与横向长度的比值来表示长宽比。相应地,当前屏幕的屏幕长宽比是指当前屏幕正常显示时,例如竖屏或横屏,屏幕的纵向长度与横向长度的比值。由于预设布局模板适配于指定的屏幕长宽比或屏幕分辨率,例如当前主流的屏幕,因此将预设布局模板所适配的屏幕长宽比称为标准长宽比,将预设布局模板所适配的屏幕分辨率称为标准分辨率。
具体地,针对当前电子设备的当前屏幕,可以通过系统接口获取当前屏 幕的屏幕信息,获取屏幕长宽比,或者根据屏幕分辨率及屏幕显示方向确定屏幕长宽比。针对预设布局模板,可以获取预设布局模板所适配的标准长宽比,或者根据预设布局模板所适配的屏幕分辨率确定标准长宽比。并将屏幕长宽比与标准长宽比进行比较,判断当前屏幕的屏幕长宽比是否符合标准长宽比。
其中,若当前屏幕的屏幕长宽比与标准长宽比不一致,则可以通过下述页面布局的调整方式对预设布局模板进行调整,以适配当前屏幕显示待显示页面。若当前屏幕的屏幕长宽比与标准长宽比一致,则可以进一步确定当前屏幕的屏幕分辨率是否符合标准分辨率。若屏幕分辨率与标准分辨率不一致,则可以通过页面整体布局的调整方式对预设布局模板进行调整,以适配当前屏幕显示待显示页面;若屏幕分辨率与标准分辨率一致,则可以直接进行待显示页面的显示。
步骤S103,若屏幕长宽比与标准长宽比不一致,则依据屏幕长宽比、标准长宽比以及预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配当前屏幕进行显示。
在本公开具体实施例中,在不区分当前屏幕的屏幕长宽比或屏幕分辨率的情况下,若当前屏幕直接按照预设页面布局模板进行页面显示,则可能存在预设页面布局模板与当前屏幕不适配的情况,进而导致当前屏幕中出现空白或显示不完整的现象。因此,若屏幕长宽比与标准长宽比不一致,则有必要对预设页面布局模板中的布局细节进行调整,例如对各界面元素之间间隔距离的调整,以及对各界面元素尺寸及其显示内容的调整等,以适配当前屏幕进行显示,使页面显示更加协调。
其中,界面元素是指可满足交互需求的软件或系统界面所包含的满足用户交互要求的一系列元素,例如窗口、对话框、菜单、滚动条以及图形等界面元素。预设布局模板所包括的界面元素数量可以是指预设布局模板中所包括的所有界面元素的数量,也可以为预设布局模板中纵向排列的界面元素的数据。
具体地,根据屏幕长宽比和标准长宽比,可以通过比例关系推导,在当前屏幕与预设布局模板的横向长度比例相同的情况下,确定当前屏幕与预设布局模板的纵向长度比例差值。或者,根据屏幕分辨率或标准分辨率,在当前屏幕与预设布局模板的横向像素数量相同的情况下,确定当前屏幕与预设布局模板的纵向像素数量差值。并根据预设布局模板所包括的界面元素数量,确定预设布局模板中各界面元素之间的纵向间隔的数量。从而依据纵向长度比例差值或纵向像素数量差值,以及纵向间隔的数量,基于预设布局模板对待显示页面的页面布局进行调整,以对预设布局模板进行各界面元素之间的纵向间隔的拉伸或压缩,其中还可以对各界面元素的尺寸及其显示内容进行调整,实现将待显示页面充满当前屏幕进行显示或将待显示页面完整的显示在当前屏幕中。
下面以一个示例进行说明:
图2为页面布局调整的示例图。假设应用程序在开发时,针对当前主流手机屏幕进行页面布局设计,即预设布局模板基于手机屏幕长宽比为16:9或 屏幕分辨率为1080×1920适配设计,如图2左图所示。若当前屏幕的屏幕长宽比为19:9或屏幕分辨率为1080×2280,则当前屏幕相对于预设布局模板所适配的屏幕而言,屏幕的横向长度或横向像素数量相同,而当前屏幕的纵向长度比预设布局模板所适配的屏幕的纵向长度长,即可以将集成当前屏幕的手机称为长屏手机。则在长屏手机即将显示待显示页面时,若按照预设布局模板直接显示,则显示页面如图2中间图所示,长屏手机屏幕界面下方出现大量空白。进而本实施例获取待显示页面关联的预设布局模板,通过当前屏幕的屏幕长宽比与标准长宽比的比较,即屏幕长宽比为19:9与标准长宽比16:9不一致,确定在页面布局适配调整后才能够正常显示。
因此,基于当前屏幕与预设布局模板的横向长度比例相同的情况下,确定当前屏幕与预设布局模板的纵向长度比例差值为3。其中,如图2所示,假设预设布局模板中的纵向界面元素数量为5,则确定预设布局模板中包括的纵向间隔为4个。则将纵向长度比例差值平均配置在各个纵向间隔的间隔距离中,即将长屏手机的纵向长度的[(1/19)*(3/4)]的长度分别配置在各个纵向间隔的间隔距离中。或者,基于当前屏幕与预设布局模板的横向像素数量相同的情况下,确定当前屏幕与预设布局模板的纵向像素数量差值为360。则将纵向像素数量差值平均配置在各个纵向间隔的间隔距离中,即将90行像素分别配置在各个纵向间隔的间隔距离中。最终基于调整后的页面布局进行显示如图2右图所示,以此拉伸长屏手机中各界面元素之间间隔的距离,以使待显示页面充满于长屏手机中显示。
值得注意的是,上述示例只是对本方案实现效果的举例性说明,而不限制不方案的具体实现方式,且具体实现方式不局限于此。
此外,本实施例还可以根据各界面元素显示内容的重要程度以及吸引用户程度等评价因素,预先为各界面元素设置显示等级。从而在页面布局调整时,根据各界面元素的显示等级,为各界面元素相邻的至少一个纵向间隔设置权重,并依据纵向长度比例差值或纵向像素数量差值,以及纵向间隔数量和各纵向间隔的权重,调整初始页面布局模板中各界面元素之间纵向间隔的间隔距离。其中,本实施例还可以预先设置纵向间隔的下限距离阈值以及上限距离阈值中的至少一个,在纵向间隔调整后,若存在纵向间隔的间隔距离超过下限距离阈值或上限距离阈值,则可以对对应界面元素的纵向尺寸进行调整,并适应性调整其中的显示内容。
本实施例在检测屏幕长宽比与标准长宽比一致的情况下,则可以确定当前屏幕的屏幕分辨率与标准分辨率之间的全屏缩放比例;按照全屏缩放比例对预设布局模板进行缩放处理,确定当前页面布局模板,以适配当前屏幕进行显示。
根据本实施例提供的屏幕适配显示方法,可以在进行页面显示之前,获取待显示页面的预设页面布局模板,通过对当前屏幕的屏幕长宽比与预设布局模板关联适配的标准屏幕长宽比进行比较,在确定不一致时,基于当前屏幕的屏幕长宽比、预设布局模板关联适配的标准长宽比以及预设布局模板所包括的界面元素数量,对待显示页面的页面布局进行调整,以适配当前屏幕进行显示。利用本实施例的屏幕适配显示方法,可以在页面布局模板与当前屏幕不适配的情况下,通过对页面布局的调整,实现了待显示页面在当前屏 幕的适配显示,避免了页面中出现大量空白或不能完全显示的现象,从而提高了页面信息显示的有效性、页面显示的美观性以及不同屏幕规格智能设备所属用户的用户体验。
实施例二
图3示出了本公开实施例二提供的一种屏幕适配显示方法的流程图,本实施例应用于调整页面布局以适配屏幕显示的场景。其中,依据屏幕长宽比、标准长宽比以及预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,包括:基于预设布局模板关联的标准分辨率的横向分辨率,确定当前屏幕的屏幕分辨率相对于标准分辨率的纵向分辨率差值;依据预设布局模板以及界面元素数量,确定待显示页面中各界面元素之间的纵向间隔数量;依据纵向分辨率差值以及纵向间隔数量,调整待显示页面的页面布局。如图3所示,该方法包括:
步骤S301,获取当前屏幕待显示页面的预设布局模板。
步骤S302,检测当前屏幕的屏幕长宽比与预设布局模板的标准长宽比是否一致。
步骤S303,若屏幕长宽比与标准长宽比不一致,则基于预设布局模板关联的标准分辨率的横向分辨率,确定当前屏幕的屏幕分辨率相对于标准分辨率的纵向分辨率差值。
在本公开具体实施例中,基于预设布局模板关联的标注分辨率,无论当前屏幕的屏幕分辨率在纵向或横向上存在任何差异,本实施例优选于,通过比例的变化优先将当前屏幕分辨率的横向分辨率与标准分辨率的横向分辨率调整一致的情况下,确定当前屏幕分辨率的纵向分辨率与标准分辨率的纵向分辨率之间的差值,从而将页面布局的调整归结为对预设布局模板中各界面元素之间的纵向间隔的间隔距离进行调整。
可选地,依据当前屏幕的屏幕分辨率以及标准分辨率,确定当前屏幕的横向分辨率与标准分辨率的横向分辨率之间的横向缩放比例;依据横向缩放比例,确定当前屏幕缩放后的纵向分辨率;依据当前屏幕缩放后的纵向分辨率,以及标准分辨率的纵向分辨率,确定纵向分辨率差值。
具体地,横向缩放比例是指当前屏幕的横向分辨率与标准分辨率的横向分辨率之间的缩放比例。本实施例不对屏幕进行调整,而是基于分辨率数值进行推导计算。其中,基于横向缩放比例,当前屏幕缩放后的横向分辨率与标准分辨率的横向分辨率保持一致,进而在横向分辨率相同的情况下,确定当前屏幕的纵向分辨率基于横向缩放比例缩放后的纵向分辨率,并将缩放后的纵向分辨率与标准分辨率的纵向分辨率之间的纵向分辨率差值。
下面仍以上述示例进行说明:
预设布局模板基于手机屏幕分辨率为1080×1920适配设计,即标准分辨率;当前屏幕的屏幕分辨率为1080×2280。则可以确定当前屏幕的横向分辨率1080与标准分辨率的横向分辨率1080之间的横向缩放比例为1。相应地,基于横向缩放比例,确定当前屏幕缩放后的纵向分辨率为2280。进而确 定缩放后的纵向分辨率与标准分辨率的纵向分辨率之间的纵向分辨率差值为360。基于上述推导计算过程,可以适用于任何屏幕参数的调整,例如老式手机的屏幕显示或新型手机的屏幕显示等。
步骤S304,依据预设布局模板以及界面元素数量,确定待显示页面中各界面元素之间的纵向间隔数量。
在本公开具体实施例中,界面元素数量可以是指预设布局模板中所包括的所有界面元素的数量,也可以为预设布局模板中纵向排列的界面元素的数据。相邻两个界面元素之间存在间隔,因此根据界面元素数量可以确定待显示页面中各界面元素之间的纵向间隔数量。其中,预设布局模板中各界面元素可能按照一纵列排列,也可能按照至少两个纵列进行排列,或者还可以交替式纵向排列。相应地,不同纵向位置上的间隔数量可能不同,因此可以依据预设布局模板以及界面元素数量,确定各纵向位置上的间隔数量,便于后续对全部纵向间隔进行调整。
步骤S305,依据纵向分辨率差值以及纵向间隔数量,调整待显示页面的页面布局。
在本公开具体实施例中,依据纵向分辨率差值以及纵向间隔数量,基于预设布局模板对待显示页面的页面布局进行调整,以对预设布局模板进行各界面元素之间的纵向间隔的拉伸或压缩,其中还可以对各界面元素的尺寸及其显示内容进行调整,实现将待显示页面充满当前屏幕进行显示,或将待显示页面完整的显示在当前屏幕中。
可选地,按照横向缩放比例对预设布局模板进行缩放处理,确定初始页面布局模板,以适配当前屏幕的横向显示;依据纵向分辨率差值以及纵向间隔数量,调整初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板,以适配当前屏幕的纵向显示。
本实施例中,基于推导参数,对预设布局模板本身进行调整,即在保证页面布局横向适配调整的前提下,再对页面布局进行纵向适配调整。因此,首先将页面布局模板按照横向缩放比例进行模板整体的缩放调整,得到初始页面布局模板,以使各界面元素在横向上适配当前屏幕显示。相应地,当前屏幕的纵向上可能存在空白或显示不完整的情况。进而依据纵向分辨率差值以及纵向间隔数量,确定各界面元素之间纵向间隔所需调整的间隔距离,从而得到当前页面布局模板,在纵向上同样适配当前屏幕,以使预设布局模板中的所有界面元素充满显示在当前屏幕中。
具体地,依据纵向分辨率差值以及纵向间隔数量,调整待显示页面的页面布局,可以通过多种方式来实现,本实施例在此以两种较典型的方式进行说明:方式一,将纵向分辨率差值平均配置于各界面元素之间的纵向间隔中;方式二,依据各界面元素的预设显示等级,将纵向分辨率差值加权配置于各界面元素之间的纵向间隔中。
方式一,依据纵向分辨率差值以及纵向间隔数量,确定平均调整距离;依据纵向分辨率差值,若当前屏幕缩放后的纵向分辨率大于标准分辨率的纵向分辨率,则将各界面元素之间纵向间隔的间隔距离调整延长平均调整距离,确定当前页面布局模板;或者若当前屏幕缩放后的纵向分辨率小于标准 分辨率的纵向分辨率,则将各界面元素之间纵向间隔的间隔距离调整缩减平均调整距离,确定当前页面布局模板。
其中,可以预先确定当前屏幕缩放后的纵向分辨率与标准分辨率的纵向分辨率之间做差顺序,从而根据纵向分辨率差值的正负,确定当前屏幕缩放后的纵向分辨率与标准分辨率的纵向分辨率的大小关系。若当前屏幕缩放后的纵向分辨率大于标准分辨率的纵向分辨率,则对初始页面布局模板中各假面元素之间的纵向间隔进行拉伸处理,即将各纵向间隔的间隔距离均延长平均调整距离,例如上述图2示例中的长屏手机。反之,若当前屏幕缩放后的纵向分辨率小于标准分辨率的纵向分辨率,则对初始页面布局模板中各界面元素之间的纵向间隔进行压缩处理,即将各纵向间隔的间隔距离缩减平均调整距离。如图4所示,图4左图为预设布局模板基于主流手机屏幕长宽比适配设计的页面布局,假设图4中间图为老式手机按照预设布局模板直接显示,则无法依据预设布局模板将待显示页面完全显示出来,因此在横向适配调整后,即预设布局模块的整体比例调整后,将各界面元素之间纵向间隔的间隔距离调整缩减平均调整距离。如图4右图所示。
方式二,依据当前页面布局模板中,各界面元素的显示内容关联的预设显示等级,确定各界面元素相邻的至少一个纵向间隔的权重;依据纵向分辨率差值、纵向间隔数量以及各纵向间隔的权重,调整初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板。
其中,可以根据各界面元素显示内容的重要程度以及吸引用户程度等评价因素,预先为各界面元素设置显示等级。从而在页面布局调整时,根据各界面元素的显示等级,为各界面元素相邻的至少一个纵向间隔设置权重。并依据纵向分辨率差值、纵向间隔数量以及各纵向间隔的权重,确定各纵向间隔的调整距离。最终,同样依据当前屏幕缩放后的纵向分辨率与标准分辨率的纵向分辨率的大小关系,分别对初始页面布局模板中各界面元素之间的纵向间隔进行对应调整。以对显示等级较为重要的界面元素进行突出显示,提高内容的显示效率,吸引更多的用户进行浏览,提高用户体验。
示例性地,图5左图为预设布局模板基于主流手机屏幕长宽比适配设计的页面布局,图5中间图为按照预设布局模板直接显示效果。如图5所示,该页面布局模板中包括5个界面元素。假设第一个界面元素的吸引用户程度最高,则预设第一个界面元素的显示等级为一级。假设第二至四个界面元素中显示内容的重要程度最高,则预设第二至四个界面元素的显示等级为二级,相应地,第五个界面元素的显示等级为三级。其中,一级为最高级,三级为最低级。因此,依据各界面元素的显示内容关联的预设显示等级,可以将第一个界面元素相邻的纵向间隔的权重设置为较大值,将第二至四个界面元素之间的纵向间隔的权重设置为中间值,将第五个界面元素相邻的纵向间隔的权重设置为最小值。进而突出显示能够吸引用户的第一界面元素,其次突出显示内容较为重要的第二至四个界面元素,而第五各界面元素正常显示,如图5右图所示。
其中,本实施例还可以预先设置纵向间隔的下限距离阈值以及上限距离阈值中的至少一个,在纵向间隔调整后,若存在纵向间隔的间隔距离超过下限距离阈值或上限距离阈值,则可以对对应界面元素的纵向尺寸进行调整, 并适应性调整其中的显示内容。
可选地,若各纵向间隔的间隔距离小于预设下限距离阈值,则压缩当前页面布局模板中各界面元素的纵向尺寸,并减少各界面元素中的显示内容,以使各纵向间隔的间隔距离不小于预设下限距离阈值。
具体地,预设下限距离阈值是指各界面元素之间纵向间隔的最小间隔距离,当纵向间隔的间隔距离小于预设下限距离阈值时,则不同界面元素之间可能存在重叠现象,如图6左三图所示。因此若各纵向间隔的间隔距离小于预设下限距离阈值,则压缩当前页面布局模板中各界面元素的纵向尺寸,并减少各界面元素中的显示内容,以使各纵向间隔的间隔距离不小于预设下限距离阈值,如图6左四图所示。其中,可以将各纵向间隔的间隔距离调整为预设下限距离阈值的距离大小,或者调整至预设下限距离阈值与预设上限距离阈值之间。
可选地,若各纵向间隔的间隔距离大于预设上限距离阈值,则扩大当前页面布局模板中各界面元素的纵向尺寸,以使各纵向间隔的间隔距离不大于预设上限距离阈值。
具体地,预设上限距离阈值是指各界面元素之间纵向间隔的最大间隔距离,当纵向间隔的间隔距离大于预设上限距离阈值时,则各界面元素之间纵向间隔的间隔距离可能存在大量空白,影响页面整体美观效果以及内容显示效率。因此若各纵向间隔的间隔距离大于预设上限距离阈值,则扩大当前页面布局模板中各界面元素的纵向尺寸,以使各纵向间隔的间隔距离不大于预设上限距离阈值。其中,可以将各纵向间隔的间隔距离调整为预设上限距离阈值的距离大小,或者调整至预设下限距离阈值与预设上限距离阈值之间。
相应地,在界面元素的纵向尺寸扩大调整后,可以适当增加界面元素中的显示内容。
可选地,依据当前页面布局模板中各界面元素扩大的纵向尺寸,以及当前页面布局模板中各界面元素的显示内容,确定各界面元素关联的潜在显示内容;将潜在显示内容增加显示在关联的界面元素中。
具体地,各界面元素的显示内容可以为文本、图标或图片等各种形式的显示内容。其中,对于受显示区域限制而无法完整显示的内容,例如文本等,则可以依据界面元素扩大的纵向尺寸,确定界面元素关联的潜在显示内容。进而将潜在显示内容增加显示在关联的界面元素中,提高内容显示效率,如图7所示。
根据本实施例提供的屏幕适配显示方法,可以在进行页面显示之前,获取待显示页面的预设页面布局模板,在确定当前屏幕的屏幕长宽比与预设布局模板关联适配的标准屏幕长宽比不一致时,基于当前屏幕的横向分辨率与标准分辨率的横向分辨率一致的情况下,根据当前屏幕的纵向分辨率与标准分辨率的纵向分辨率之间的纵向分辨率差值,以及预设布局模板中各界面元素之间纵向间隔的数量,对页面中各界面元素之间纵向间隔的间隔距离进行调整,以适配当前屏幕进行显示。其中,可以根据纵向分辨率差值对各纵向间隔进行平均配置,也可以根据各界面元素的预设显示等级,对各纵向间隔进行加权配置。并对布局调整后的界面元素的纵向尺寸及其显示内容进行适 应性调整。利用本实施例的屏幕适配显示方法,可以在页面布局模板与当前屏幕不适配的情况下,通过对页面布局的调整,实现了待显示页面在当前屏幕的适配显示,避免了页面中出现大量空白或不能完全显示的现象,从而提高了页面信息显示的有效性、页面显示的美观性以及不同屏幕规格智能设备所属用户的用户体验。
实施例三
图8示出了本公开实施例三提供的一种屏幕适配显示方法的流程图,本实施例应用于调整页面布局以适配屏幕显示。如图8所示,该方法包括以下步骤:
步骤S801,获取当前屏幕待显示页面的预设布局模板。
步骤S802,检测当前屏幕的屏幕长宽比与预设布局模板的标准长宽比是否一致。
步骤S803,若屏幕长宽比与标准长宽比一致,则确定当前屏幕的屏幕分辨率与标准分辨率之间的全屏缩放比例。
在本公开具体实施例中,由于当前屏幕的屏幕长宽比与标准长宽比一致,则预设布局模板整体缩放后即可适配当前屏幕显示。因此确定当前屏幕的屏幕分辨率与标准分辨率之间的比值即为全屏缩放比例。
步骤S804,按照全屏缩放比例对预设布局模板进行缩放处理,确定当前页面布局模板,以适配当前屏幕进行显示。
在本公开具体实施例中,按照全屏缩放比例对预设布局模板整体进行缩放处理,得到当前页面布局模板,并显示在当前屏幕中。其中,当当前屏幕的屏幕分辨率与标准分辨率相同时,则可以视为全屏缩放比例为1,直接按照预设布局模板进行显示即可。
根据本实施例提供的屏幕适配显示方法,可以在进行页面显示之前,获取待显示页面的预设页面布局模板,在确定当前屏幕的屏幕长宽比与预设布局模板关联适配的标准屏幕长宽比一致时,确定当前屏幕的屏幕分辨率与标准分辨率直接的比值作为全屏缩放比例,根据全屏缩放比例对预设布局模板整体进行缩放处理即可。利用本实施例的屏幕适配显示方法,可以在页面布局模板与当前屏幕不适配的情况下,通过对页面布局的调整,实现了待显示页面在当前屏幕的适配显示,避免了页面中出现大量空白或不能完全显示的现象,从而提高了页面信息显示的有效性、页面显示的美观性以及不同屏幕规格智能设备所属用户的用户体验。
实施例四
本公开实施例四还提供了一种非易失性计算机可读存储介质,改非易失性计算机可读存储介质存储有至少一可执行指令,该计算机可执行指令可执行上述任意方法实施例中的屏幕适配显示方法。
可执行指令具体可以用于使得处理器执行以下操作:
获取当前屏幕待显示页面的预设布局模板;
检测所述当前屏幕的屏幕长宽比与预设布局模板的标准长宽比是否一致;
若屏幕长宽比与标准长宽比不一致,则依据屏幕长宽比、标准长宽比以及预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配所述当前屏幕进行显示。
在一种可选的方式中,可执行指令还使所述处理器执行以下操作:
基于预设布局模板关联的标准分辨率的横向分辨率,确定当前屏幕的屏幕分辨率相对于标准分辨率的纵向分辨率差值;
依据预设布局模板以及界面元素数量,确定待显示页面中各界面元素之间的纵向间隔数量;
依据纵向分辨率差值以及纵向间隔数量,调整待显示页面的页面布局。
在一种可选的方式中,可执行指令还使所述处理器执行以下操作:
依据当前屏幕的屏幕分辨率以及标准分辨率,确定当前屏幕的横向分辨率与标准分辨率的横向分辨率之间的横向缩放比例;
依据横向缩放比例,确定当前屏幕缩放后的纵向分辨率;
依据当前屏幕缩放后的纵向分辨率,以及标准分辨率的纵向分辨率,确定纵向分辨率差值。
在一种可选的方式中,可执行指令还使所述处理器执行以下操作:
按照横向缩放比例对预设布局模板进行缩放处理,确定初始页面布局模板,以适配当前屏幕的横向显示;
依据纵向分辨率差值以及纵向间隔数量,调整初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板,以适配当前屏幕的纵向显示。
在一种可选的方式中,可执行指令还使处理器执行以下操作:
依据纵向分辨率差值以及纵向间隔数量,确定平均调整距离;
依据纵向分辨率差值,若当前屏幕缩放后的纵向分辨率大于标准分辨率的纵向分辨率,则将各界面元素之间纵向间隔的间隔距离调整延长平均调整距离,确定当前页面布局模板;或者
若当前屏幕缩放后的纵向分辨率小于标准分辨率的纵向分辨率,则将各界面元素之间纵向间隔的间隔距离调整缩减平均调整距离,确定当前页面布局模板。
在一种可选的方式中,可执行指令还使处理器执行以下操作:
依据当前页面布局模板中,各界面元素的显示内容关联的预设显示等级,确定各界面元素相邻的至少一个纵向间隔的权重;
依据纵向分辨率差值、纵向间隔数量以及各纵向间隔的权重,调整初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板。
在一种可选的方式中,可执行指令还使处理器执行以下操作:
若各纵向间隔的间隔距离小于预设下限距离阈值,则压缩当前页面布局模板中各界面元素的纵向尺寸,并减少各界面元素中的显示内容,以使各纵向间隔的间隔距离不小于预设下限距离阈值;或者
若各纵向间隔的间隔距离大于预设上限距离阈值,则扩大当前页面布局模板中各界面元素的纵向尺寸,以使各纵向间隔的间隔距离不大于预设上限距离阈值。
在一种可选的方式中,可执行指令还使处理器执行以下操作:
依据当前页面布局模板中各界面元素扩大的纵向尺寸,以及当前页面布局模板中各界面元素的显示内容,确定各界面元素关联的潜在显示内容;
将潜在显示内容增加显示在关联的界面元素中。
在一种可选的方式中,可执行指令还使处理器执行以下操作:
若屏幕长宽比与标准长宽比一致,则确定所述当前屏幕的屏幕分辨率与标准分辨率之间的全屏缩放比例;
按照全屏缩放比例对预设布局模板进行缩放处理,确定当前页面布局模板,以适配所述当前屏幕进行显示。
实施例五
图9示出了根据本公开实施例五提供的一种电子设备的结构示意图,本公开具体实施例并不对电子设备的具体实现做限定。
如图9所示,该电子设备可以包括:处理器(processor)902、通信接口(Communications Interface)904、存储器(memory)906、以及通信总线908。
其中:
处理器902、通信接口904、以及存储器906通过通信总线908完成相互间的通信。
通信接口904,用于与其它设备比如客户端或其它服务器等的网元通信。
处理器902,用于执行程序910,具体可以执行上述屏幕适配显示方法实施例中的相关步骤。
具体地,程序910可以包括程序代码,该程序代码包括计算机操作指令。
处理器902可能是中央处理器CPU,或者是特定集成电路ASIC(Application Specific Integrated Circuit),或者是被配置成实施本公开实施例的一个或多个集成电路。电子设备包括的一个或多个处理器,可以是同一类型的处理器,如一个或多个CPU;也可以是不同类型的处理器,如一个或多个CPU以及一个或多个ASIC。
存储器906,用于存放程序910。存储器906可能包含高速RAM存储器,也可能还包括非易失性存储器(non-volatile memory),例如至少一个磁盘存储器。
程序910具体可以用于使得处理器902执行以下操作:
获取当前屏幕待显示页面的预设布局模板;
检测所述当前屏幕的屏幕长宽比与预设布局模板的标准长宽比是否一致;
若屏幕长宽比与标准长宽比不一致,则依据屏幕长宽比、标准长宽比以及预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配当前屏幕进行显示。
在一种可选的方式中,程序910具体还可以用于使得处理器902执行以下操作:
基于预设布局模板关联的标准分辨率的横向分辨率,确定当前屏幕的屏幕分辨率相对于标准分辨率的纵向分辨率差值;
依据预设布局模板以及所述界面元素数量,确定待显示页面中各界面元素之间的纵向间隔数量;
依据纵向分辨率差值以及纵向间隔数量,调整待显示页面的页面布局。
在一种可选的方式中,程序910具体还可以用于使得处理器902执行以下操作:
依据当前屏幕的屏幕分辨率以及标准分辨率,确定当前屏幕的横向分辨率与标准分辨率的横向分辨率之间的横向缩放比例;
依据横向缩放比例,确定当前屏幕缩放后的纵向分辨率;
依据当前屏幕缩放后的纵向分辨率,以及标准分辨率的纵向分辨率,确定纵向分辨率差值。
在一种可选的方式中,程序910具体还可以用于使得处理器902执行以下操作:
按照横向缩放比例对预设布局模板进行缩放处理,确定初始页面布局模板,以适配当前屏幕的横向显示;
依据纵向分辨率差值以及纵向间隔数量,调整初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板,以适配当前屏幕的纵向显示。
在一种可选的方式中,程序910具体还可以用于使得处理器902执行以下操作:
依据纵向分辨率差值以及纵向间隔数量,确定平均调整距离;
依据纵向分辨率差值,若当前屏幕缩放后的纵向分辨率大于标准分辨率的纵向分辨率,则将各界面元素之间纵向间隔的间隔距离调整延长平均调整距离,确定当前页面布局模板;或者
若当前屏幕缩放后的纵向分辨率小于标准分辨率的纵向分辨率,则将各界面元素之间纵向间隔的间隔距离调整缩减平均调整距离,确定当前页面布局模板。
在一种可选的方式中,程序910具体还可以用于使得处理器902执行以下操作:
依据当前页面布局模板中,各界面元素的显示内容关联的预设显示等级,确定各界面元素相邻的至少一个纵向间隔的权重;
依据纵向分辨率差值、纵向间隔数量以及各纵向间隔的权重,调整初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板。
在一种可选的方式中,程序910具体还可以用于使得处理器902执行以下操作:
若各纵向间隔的间隔距离小于预设下限距离阈值,则压缩当前页面布局模板中各界面元素的纵向尺寸,并减少各界面元素中的显示内容,以使各纵向间隔的间隔距离不小于预设下限距离阈值;或者
若各纵向间隔的间隔距离大于预设上限距离阈值,则扩大当前页面布局模板中各界面元素的纵向尺寸,以使各纵向间隔的间隔距离不大于预设上限距离阈值。
在一种可选的方式中,程序910具体还可以用于使得处理器902执行以下操作:
依据所述当前页面布局模板中各界面元素扩大的纵向尺寸,以及当前页面布局模板中各界面元素的显示内容,确定各界面元素关联的潜在显示内容;
将潜在显示内容增加显示在关联的界面元素中。
在一种可选的方式中,程序910具体还可以用于使得处理器902执行以下操作:
若屏幕长宽比与标准长宽比一致,则确定当前屏幕的屏幕分辨率与标准分辨率之间的全屏缩放比例;
按照全屏缩放比例对预设布局模板进行缩放处理,确定当前页面布局模板,以适配当前屏幕进行显示。
在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述,构造这类系统所要求的结构是显而易见的。此外,本公开实施例也不针对任何特定编程语言。应当明白,可以利用各种编程语言实现在此描述的本公开实施例的内容,并且上面对特定语言所做的描述是为了披露本公开实施例的最佳实施方式。
在此处所提供的说明书中,说明了大量具体细节。然而,能够理解,本公开的实施例可以在没有这些具体细节的情况下实践。在一些实例中,并未详细示出公知的方法、结构和技术,以便不模糊对本说明书的理解。
类似地,应当理解,为了精简本公开并帮助理解各个公开方面中的一个或多个,在上面对本公开的示例性实施例的描述中,本公开实施例的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而,并不应将该公开的方法解释成反映如下意图:即所要求保护的本公开要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说,如下面的权利要求书所反映的那样,公开方面在于少于前面公开的单个实施例的所有特征。因此, 遵循具体实施方式的权利要求书由此明确地并入该具体实施方式,其中每个权利要求本身都作为本公开的单独实施例。
本领域那些技术人员可以理解,可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件,以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征或过程或者单元中的至少一些是相互排斥之外,可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述,本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外,本领域的技术人员能够理解,尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征,但是不同实施例的特征的组合意味着处于本公开的范围之内并且形成不同的实施例。例如,在下面的权利要求书中,所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
应该注意的是上述实施例对本公开进行说明而不是对本公开进行限制,并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中,不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本公开实施例可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (20)

  1. 一种屏幕适配显示方法,用于调整页面布局以适配屏幕显示,其中,所述方法包括:
    获取当前屏幕待显示页面的预设布局模板;
    检测所述当前屏幕的屏幕长宽比与所述预设布局模板的标准长宽比是否一致;
    若所述屏幕长宽比与所述标准长宽比不一致,则依据所述屏幕长宽比、所述标准长宽比以及所述预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配所述当前屏幕进行显示。
  2. 根据权利要求1所述的方法,其中,所述依据所述屏幕长宽比、所述标准长宽比以及所述预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,包括:
    基于所述预设布局模板关联的标准分辨率的横向分辨率,确定所述当前屏幕的屏幕分辨率相对于所述标准分辨率的纵向分辨率差值;
    依据所述预设布局模板以及所述界面元素数量,确定待显示页面中各界面元素之间的纵向间隔数量;
    依据所述纵向分辨率差值以及所述纵向间隔数量,调整所述待显示页面的页面布局。
  3. 根据权利要求2所述的方法,其中,所述基于所述预设布局模板关联的标准分辨率的横向分辨率,确定所述当前屏幕的屏幕分辨率相对于所述标准分辨率的纵向分辨率差值,包括:
    依据所述当前屏幕的屏幕分辨率以及所述标准分辨率,确定当前屏幕的横向分辨率与标准分辨率的横向分辨率之间的横向缩放比例;
    依据所述横向缩放比例,确定当前屏幕缩放后的纵向分辨率;
    依据所述当前屏幕缩放后的纵向分辨率,以及标准分辨率的纵向分辨率,确定纵向分辨率差值。
  4. 根据权利要求3所述的方法,其中,所述依据所述纵向分辨率差值以及所述纵向间隔数量,调整所述待显示页面的页面布局,包括:
    按照所述横向缩放比例对所述预设布局模板进行缩放处理,确定初始页面布局模板,以适配当前屏幕的横向显示;
    依据所述纵向分辨率差值以及所述纵向间隔数量,调整所述初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板,以适配所述当前屏幕的纵向显示。
  5. 根据权利要求4所述的方法,其中,所述依据所述纵向分辨率差值以及所述纵向间隔数量,调整所述初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板,包括:
    依据所述纵向分辨率差值以及所述纵向间隔数量,确定平均调整距离;
    依据所述纵向分辨率差值,若所述当前屏幕缩放后的纵向分辨率大于所述标准分辨率的纵向分辨率,则将所述各界面元素之间纵向间隔的间隔距离调整延长所述平均调整距离,确定当前页面布局模板;或者
    若所述当前屏幕缩放后的纵向分辨率小于所述标准分辨率的纵向分辨率,则将所述各界面元素之间纵向间隔的间隔距离调整缩减所述平均调整距离,确定当前页面布局模板。
  6. 根据权利要求4所述的方法,其中,所述依据所述纵向分辨率差值以及所述纵向间隔数量,调整所述初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板,包括:
    依据所述当前页面布局模板中,各界面元素的显示内容关联的预设显示等级,确定各界面元素相邻的至少一个纵向间隔的权重;
    依据所述纵向分辨率差值、所述纵向间隔数量以及各纵向间隔的权重,调整所述初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板。
  7. 根据权利要求4-6中任一项所述的方法,其中,在所述依据所述纵向分辨率差值以及所述纵向间隔数量,调整所述初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板之后,还包括:
    若所述各纵向间隔的间隔距离小于预设下限距离阈值,则压缩当前页面布局模板中各界面元素的纵向尺寸,并减少各界面元素中的显示内容,以使各纵向间隔的间隔距离不小于所述预设下限距离阈值;或者
    若所述各纵向间隔的间隔距离大于预设上限距离阈值,则扩大所述当前页面布局模板中各界面元素的纵向尺寸,以使各纵向间隔的间隔距离不大于所述预设上限距离阈值。
  8. 根据权利要求7所述的方法,其中,在所述扩大所述当前页面布局模板中各界面元素的纵向尺寸之后,还包括:
    依据所述当前页面布局模板中各界面元素扩大的纵向尺寸,以及所述当前页面布局模板中各界面元素的显示内容,确定各界面元素关联的潜在显示内容;
    将所述潜在显示内容增加显示在关联的界面元素中。
  9. 根据权利要求1所述的方法,其中,在所述检测所述当前屏幕的屏幕长宽比与所述预设布局模板的标准长宽比是否一致之后,还包括:
    若所述屏幕长宽比与所述标准长宽比一致,则确定所述当前屏幕的屏幕分辨率与所述标准分辨率之间的全屏缩放比例;
    按照所述全屏缩放比例对所述预设布局模板进行缩放处理,确定当前页面布局模板,以适配所述当前屏幕进行显示。
  10. 一种电子设备,包括:处理器、存储器、通信接口和通信总线,所 述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信;
    所述存储器用于存放至少一可执行指令,所述可执行指令使所述处理器执行以下操作:
    获取当前屏幕待显示页面的预设布局模板;
    检测所述当前屏幕的屏幕长宽比与所述预设布局模板的标准长宽比是否一致;
    若所述屏幕长宽比与所述标准长宽比不一致,则依据所述屏幕长宽比、所述标准长宽比以及所述预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配所述当前屏幕进行显示。
  11. 根据权利要求10所述的电子设备,所述可执行指令还使所述处理器执行以下操作:
    基于所述预设布局模板关联的标准分辨率的横向分辨率,确定所述当前屏幕的屏幕分辨率相对于所述标准分辨率的纵向分辨率差值;
    依据所述预设布局模板以及所述界面元素数量,确定待显示页面中各界面元素之间的纵向间隔数量;
    依据所述纵向分辨率差值以及所述纵向间隔数量,调整所述待显示页面的页面布局。
  12. 根据权利要求11所述的电子设备,所述可执行指令还使所述处理器执行以下操作:
    依据所述当前屏幕的屏幕分辨率以及所述标准分辨率,确定当前屏幕的横向分辨率与标准分辨率的横向分辨率之间的横向缩放比例;
    依据所述横向缩放比例,确定当前屏幕缩放后的纵向分辨率;
    依据所述当前屏幕缩放后的纵向分辨率,以及标准分辨率的纵向分辨率,确定纵向分辨率差值。
  13. 根据权利要求12所述的电子设备,所述可执行指令还使所述处理器执行以下操作:
    按照所述横向缩放比例对所述预设布局模板进行缩放处理,确定初始页面布局模板,以适配当前屏幕的横向显示;
    依据所述纵向分辨率差值以及所述纵向间隔数量,调整所述初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板,以适配所述当前屏幕的纵向显示。
  14. 根据权利要求13所述的电子设备,所述可执行指令还使所述处理器执行以下操作:
    依据所述纵向分辨率差值以及所述纵向间隔数量,确定平均调整距离;
    依据所述纵向分辨率差值,若所述当前屏幕缩放后的纵向分辨率大于所 述标准分辨率的纵向分辨率,则将所述各界面元素之间纵向间隔的间隔距离调整延长所述平均调整距离,确定当前页面布局模板;或者
    若所述当前屏幕缩放后的纵向分辨率小于所述标准分辨率的纵向分辨率,则将所述各界面元素之间纵向间隔的间隔距离调整缩减所述平均调整距离,确定当前页面布局模板。
  15. 根据权利要求13所述的电子设备,所述可执行指令还使所述处理器执行以下操作:
    依据所述当前页面布局模板中,各界面元素的显示内容关联的预设显示等级,确定各界面元素相邻的至少一个纵向间隔的权重;
    依据所述纵向分辨率差值、所述纵向间隔数量以及各纵向间隔的权重,调整所述初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板。
  16. 根据权利要求13-15中任一项所述的电子设备,所述可执行指令还使所述处理器执行以下操作:
    若所述各纵向间隔的间隔距离小于预设下限距离阈值,则压缩当前页面布局模板中各界面元素的纵向尺寸,并减少各界面元素中的显示内容,以使各纵向间隔的间隔距离不小于所述预设下限距离阈值;或者
    若所述各纵向间隔的间隔距离大于预设上限距离阈值,则扩大所述当前页面布局模板中各界面元素的纵向尺寸,以使各纵向间隔的间隔距离不大于所述预设上限距离阈值。
  17. 根据权利要求16所述的电子设备,所述可执行指令还使所述处理器执行以下操作:
    依据所述当前页面布局模板中各界面元素扩大的纵向尺寸,以及所述当前页面布局模板中各界面元素的显示内容,确定各界面元素关联的潜在显示内容;
    将所述潜在显示内容增加显示在关联的界面元素中。
  18. 根据权利要求10所述的电子设备,所述可执行指令还使所述处理器执行以下操作:
    若所述屏幕长宽比与所述标准长宽比一致,则确定所述当前屏幕的屏幕分辨率与所述标准分辨率之间的全屏缩放比例;
    按照所述全屏缩放比例对所述预设布局模板进行缩放处理,确定当前页面布局模板,以适配所述当前屏幕进行显示。
  19. 一种非易失性计算机可读存储介质,所述非易失性计算机可读存储介质中存储有至少一可执行指令,所述可执行指令用于使处理器执行前述任一权利要求1-9中所述的屏幕适配显示方法。
  20. 一种计算机程序产品,该计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序,该计算机程序包括程序指令,当该程序指令被计算机执行时,使该计算机执行前述任一权利要求1-9所述的屏幕适配显示方法。
PCT/CN2019/119262 2019-01-31 2019-11-18 屏幕适配显示方法、电子设备及计算机存储介质 WO2020155785A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US17/427,465 US20220137796A1 (en) 2019-01-31 2019-11-18 Screen adaptation and displaying method, electronic device and computer storage medium

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910100326.4 2019-01-31
CN201910100326.4A CN109783181B (zh) 2019-01-31 2019-01-31 屏幕适配显示方法、电子设备及计算机存储介质

Publications (1)

Publication Number Publication Date
WO2020155785A1 true WO2020155785A1 (zh) 2020-08-06

Family

ID=66503960

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2019/119262 WO2020155785A1 (zh) 2019-01-31 2019-11-18 屏幕适配显示方法、电子设备及计算机存储介质

Country Status (3)

Country Link
US (1) US20220137796A1 (zh)
CN (1) CN109783181B (zh)
WO (1) WO2020155785A1 (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113253959A (zh) * 2021-05-26 2021-08-13 智慧泉城智能科技有限公司 一种适配不同大屏分辨率的前端投屏方法
CN114296724A (zh) * 2021-12-17 2022-04-08 中国船舶重工集团公司第七一五研究所 一种基于Qt的多分辨率自适应适配的声纳显控设计方法
CN114924679A (zh) * 2022-05-13 2022-08-19 深圳市宝泽科技有限公司 一种显示画面拉伸布局调整方法及装置
EP4184314A4 (en) * 2020-08-18 2024-01-03 Huawei Technologies Co., Ltd. DISPLAY INTERFACE ARRANGEMENT METHOD AND ELECTRONIC DEVICE

Families Citing this family (28)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109783181B (zh) * 2019-01-31 2019-12-20 掌阅科技股份有限公司 屏幕适配显示方法、电子设备及计算机存储介质
CN110262799A (zh) * 2019-06-03 2019-09-20 中国第一汽车股份有限公司 基于ivi系统的界面布局方法、显示方法、装置及设备
CN110321124B (zh) * 2019-06-20 2023-01-20 北京奇艺世纪科技有限公司 一种文本布局优化方法、装置及电子设备
CN110456999B (zh) * 2019-08-05 2023-07-11 深圳怡化电脑股份有限公司 节目创建方法、装置、电子设备及计算机可读存储介质
CN110609794B (zh) * 2019-09-12 2023-04-28 中国联合网络通信集团有限公司 页面检测方法及装置
CN112988561B (zh) * 2019-12-18 2023-09-08 腾讯科技(深圳)有限公司 检测显示配置代码的方法、装置、服务器和存储介质
CN111240557B (zh) * 2020-01-13 2021-04-06 口碑(上海)信息技术有限公司 页面显示方法、装置以及设备
US11461836B1 (en) * 2020-01-21 2022-10-04 Amazon Technologies, Inc. Computer-implemented method, system, and non-transitory computer-readable medium for providing user interface selectors
CN111241805A (zh) * 2020-02-10 2020-06-05 吕海港 一种pdf文档的版面重排方法
CN113474749B (zh) * 2020-03-20 2024-02-09 西安诺瓦星云科技股份有限公司 屏幕显示的控制方法、装置和系统
CN113474750B (zh) * 2020-03-20 2023-12-08 西安诺瓦星云科技股份有限公司 屏幕显示的控制方法、装置和系统
CN111596878B (zh) * 2020-05-13 2023-06-20 阿波罗智联(北京)科技有限公司 投屏方法、装置、设备以及存储介质
CN111600204B (zh) * 2020-06-05 2022-03-18 杭州交联电力设计股份有限公司 一种单组电气设备的自动排布方法
CN114090149B (zh) * 2020-08-21 2023-08-18 完美世界(重庆)互动科技有限公司 界面调整方法、装置、计算机设备及计算机可读存储介质
CN112181568A (zh) * 2020-09-27 2021-01-05 上海连尚网络科技有限公司 局部适配屏幕方法和设备
CN112181343B (zh) * 2020-10-15 2023-05-02 Oppo广东移动通信有限公司 显示方法、装置、电子设备以及存储介质
CN112423084B (zh) * 2020-11-11 2022-11-01 北京字跳网络技术有限公司 热点榜单的显示方法、装置、电子设备和存储介质
CN112395033A (zh) * 2020-11-18 2021-02-23 中国平安人寿保险股份有限公司 网页自适应方法及相关产品
CN112306442B (zh) * 2020-11-20 2023-05-12 Oppo广东移动通信有限公司 跨设备的内容投屏方法、装置、设备及存储介质
CN112579084A (zh) * 2020-12-17 2021-03-30 深圳集智数字科技有限公司 一种页面的拼装方法及装置
CN113127125B (zh) * 2021-04-22 2024-02-09 康键信息技术(深圳)有限公司 页面自动适配方法、装置、设备及存储介质
CN113626120A (zh) * 2021-08-04 2021-11-09 挂号网(杭州)科技有限公司 确定显示页面的方法、装置、电子设备及存储介质
CN114584831B (zh) * 2022-01-20 2024-04-02 百果园技术(新加坡)有限公司 提高视频清晰度的视频优化处理方法、装置、设备和存储介质
CN114489897B (zh) * 2022-01-21 2023-08-08 北京字跳网络技术有限公司 一种对象处理方法、装置、终端设备及介质
CN114610426B (zh) * 2022-03-04 2023-09-08 腾讯科技(深圳)有限公司 一种调整界面布局的方法、装置、设备及存储介质
CN117008752A (zh) * 2022-04-28 2023-11-07 华为技术有限公司 一种显示方法、装置及存储介质
CN115166186A (zh) * 2022-08-08 2022-10-11 广东长天思源环保科技股份有限公司 一种污水处理企业入水口水质在线自动监测系统
CN117389672B (zh) * 2023-10-31 2024-05-17 江苏缤原力科技有限公司 一种页面自适应适配方法、电子设备及计算机可读介质

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102270109A (zh) * 2011-08-23 2011-12-07 上海网达软件有限公司 不同分辨率的用户界面的自转换方法及自转换系统
CN102707946A (zh) * 2012-04-17 2012-10-03 Tcl集团股份有限公司 一种应用程序界面的处理方法及装置
CN103218195A (zh) * 2013-04-10 2013-07-24 广东欧珀移动通信有限公司 应用程序的显示调整方法及装置
CN104598107A (zh) * 2014-12-31 2015-05-06 乐视网信息技术(北京)股份有限公司 界面控件的生成方法及系统
CN106484883A (zh) * 2016-10-17 2017-03-08 北京邮电大学 网页加载方法和装置
US20170069297A1 (en) * 2014-03-04 2017-03-09 Feitian Technologies Co., Ltd. Screen adaptation method and apparatus
CN109783181A (zh) * 2019-01-31 2019-05-21 掌阅科技股份有限公司 屏幕适配显示方法、电子设备及计算机存储介质

Family Cites Families (24)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7124359B2 (en) * 1996-01-11 2006-10-17 Canon Kabushiki Kaisha Image edit device adapted to rapidly lay-out photographs into templates with means for preview and correction by user
US7210099B2 (en) * 2000-06-12 2007-04-24 Softview Llc Resolution independent vector display of internet content
JP2005004396A (ja) * 2003-06-11 2005-01-06 Sony Corp 情報表示方法及び情報表示装置、並びにコンピュータ・プログラム
JP4332477B2 (ja) * 2004-08-06 2009-09-16 キヤノン株式会社 レイアウト調整方法及び装置並びにプログラム
JP4241647B2 (ja) * 2005-03-04 2009-03-18 キヤノン株式会社 レイアウト制御装置、レイアウト制御方法及びレイアウト制御プログラム
JP2008020504A (ja) * 2006-07-11 2008-01-31 Meidensha Corp ディスプレイ装置の画像・文字表示方法
WO2009059062A2 (en) * 2007-10-31 2009-05-07 Stratovan Corporation Resolution independent layout
US9383916B2 (en) * 2009-09-30 2016-07-05 Microsoft Technology Licensing, Llc Dynamic image presentation
US20120159314A1 (en) * 2010-12-16 2012-06-21 Microsoft Corporation Adaptive content layout
US20130007602A1 (en) * 2011-06-29 2013-01-03 Apple Inc. Fixed layout electronic publications
US9396167B2 (en) * 2011-07-21 2016-07-19 Flipboard, Inc. Template-based page layout for hosted social magazines
US9952755B2 (en) * 2011-09-13 2018-04-24 Sony Interactive Entertainment Inc. Information processing device, information processing method, data structure of content file, GUI placement simulator, and GUI placement setting assisting method
US10185703B2 (en) * 2012-02-20 2019-01-22 Wix.Com Ltd. Web site design system integrating dynamic layout and dynamic content
US10789412B2 (en) * 2012-02-20 2020-09-29 Wix.Com Ltd. System and method for extended dynamic layout
US20160342406A1 (en) * 2014-01-06 2016-11-24 Johnson Controls Technology Company Presenting and interacting with audio-visual content in a vehicle
CN104182270A (zh) * 2014-08-25 2014-12-03 北京云巢动脉科技有限公司 虚拟机界面适应不同分辨率移动终端屏幕的显示方法
US10222840B2 (en) * 2014-10-15 2019-03-05 Samsung Electronics Co., Ltd. Display apparatus and controlling method thereof
US20160162242A1 (en) * 2014-12-03 2016-06-09 Sony Corporation Display apparatus and method for rendering digital content
US9805003B2 (en) * 2015-04-02 2017-10-31 Apple Inc. Rearranging layouts for different displays
CN105760178B (zh) * 2016-03-17 2019-03-26 网易(杭州)网络有限公司 对界面控件进行适配的方法及装置
US10339206B2 (en) * 2016-05-17 2019-07-02 Wing Aviation Llc Systems and methods for automatic determination of layout constraints
US20180143741A1 (en) * 2016-11-23 2018-05-24 FlyrTV, Inc. Intelligent graphical feature generation for user content
US10346004B2 (en) * 2017-01-18 2019-07-09 Michael E Murphy Systems and methods for intelligent layered interactive programmatic elements for fixed content
CN108628656A (zh) * 2018-05-09 2018-10-09 平安普惠企业管理有限公司 Ios设备上界面适配方法、装置、计算机设备及存储介质

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102270109A (zh) * 2011-08-23 2011-12-07 上海网达软件有限公司 不同分辨率的用户界面的自转换方法及自转换系统
CN102707946A (zh) * 2012-04-17 2012-10-03 Tcl集团股份有限公司 一种应用程序界面的处理方法及装置
CN103218195A (zh) * 2013-04-10 2013-07-24 广东欧珀移动通信有限公司 应用程序的显示调整方法及装置
US20170069297A1 (en) * 2014-03-04 2017-03-09 Feitian Technologies Co., Ltd. Screen adaptation method and apparatus
CN104598107A (zh) * 2014-12-31 2015-05-06 乐视网信息技术(北京)股份有限公司 界面控件的生成方法及系统
CN106484883A (zh) * 2016-10-17 2017-03-08 北京邮电大学 网页加载方法和装置
CN109783181A (zh) * 2019-01-31 2019-05-21 掌阅科技股份有限公司 屏幕适配显示方法、电子设备及计算机存储介质

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP4184314A4 (en) * 2020-08-18 2024-01-03 Huawei Technologies Co., Ltd. DISPLAY INTERFACE ARRANGEMENT METHOD AND ELECTRONIC DEVICE
CN113253959A (zh) * 2021-05-26 2021-08-13 智慧泉城智能科技有限公司 一种适配不同大屏分辨率的前端投屏方法
CN114296724A (zh) * 2021-12-17 2022-04-08 中国船舶重工集团公司第七一五研究所 一种基于Qt的多分辨率自适应适配的声纳显控设计方法
CN114924679A (zh) * 2022-05-13 2022-08-19 深圳市宝泽科技有限公司 一种显示画面拉伸布局调整方法及装置
CN114924679B (zh) * 2022-05-13 2024-05-24 深圳市宝泽科技有限公司 一种显示画面拉伸布局调整方法及装置

Also Published As

Publication number Publication date
CN109783181B (zh) 2019-12-20
US20220137796A1 (en) 2022-05-05
CN109783181A (zh) 2019-05-21

Similar Documents

Publication Publication Date Title
WO2020155785A1 (zh) 屏幕适配显示方法、电子设备及计算机存储介质
CN108446698B (zh) 在图像中检测文本的方法、装置、介质及电子设备
EP3606081A1 (en) On-screen comment display method and electronic device
WO2019134309A1 (zh) 页面展示方法、装置、电子终端及计算机存储介质
WO2016131390A1 (zh) 电子地图展示方法、装置及电子设备
EP2924590A1 (en) Page rendering method and apparatus
KR20200079697A (ko) 영상 처리 장치 및 그 영상 처리 방법
US10360659B2 (en) Method and apparatus for controlling image display during image editing
CN108476306B (zh) 一种图像显示的方法及终端设备
US20110145730A1 (en) Utilization of Browser Space
WO2020001022A1 (zh) 图片展示方法、计算设备及计算机存储介质
US9443494B1 (en) Generating bounding boxes for labels
US20120050269A1 (en) Information display device
TWI547853B (zh) 使用者介面顯示系統及方法
WO2020001024A1 (zh) 视图错层显示方法、电子设备及存储介质
WO2022193616A1 (zh) 应用页面的展示方法、电子设备及存储介质
WO2014026514A1 (zh) 网页浏览的渲染处理方法及装置和移动终端
WO2020001028A1 (zh) 图片错层显示方法、电子设备及存储介质
CN107861711B (zh) 页面适配方法及装置
CN115237522A (zh) 页面自适应展示方法及装置
US20220100300A1 (en) User interface system for display scaling events
US20180293775A1 (en) Image animation in a presentation document
CN105389308B (zh) 网页的显示处理方法及装置
WO2024051632A1 (zh) 图像处理方法、装置、介质及设备
JP6339550B2 (ja) 端末用プログラム、端末装置及び端末制御方法

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 19913959

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 19913959

Country of ref document: EP

Kind code of ref document: A1