Webpage display method and device, electronic equipment and storage medium

Abstract

The invention relates to a webpage display method and device, electronic equipment and a storage medium, and the method comprises the steps: obtaining a target node parameter of a to-be-displayed node in a current webpage, the target node parameter comprises a first size and a target unit type corresponding to the first size, setting a unit type as a density-independent pixel type or a pixel type according to the node type and the node size of the node during webpage layout; when the target unit type is a density-independent pixel type, converting the first size into a second size of the pixel type based on a window size of a current window used for displaying the current webpage in the electronic equipment, and displaying the to-be-displayed node in the current window based on the second size; and when the target unit type is the pixel type, displaying the to-be-displayed node in the current window based on the first size. According to the technical scheme, extensive amplification of the nodes under large-size equipment can be effectively avoided, and the information acquisition efficiency of the large-size mobile equipment is improved.

Description

Technical Field

[0001] This disclosure relates to the field of computer application technology, and in particular to a webpage display method, apparatus, electronic device, and storage medium. Background Technology

[0002] With the widespread use of mobile devices such as smartphones and tablets, browsing web pages via mobile devices has become a mainstream trend. This makes web page layout design crucial for the efficient presentation and smooth delivery of information, and even a key factor in improving user experience.

[0003] Currently, common web page layout methods include layouts based on the relative unit REM of the root element font size, media query layouts, and viewport width (vw) / viewport height (vh) percentage layouts. However, existing web page layout methods have significant shortcomings in cross-device adaptation. When a web page is displayed on different mobile devices, a proportional scaling strategy is usually used to adapt to devices of different sizes. This coarse approach not only fails to effectively utilize the display advantages of large-screen devices but also significantly reduces the effective information density within a unit of screen, creating an inverse correlation between increased screen size and decreased information retrieval efficiency. Summary of the Invention

[0004] In order to solve the above-mentioned technical problems, or at least partially solve the above-mentioned technical problems, at least one embodiment of the present disclosure provides a web page display method, apparatus, electronic device and storage medium.

[0005] Firstly, this disclosure provides a method for displaying web pages, including:

[0006] Obtain the target node parameters of the node to be displayed in the current webpage. The target node parameters include a first size and the target unit type corresponding to the first size. During webpage layout, the unit type is set to density-independent pixel type or pixel type according to the node type and node size.

[0007] When the target unit type is the density-independent pixel type, the first size is converted into a second size of the pixel type based on the window size of the current window used to display the current webpage in the electronic device, and the node to be displayed is displayed in the current window based on the second size;

[0008] When the target unit type is the pixel type, the node to be displayed is displayed in the current viewport based on the first size.

[0009] Secondly, this disclosure provides a webpage display device, including:

[0010] The parameter acquisition module is used to obtain the current parameter.

[0011] The target node parameters of the node to be displayed in the previous webpage include a first size and the target unit type corresponding to the first size. When laying out the webpage, the unit type is set to density-independent pixel type or pixel type according to the node type and node size.

[0012] The size conversion module is used to convert the first size into a second size of the pixel type when the target unit type is the density-independent pixel type, based on the window size of the current window used to display the current webpage in the electronic device;

[0013] The display module is used to display the node to be displayed in the current window based on the second size, or, if the target unit type is the pixel type, to display the node to be displayed in the current window based on the first size.

[0014] Thirdly, this disclosure provides an electronic device, including: a processor and a memory;

[0015] The processor executes the webpage display method as described in the first aspect by calling programs or instructions stored in the memory.

[0016] Fourthly, this disclosure provides a computer-readable storage medium that stores a program or instructions that cause a computer to perform the webpage display method as described in the first aspect.

[0017] Fifthly, this disclosure provides a computer program product for performing the webpage display method as described in the first aspect.

[0018] The technical solution provided in this disclosure has at least the following advantages compared with the prior art:

[0019] In this embodiment of the disclosure, target node parameters of the node to be displayed in the current webpage are obtained. The target node parameters include a first size and a target unit type corresponding to the first size. During webpage layout, the unit type is set to density-independent pixel type or pixel type according to the node type and node size. When the target unit type is density-independent pixel type, the first size is converted into a second size of pixel type based on the window size of the current window used to display the current webpage in the electronic device, and the node to be displayed is displayed in the current window based on the second size. When the target unit type is pixel type, the node to be displayed is displayed in the current window based on the first size. By adopting the above technical solution, the unit type of different nodes in the webpage can be flexibly set as density-independent pixel type or pixel type according to the node type and size during webpage layout. During webpage display, for nodes with the unit type of density-independent pixel type, the node is converted to pixel type size according to the current window size of the webpage, and then displayed according to the converted size. This achieves adaptive adjustment of node size according to window size, realizes consistency of cross-device display, and improves compatibility on different devices. Furthermore, by using both density-independent pixel type and pixel type as the unit type to set the node size during webpage layout, different display strategies are adopted for different unit types during webpage display. This effectively avoids the coarse enlargement of nodes on large-screen devices, enabling more content to be displayed on large-screen devices and maximizing the information acquisition efficiency for users browsing webpages on large-screen mobile devices. Attached Figure Description

[0020] The accompanying drawings, which are incorporated in and form a part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure.

[0021] To more clearly illustrate the technical solutions in the embodiments of this disclosure or the prior art, the accompanying drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, those skilled in the art can obtain other drawings based on these drawings without creative effort.

[0022] Figure 1 A flowchart illustrating a webpage display method provided as an exemplary embodiment of this disclosure;

[0023] Figure 2 A flowchart illustrating a webpage display method provided as another exemplary embodiment of this disclosure;

[0024] Figure 3 A flowchart illustrating a webpage display method provided as yet another exemplary embodiment of this disclosure;

[0025] Figure 4(a) is a schematic diagram of the main window displaying the web main interface in an exemplary embodiment of the present disclosure;

[0026] Figure 4(b) is a schematic diagram of a parallel window display of jump page content in an exemplary embodiment of the present disclosure. Figure 1 ;

[0027] Figure 4(c) is a schematic diagram of a parallel window display of jump page content in an exemplary embodiment of the present disclosure. Figure 2 ;

[0028] Figure 4(d) is a schematic diagram of a parallel window display of jump page content in an exemplary embodiment of the present disclosure. Figure 3 ;

[0029] Figure 5 This is a schematic diagram illustrating an exemplary embodiment of the present disclosure of a parallel window rendering architecture implemented at the browser's native API layer;

[0030] Figure 6 This is a schematic diagram of a parallel window rendering architecture as an exemplary embodiment of the present disclosure;

[0031] Figure 7 This is a schematic diagram of the structure of a web page display device provided in an embodiment of the present disclosure. Detailed Implementation

[0032] To better understand the above-described objectives, features, and advantages of this disclosure, the present disclosure will be further described in detail below with reference to the accompanying drawings and embodiments. It is understood that the described embodiments are only some, not all, of the embodiments of this disclosure. The specific embodiments described herein are merely for explaining this disclosure and not for limiting it. Unless otherwise specified, the embodiments of this disclosure and the features within them can be combined with each other. All other embodiments obtained by those skilled in the art based on the described embodiments of this disclosure are within the scope of protection of this disclosure.

[0033] Numerous specific details are set forth in the following description in order to provide a full understanding of this disclosure, but this disclosure may also be implemented in other ways different from those described herein; obviously, the embodiments in the specification are only some, and not all, of the embodiments of this disclosure.

[0034] Currently, the common webpage layout methods are as follows:

[0035] (1) REM Layout: 1 REM is equal to the font size of the root element in Hyper Text Markup Language (HTML). For example, if HTML {font-size: 16px;} is set, then 1 REM = 16px. The font size of the root element can be dynamically adjusted using JavaScript or Cascading Style Sheets (CSS) media queries. For example, the font-size can be calculated based on the viewport width, allowing page elements to scale proportionally with the screen size.

[0036] (2) Media query layout: Dynamically adjust the page style by detecting device characteristics (such as screen size, resolution, orientation, etc.), set breakpoints according to screen width (such as 576px, 768px, 1200px), and adjust the layout structure (such as changing a single column to multiple columns).

[0037] (3) vw / vh layout: vw and vh are relative viewport units introduced in CSS3, representing percentages of viewport width and height respectively: 1vw = 1% of viewport width, for example, if the viewport width is 1920px, then 50vw = 960px; 1vh = 1% of viewport height, for example, if the viewport height is 800px, then 30vh = 240px. Unlike traditional percentage units, vw / vh are based directly on the browser's visible area (viewport) rather than the parent element, which makes the layout more independent and globally controllable.

[0038] However, the above layout scheme has obvious shortcomings in cross-device adaptation, for example:

[0039] (1) Insufficient multi-terminal compatibility: Although the above layout method can achieve smooth browsing of information flow on mobile phones and maintain a high screen space utilization rate, when users switch to tablet devices, the traditional layout mechanism will adopt a simple proportional scaling strategy, which will cause the graphic elements to be mechanically enlarged with the screen width. This crude processing method not only fails to make effective use of the display advantages of large screen devices, but also causes a significant reduction in the effective information density within a unit interface, forming an inverse correlation between the increase in screen size and the decrease in information acquisition efficiency.

[0040] (2) The vw / vh layout has poor compatibility and is not compatible with older devices.

[0041] (3) Media query layout suffers from code redundancy: Layout schemes based on responsive design require writing a lot of device adaptation code. Developers must set device breakpoint thresholds for different screen sizes. This discrete adaptation strategy not only significantly increases the maintenance cost of CSS, but also leads to a rise in code redundancy. Especially when dealing with new foldable screen devices and multi-form terminals, repeatedly defined breakpoint rules will seriously affect code maintainability and iteration efficiency.

[0042] (4) It is difficult to effectively adapt to new device forms such as foldable screens (such as horizontal double-fold, triple-fold and vertical foldable devices), mainly due to their dynamic screen characteristics and multi-form switching requirements.

[0043] To address the aforementioned issues, this disclosure provides a webpage display solution. By using both density-independent pixel (dp) and pixel-type size types in conjunction with the webpage layout to set node sizes, it can maximize the efficiency of information retrieval for users browsing webpages on large-sized mobile devices while maintaining visual appeal. Furthermore, by using the proposed density-independent pixel (dp) size unit, real-time compilation and conversion through algorithms and preprocessors during node display can maintain the advantage of the vw / vh window ratio while also being compatible with older system environments, thus improving the solution's compatibility across different devices.

[0044] The following detailed explanation, in conjunction with the accompanying drawings, illustrates the specific implementation methods of the webpage display method, apparatus, electronic device, and storage medium disclosed herein.

[0045] Figure 1 This is a flowchart illustrating a webpage display method provided in an exemplary embodiment of the present disclosure. The method can be executed by a webpage display device provided in the embodiments of the present disclosure. The webpage display device can be implemented using software and / or hardware and can be integrated into an electronic device, such as a smartphone or tablet computer.

[0046] like Figure 1 As shown, this webpage display method may include the following steps:

[0047] Step 101: Obtain the target node parameters of the node to be displayed in the current webpage. The target node parameters include the first size and the target unit type corresponding to the first size. During webpage layout, the unit type is set to density-independent pixel type or pixel type according to the node type and node size.

[0048] The current webpage refers to the webpage currently requested to be displayed on an electronic device. It could be a first-level page, a second-level page, a third-level page, or even a higher-level page. Understandably, a first-level page is the website's homepage, typically containing the overall layout and navigation menu; it's the first page a user sees upon entering the website. A second-level page is a subpage of a first-level page, usually accessed via links from the first-level page, containing more specific content and functions. A third-level page is a subpage of a second-level page, also accessed via links from the second-level page. When rendering a webpage, the layout of each node is typically determined according to specific rules, including calculating node positions and sizes, and then drawing the nodes onto the electronic device's screen for display. The node to be displayed is the node currently needed to be shown on the current webpage; this node can be any node within the current webpage.

[0049] In this embodiment, for a node to be displayed, the node parameters of the node to be displayed (referred to as target node parameters for ease of description and differentiation) can be obtained, including the size of the node to be displayed (referred to as the first size for ease of description and differentiation) and the unit type corresponding to the first size (referred to as the target unit type for ease of description and differentiation). The node parameters of each node in the webpage are set by the webpage developers during webpage development. During webpage development, the developers lay out the webpage, setting the position and size of each node (including text nodes, image nodes, etc.), and setting the unit type to density-independent pixel type or pixel type according to the node type and size. For example, for a text node, the unit type for its size is set to pixel type, such as 64px * 64px. For an image node, if its size is larger than a preset value, the unit type for its size can be set to density-independent pixel type, such as 100dp * 80dp.

[0050] Step 102: When the target unit type is density-independent pixel type, based on the window size of the current window used to display the current webpage in the electronic device, convert the first size into a second size of pixel type, and display the node to be displayed in the current window based on the second size.

[0051] In this embodiment, after obtaining the target node parameters of the node to be displayed, if the target unit type corresponding to the first size is a density-independent pixel type, then it is necessary to first convert the first size into a second size of pixel type based on the window size of the current window used to display the current webpage in the electronic device.

[0052] It should be noted that the window size may be the same as the screen resolution of the electronic device, or it may be a part of the screen resolution of the electronic device. For example, when an electronic device displays a main window and a parallel window, the window size of both windows is half of the screen resolution of the electronic device. If the current window is a parallel window, then the window size is half of the screen resolution.

[0053] When designing mobile web page layouts, web developers typically base the layout of nodes on the resolution of the device being used. This disclosed solution introduces density-independent pixels (dp), a pixel unit not natively supported by browsers, but which automatically adapts to the device's screen resolution and dynamically converts to pixels (px), achieving consistent display across devices. To facilitate understanding of the concept of density-independent pixels, a green box with a width and height of 100dp is defined below, based on a device resolution of 750px * 1334px. This 100dp * 100dp green box will change its size according to the device's width and height on different screen sizes, as shown in Table 1 below.

[0054] Table 1

[0055] Device resolution Green box width / height 640px*1136px 85px / 85px 750px*1334px 100px / 100px 828px * 1792px 110px / 110px 1640px*2360px 219px / 219px

[0056] As shown in Table 1, at a base resolution of 750px*1334px, 1dp = 1px. At a device resolution of 640px*1136px, a 100dp*100dp green box converts to 85px*85px. However, at a device resolution of 828px*1792px, the same 100dp*100dp green box converts to 110px / 110px. It is evident that the same size in dp pixels yields different sizes in pixels at different device resolutions, increasing with increasing device resolution.

[0057] In this embodiment, based on the aforementioned conversion relationship between dp units and px units, and knowing the base size and node size used when laying out the current webpage, the first size in dp units can be converted to a second size in px units based on the viewport size of the current viewport displaying the current webpage. Furthermore, the node to be displayed can be shown in the current viewport based on the second size.

[0058] Step 103: If the target unit type is pixel type, display the node to be displayed in the current view window based on the first size.

[0059] In this embodiment, if the target unit type corresponding to the first size in the target node parameters is pixel type, the node to be displayed can be directly displayed in the current window of the electronic device used to display the current webpage based on the first size, without the need for size conversion between different units.

[0060] In this embodiment, when laying out the webpage, the unit type is set to density-independent pixel type or pixel type according to the node type and node size. For nodes of density-independent pixel type, the node size is converted to pixel type and then the node is displayed according to the converted size. For nodes of pixel type, the node is displayed directly. Therefore, compared with the display strategy of mechanically scaling proportionally using a single size unit, more content can be displayed when the webpage is displayed on a larger screen. Taking advantage of the large screen, the efficiency of obtaining webpage information on a large screen is improved.

[0061] The webpage display method of this disclosure embodiment obtains target node parameters of the node to be displayed in the current webpage. The target node parameters include a first size and a target unit type corresponding to the first size. During webpage layout, the unit type is set to density-independent pixel type or pixel type according to the node type and node size. When the target unit type is density-independent pixel type, the first size is converted into a second size of pixel type based on the window size of the current window used to display the current webpage in the electronic device, and the node to be displayed is displayed in the current window based on the second size. When the target unit type is pixel type, the node to be displayed is displayed in the current window based on the first size. By adopting the above technical solution, the unit type of different nodes in the webpage can be flexibly set as density-independent pixel type or pixel type according to the node type and size during webpage layout. During webpage display, for nodes with the unit type of density-independent pixel type, the node is converted to pixel type size according to the current window size of the webpage, and then displayed according to the converted size. This achieves adaptive adjustment of node size according to window size, realizes consistency of cross-device display, and improves compatibility on different devices. Furthermore, by using both density-independent pixel type and pixel type as the unit type to set the node size during webpage layout, different display strategies are adopted for different unit types during webpage display. This effectively avoids the coarse enlargement of nodes on large-screen devices, enabling more content to be displayed on large-screen devices and maximizing the information acquisition efficiency for users browsing webpages on large-screen mobile devices.

[0062] In one alternative embodiment of this disclosure, such as Figure 2As shown, based on the aforementioned embodiments, when converting the first size to a second size in pixels based on the window size of the current viewport used to display the current webpage in an electronic device, this can be achieved through the following steps:

[0063] Step 201: Obtain the baseline size of the current webpage and the logical pixel size corresponding to the viewport size.

[0064] The baseline size of the current webpage is determined based on the device resolution and device pixel ratio (DPR) of the electronic device used by the webpage developer when laying out the webpage. The width of the baseline size equals the number of pixels in the width direction of the device resolution divided by the device pixel ratio; similarly, the height of the baseline size equals the number of pixels in the height direction of the device resolution divided by the device pixel ratio. In other words, the baseline size of the current webpage is consistent with the logical pixel size of the electronic device used for webpage layout.

[0065] When web developers design mobile web layouts, they typically use a resolution of 750px*1334px as a baseline. With the widespread adoption of full-screen mobile devices, web layouts based on a resolution of 828px*1792px have also emerged. Furthermore, different mobile devices have different pixel ratios. To ensure the accuracy of node size conversion, this embodiment of the disclosure sets a baseline size, which greatly facilitates developers in developing according to the logical pixels marked in the design draft, without requiring developers to perform additional conversions.

[0066] In this embodiment, the baseline size of the current webpage can be stored as a webpage parameter associated with the current webpage and can be retrieved directly when needed.

[0067] In this embodiment, when obtaining the logical pixel size corresponding to the current window size, the device pixel ratio of the electronic device where the current window is located can be obtained first, and then the window size can be divided by the device pixel ratio to obtain the corresponding logical pixel size.

[0068] Step 202: Based on the first dimension and the reference dimension, determine the width ratio and height ratio between the first dimension and the reference dimension.

[0069] The width ratio is equal to the width of the first dimension divided by the width of the reference dimension, and the height ratio is equal to the height of the first dimension divided by the height of the reference dimension. It should be noted that when calculating the width and height ratios, only the corresponding numerical values ​​are considered, and units are not taken into account.

[0070] For example, taking a base size of 375px*667px as an example, assuming the first size is 80dp*100dp, then the width ratio = 80 / 375 and the height ratio = 100 / 667.

[0071] Step 203: Multiply the width value of the logical pixel size by the width ratio, and multiply the height value of the logical pixel size by the height ratio to obtain the second size.

[0072] In this embodiment, after determining the width ratio and height ratio between the first size and the reference size, the width value of the logical pixel size is multiplied by the width ratio to obtain the width value of the density-independent pixel type converted to the pixel type width value, and the height value of the logical pixel size is multiplied by the height ratio to obtain the height value of the density-independent pixel type converted to the pixel type height value. The converted pixel type width value and height value constitute the second size of the pixel type.

[0073] Continuing with the example above, assuming the logical pixel size is 820px * 1180px, the first size of the density-independent pixel type is converted into the second size of the pixel type. The width of the second size is (80 / 375) * 820 = 174.9 ≈ 175, and the height of the second size is (100 / 667) * 1180 = 176.9 ≈ 177. That is, the second size is 175px * 177px.

[0074] It should be noted that, in this embodiment, since the second size is calculated based on the logical pixel size of the current window, when displaying the node to be displayed based on the second size, it is necessary to determine the number of physical pixels occupied by the node to be displayed in the electronic device according to the device pixel ratio of the electronic device and the second size. The number of physical pixels occupied is equal to the second size multiplied by the device pixel ratio, and then the node to be displayed is displayed in the current window according to the determined number of physical pixels.

[0075] In practical applications, the above-mentioned density-independent pixel type to pixel type size conversion logic can be encapsulated into a pd2px utility function. When size conversion is required during webpage display, this function can be directly called to convert the dp unit value written by the developer into a px unit value that can adapt to different device resolutions.

[0076] The webpage display method of this disclosure obtains the reference size of the current webpage and the logical pixel size corresponding to the window size; determines the width ratio and height ratio between the first size and the reference size based on the first size and the reference size; multiplies the width value of the logical pixel size by the width ratio, and multiplies the height value of the logical pixel size by the height ratio to obtain the second size. Thus, by performing size conversion from density-independent pixel type to pixel type according to the logical pixel size, the adverse effects of different device pixel ratios on size conversion are avoided, and the accuracy of size conversion can be guaranteed.

[0077] Unlike traditional layout schemes that simply scale proportionally, this disclosed solution provides a novel layout strategy to enable the viewing of more information on large screens. Specifically, the layout strategy of setting the unit type to density-independent pixel type or pixel type based on the node type and size during webpage layout includes: if the node type is text, the node size is set to pixel type (i.e., px); if the node type is not text and the number of pixels in the target direction is less than a preset value, the node size in the target direction is set to pixel type; if the node type is not text and the number of pixels in the target direction is not less than a preset value, the node size is set to density-independent pixel type (i.e., dp).

[0078] The target direction can be set according to actual needs; for example, it can be set to the width direction. The preset value can also be set according to actual needs; for example, it can be set to 320 pixels logically. Since the logical pixel width of most devices is usually greater than 320 pixels, setting the preset value to 320 pixels logically as a threshold provides a safety margin, ensuring that when the node width is measured in pixels, the node content will not be incompletely displayed on various mobile devices.

[0079] Taking the target direction as the width direction and the default value as 320 pixels as an example, if the node is a text node, the px unit is used first to allow more text content to be viewed on large screens; if it is not a text node, it continues to check whether the node width in logical pixels is less than 320 pixels. If it is less, the width is in pixels and the height can be in pixels or be adaptive. If it is not less than 320 pixels, both the width and height are in dp.

[0080] In this embodiment of the disclosure, by setting the unit type of the node size to density-independent pixel type or pixel type as described above, the simple proportional scaling of nodes on large screens can be avoided, thereby enabling the display of more content on large screens.

[0081] With the emergence of foldable mobile devices with bi-fold and even tri-fold screens, in addition to tablets, the screen size of mobile devices continues to break through the limits. However, the current method of displaying the next level page within the window displaying the current level page fails to fully utilize the large screen size of foldable devices and cannot adapt to new device form factors such as foldable screens. To address this issue, this disclosure provides a parallel window rendering architecture. For mobile devices with large screens, at least one parallel window is initialized. When a page transition occurs, the content of the transition page is displayed through the parallel window, enabling multiple windows to be displayed simultaneously on the mobile device. Each window can display page content at different levels, supporting synchronous operation of different levels of content within the same web application, thereby maximizing the value of the large screen size of mobile devices. Therefore, in one optional embodiment of this disclosure, as... Figure 3 As shown, this webpage display method may also include the following steps:

[0082] Step 301: In response to receiving a click operation on the target node in the current window, obtain the page jump information corresponding to the target node.

[0083] The target node refers to the node that the user clicks on among all the nodes of the current webpage displayed in the current window.

[0084] It is understandable that when a user clicks on a node on a page, if that node links to other resource content, the user will be redirected to the corresponding resource content. Therefore, in this embodiment, when a user clicks on a target node, the page redirection information corresponding to that target node is obtained. This page redirection information may include, but is not limited to, the resource link address corresponding to the resource content that triggers the redirection when the target node is clicked, also known as a Uniform Resource Locator (URL).

[0085] For example, page jump interception information triggered by clicking a target node can be intercepted by encapsulating page jump interception methods in the parallel viewport rendering architecture. This achieves non-intrusive integration with existing front-end development frameworks (such as Vue and React), and developers only need to perform simple page interception configurations to automatically intercept page jumps. For instance, in modern web front-end development, with the popularity of Single Page Applications (SPAs) and the prevalence of Vue and React frameworks, developers widely use the HTML5 History API to implement page jumps. Therefore, history jump interception can be achieved by overriding methods of the history object (such as the pushState() or replaceState() methods). Another example is in front-end web page creation, where the `` tag is used to define hyperlinks. The purpose of intercepting `` tag jumps can be achieved by blocking the default jump event of the `` tag, and the jump can be intercepted by checking whether the event path passes through the `` tag. The label is used for judgment; for example, the window.open jump interception can be achieved by directly overriding the window.open method.

[0086] Step 302: Determine if there is an idle window.

[0087] In this embodiment, when a user clicks on a target node, it can also be determined whether there are any idle windows. Idle windows are undisplayed parallel windows, which are windows that have been initialized other than the main window. The number of parallel windows is related to the screen size of the electronic device. If undisplayed parallel windows exist, it is determined that there are available idle windows.

[0088] In one optional embodiment of this disclosure, when determining whether there are idle windows, the number of first windows currently displayed in the electronic device and the number of second windows initialized in the electronic device can be obtained. The number of first windows refers to the total number of all windows currently displayed in the electronic device, including at least the main window and possibly parallel windows. The number of second windows refers to the number of initialized parallel windows, excluding the main window. It is understood that the total number of windows that can be displayed in the electronic device is the number of second windows plus one, that is, the main window and all parallel windows are displayed. Then, the number of first windows and the number of second windows are compared. If the number of first windows is not greater than the number of second windows, it indicates that there are still parallel windows that are not displayed, thus determining that there are idle windows. If the number of first windows is greater than the number of second windows, it indicates that all parallel windows have been displayed in the electronic device and there are no idle windows available.

[0089] In this embodiment of the disclosure, when a user browses a webpage, the electronic device can determine whether it can display parallel windows based on its screen size, and initialize the main window and parallel windows when it determines that parallel windows can be expanded. Specifically, the target logical pixel count of the electronic device in the split-screen direction can be obtained. The split-screen direction can be pre-configured by the developer and can be either horizontal or vertical. The target logical pixel count is determined based on the physical pixel count of the electronic device in the split-screen direction and the device pixel ratio. Next, the target logical pixel count is compared with a preset split-screen pixel threshold. If the target logical pixel count is not less than the split-screen pixel threshold, the total number of expandable parallel windows, i.e., the second window count, is determined based on the target logical pixel count and the split-screen pixel threshold, and window initialization is performed based on the second window count.

[0090] For example, assuming the screen splitting direction is horizontal, the target logical pixel count is the number of pixels in the width direction (horizontal) of the electronic device divided by the device's pixel ratio. This logical pixel count in the width direction is compared to a screen splitting pixel threshold. If it's greater than the threshold, a parallel window can be expanded, and the number of second windows is determined. For instance, assuming the screen splitting pixel threshold is 1024 pixels, when the horizontal logical pixel count of the electronic device is greater than or equal to 1024 pixels, the number of second windows is determined to be 1, meaning the electronic device's screen can be split into a main window and a parallel window. To support more split-screen displays, such as three-screen displays, a three-screen threshold can be set. For example, if the three-screen threshold is set to 1580px, then when the horizontal logical pixels of the electronic device are greater than or equal to 1024px but less than 1580px, a parallel window can be expanded, and the number of the second window is determined to be 1. When the horizontal logical pixels of the electronic device are greater than or equal to 1580px, two parallel windows can be expanded, and the number of the second window is determined to be 2. More parallel windows can be displayed by setting more split-screen thresholds, which will not be listed in this disclosure.

[0091] When initializing windows based on the second number of windows, it is necessary to initialize one main window and several parallel windows. The main window, as the core interface for browsing web pages, must be displayed by default on all mobile devices. When a user browses a webpage, the first-level page is displayed through the main window; parallel windows are not displayed on electronic devices. Therefore, the initial width and height of the main window are both set to 100%, i.e., full-screen display. For example, the `initMainViewPort` method can be called to initialize the main window (Main ViewPort), initialize the main window container using Flex layout. Flex layout facilitates accommodating multiple parallel windows and allows flexible adjustment of their arrangement. Visible Document Object Model (DOM) nodes are traversed and moved into the main window container, completing the initialization of the main window. When initializing parallel windows, you can use... <iframe>Tags enable parallel viewports.<iframe> The tags are uniformly named "ViewPort_index". For example, assuming the second viewport count is 2, two parallel viewports, ViewPort_1 and ViewPort_2, can be initialized. When splitting the screen horizontally, the initial width of the parallel viewport is 0%, and the initial height is 100%. When the parallel viewport needs to be displayed, its width is dynamically adjusted according to the screen size of the electronic device and the number of views to be expanded. The parallel viewport is placed...<body> Under the tag, keep it at the same level as the main window.

[0092] Step 303: If it is determined that there is an idle window, an idle window is added to the electronic device and the web page content corresponding to the page jump information is loaded through the idle window. The window size of each window in the electronic device is determined based on the screen resolution of the electronic device, the number of windows in each window and the split screen direction.

[0093] In this embodiment, when it is determined that an idle window exists, an idle window is added to the electronic device, and the web page content corresponding to the page jump information is loaded through the idle window. That is, if an idle window exists, an idle window is added to the screen of the electronic device, and the web page content corresponding to the page jump information triggered by clicking the target node is displayed in the newly added idle window. The original windows and their content displayed on the electronic device remain unchanged. Since a new window is added, the window size of each window needs to be determined according to the screen resolution of the electronic device, the number of windows to be displayed on the electronic device, and the screen splitting direction.

[0094] For example, assuming the screen splitting direction is horizontal, the screen resolution of the electronic device is 1024px*1680px, and the electronic device originally displays one main window and one parallel window, both of which have a window size of 1024px*840px, then after adding a parallel window to display the webpage content corresponding to the page jump information, the electronic device displays one main window and two parallel windows, and the window size of these three windows is 1024px*560px. It can be seen that when the screen is split horizontally, the window size of each window displayed in the electronic device is dynamically adjusted according to the number of windows displayed, and the same applies to vertical screen splitting.

[0095] Further, in an optional embodiment of this disclosure, when it is determined that there is no idle window and multiple windows are currently displayed in the electronic device, the window identifier of the current window is obtained; when the window identifier indicates that the current window is a window displaying first-level page content, the web page content corresponding to the page jump information is displayed through the target window adjacent to the current window; when the window identifier indicates that the current window is a window displaying multi-level page content, it is determined whether there is an adjacent next window for the current window. If there is, the web page content corresponding to the page jump information is displayed through the next window; if there is no next window, the web page content corresponding to the page jump information is displayed through the current window. In other words, when all parallel windows are displayed on the screen of an electronic device, if the target node clicked by the user is a node in the main window (displaying the content of the first-level page), the web page content corresponding to the page jump information will be displayed through the parallel window adjacent to the main window; if the target node clicked by the user is a node in a parallel window (displaying the content of the second-level page or even higher-level page), if the parallel window is not the rightmost one (assuming horizontal split screen), that is, if there is an adjacent next parallel window, the web page content corresponding to the page jump information will be displayed through the next parallel window; otherwise, the web page content corresponding to the page jump information will be displayed through the parallel window where the target node is located.

[0096] For example, suppose an electronic device currently displays a main window showing the web main interface, as shown in Figure 4(a). Also suppose the electronic device can expand to two parallel windows. When a user clicks on content 1 in the main window, the electronic device adds a parallel window 1 to display the content of the page triggered by clicking on content 1, i.e., the detailed content of content 1, as shown in Figure 4(b). Optionally, the parallel window may also contain a header information. The content of this header information can be customized; for example, the title 1 of content 1 can be used as the header information. The user can return to or close the secondary page by clicking the back button in the header information. When the user clicks on content 2 in the main window, since there is still an idle parallel window, a parallel window 2 can be added to the electronic device to display the content of the page triggered by clicking on content 2, as shown in Figure 4(c). This allows for the simultaneous display of secondary page content from different nodes in the main window, achieving more efficient use of the screen. Alternatively, the content of the page triggered by clicking on content 2 can also be displayed in the already displayed parallel window 1.Based on Figure 4(c), there is no available idle normal window at this time. Thus, if the user clicks on the content 3 in the main window, the content of the jump page triggered by clicking on the content 3 can be displayed through the parallel window 1; if the user clicks on a node that links to resource content in the parallel window 1, for example, the user clicks on the "Author 1" node, the relevant linked content of this author is displayed in the parallel window 2, as shown in Figure 4(d), and the content of the page header information of the parallel window 2 can be named "Personal Center of Author 1"; if the user clicks on a node that links to resource content in the parallel window 2, the content of the jump page triggered by clicking on this node is displayed in the parallel window 2.

[0097] The web page display method of the embodiments of the present disclosure obtains the page jump information corresponding to the target node by responding to the click operation on the target node in the current window. When it is determined that there is an idle window, an idle window is added for display in the electronic device, and the web page content corresponding to the page jump information is loaded through the idle window. The window sizes of the windows in the electronic device are determined based on the screen resolution of the electronic device, the number of windows, and the split screen direction. Thus, it is possible to display page content at different levels on the screen, maximize the value of the large-size screen of the mobile device, and also be compatible with and adapt to new device forms such as foldable screens, improving the user experience.

[0098] In the above solution provided by the present disclosure that uses a parallel window rendering architecture to fully release the potential of the large screen, the parallel window rendering architecture is implemented at the native application programming interface (API) layer of the native browser and can be compatible with mainstream Vue and React frameworks without additional processing. Only by introducing a JavaScript script can the parallel window rendering be achieved, with less code volume and no additional development work. In actual development, it can be directly introduced, as shown in Figure 5. After introducing the parallel window rendering architecture, when the logical pixel number of the electronic device in the split screen direction reaches the preset split screen threshold, it can be automatically allocated to initialize the main window and the expandable parallel window.The parallel window rendering architecture is shown in Figure 6. Among them, the page jump interception module is used to intercept common page jumps, which can be achieved by configuring page interception. For example, intercept the page jump of the article details page ( / detail). After interception, the article details page will be opened in the parallel window ViewPort_1; intercept the page jump of the article author page ( / author). After interception, the article author page will be opened in the parallel window ViewPort_2. The message center and the page stack management module are used to uniformly manage the page jump behavior. When a page jump request is intercepted, the message center will publish a standardized jump message. The standardized jump message carries the window identifier (such as ViewPort_1) of the parallel window used to display the content of the jump page corresponding to the jump behavior, the page path URL of the jump page, and the way to open the jump page. Among them, the way to open the jump page can be selected from one of the following three ways: (1) relaunch: all pages are popped from the stack, and the jumped page is pushed onto the stack; (2) push: the jumped page is pushed onto the stack; (3) replace: the current web page is popped from the stack, and the jumped page is pushed onto the stack. The message center broadcasts the above jump message. After each parallel window receives the jump message, it compares its own window identifier with the window identifier carried in the jump message. If the two match successfully, the current parallel window performs jump processing, displays the jump content and shows it on the screen of the electronic device. If the match fails, the message is ignored.

[0099] To implement the above embodiments, the present disclosure also provides a web page display device, which can be implemented by software and / or hardware and can be integrated in an electronic device.

[0100] Figure 7 is a schematic structural diagram of a web page display device provided by an embodiment of the present disclosure. As shown in Figure 7, the web page display device 40 may include: a parameter acquisition module 410, a size conversion module 420, and a display module 430.

[0101] The parameter acquisition module 410 is used to acquire the target node parameters of the node to be displayed in the current webpage. The target node parameters include a first size and the target unit type corresponding to the first size. The unit type is set to density-independent pixel type or pixel type according to the node type and node size when the webpage is laid out.

[0102] The size conversion module 420 is used to convert the first size into a second size of pixel type based on the window size of the current window used to display the current webpage in the electronic device when the target unit type is density-independent pixel type;

[0103] The display module 430 is used to display the node to be displayed in the current window based on the second size, or, if the target unit type is pixel type, to display the node to be displayed in the current window based on the first size.

[0104] Optionally, the size conversion module 420 is further used for:

[0105] Obtain the baseline size of the current webpage, and obtain the logical pixel size corresponding to the window size;

[0106] Based on the first dimension and the reference dimension, determine the width ratio and height ratio between the first dimension and the reference dimension;

[0107] The second size is obtained by multiplying the width value of the logical pixel size by the width ratio and by multiplying the height value of the logical pixel size by the height ratio.

[0108] Optionally, if the node type is text, the unit type of the node size is set to pixel type; if the node type is not text and the number of pixels of the node in the target direction is less than a preset value, the unit type of the node size in the target direction is set to pixel type; if the node type is not text and the number of pixels of the node in the target direction is not less than a preset value, the unit type of the node size is set to density-independent pixel type.

[0109] Optionally, the webpage display device 40 further includes:

[0110] The jump interception module is used to respond to receiving a click operation on a target node in the current window and obtain the page jump information corresponding to the target node;

[0111] The judgment module is used to determine whether there is an idle window;

[0112] The page jump module is used to add an idle window to the electronic device when it is determined that an idle window exists, and load the web page content corresponding to the page jump information through the idle window;

[0113] The window size of each window in the electronic device is determined based on the screen resolution of the electronic device, the number of windows in each window, and the split-screen direction.

[0114] Further optionally, the determination module is also used for:

[0115] Obtain the number of the first window currently displayed in the electronic device and the number of the second window initialized in the electronic device;

[0116] Compare the size of the first number of windows and the second number of windows;

[0117] If the number of first windows is not greater than the number of second windows, it is determined that there are idle windows.

[0118] Optionally, the webpage display device 40 further includes:

[0119] Size acquisition module, used to acquire the target logical pixel count of the electronic device in the split-screen direction;

[0120] The initialization module is used to determine the number of second windows based on the number of target logical pixels and the screen pixel threshold when the number of target logical pixels is not less than the screen pixel threshold, and to initialize the windows based on the number of second windows.

[0121] Further optionally, the page redirection module is also used for:

[0122] If it is determined that there is no idle window and multiple windows are currently displayed in the electronic device, the window identifier of the current window is obtained;

[0123] When the window identifier indicates that the current window is a window that displays the content of the first-level page, the web page content corresponding to the page jump information is displayed through the target window adjacent to the current window;

[0124] When the window identifier indicates that the current window is a window that displays multi-level page content, it is determined whether there is an adjacent next window in the current window. If there is, the web page content corresponding to the page jump information is displayed through the next window. If there is no next window, the web page content corresponding to the page jump information is displayed through the current window.

[0125] The webpage display device applicable to electronic devices provided in this disclosure can execute the webpage display method provided in this disclosure, and has the corresponding functional modules and beneficial effects of executing the method. Content not described in detail in the device embodiments of this disclosure can be referred to the description in any method embodiment of this disclosure.

[0126] This disclosure also provides an electronic device, including a processor and a memory; the processor executes the steps of the web page display method embodiments described above by calling programs or instructions stored in the memory. To avoid repetition, these steps will not be repeated here.

[0127] This disclosure also provides a computer-readable storage medium, which is non-transitory and stores a program or instructions that cause a computer to perform the steps of the web page display method as described in the foregoing embodiments. To avoid repetition, these steps will not be repeated here.

[0128] This disclosure also provides a computer program product for performing the steps of the web page display methods described in the foregoing embodiments.

[0129] It should be noted that, in this document, relational terms such as “first” and “second” are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations.Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0130] The above description is merely a specific embodiment of this disclosure, enabling those skilled in the art to understand or implement this disclosure. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this disclosure. Therefore, this disclosure is not to be limited to the embodiments described herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.< / iframe>

Claims

1. A webpage display method, characterized in that, The method includes: Obtain the target node parameters of the node to be displayed in the current webpage. The target node parameters include a first size and the target unit type corresponding to the first size. During webpage layout, the unit type is set to density-independent pixel type or pixel type according to the node type and node size. When the target unit type is the density-independent pixel type, the first size is converted into a second size of the pixel type based on the window size of the current window used to display the current webpage in the electronic device, and the node to be displayed is displayed in the current window based on the second size; When the target unit type is the pixel type, the node to be displayed is displayed in the current viewport based on the first size.

2. The method according to claim 1, characterized in that, The step of converting the first size to a second size of the pixel type based on the window size of the current viewport used to display the current webpage in the electronic device includes: Obtain the baseline size of the current webpage, and obtain the logical pixel size corresponding to the viewport size; Based on the first dimension and the reference dimension, determine the width ratio and height ratio between the first dimension and the reference dimension; The second size is obtained by multiplying the width value of the logical pixel size by the width ratio and by multiplying the height value of the logical pixel size by the height ratio.

3. The method according to claim 1, characterized in that, The step of setting the unit type to density-independent pixel type or pixel type based on the node type and node size during webpage layout includes: If the node type is text, then the unit type for the node size is set to the pixel type; If the node type is not text and the number of pixels of the node in the target direction is less than a preset value, then the unit type of the size of the node in the target direction is set to the pixel type. If the node type is not text and the number of pixels of the node in the target direction is not less than a preset value, then the unit type used for the node size is set to the density-independent pixel type.

4. The method according to any one of claims 1-3, characterized in that, The method further includes: In response to receiving a click operation on a target node in the current window, obtain the page jump information corresponding to the target node; Determine if an idle window exists; If an idle window is found to exist, the idle window is added to the display of the electronic device, and the web page content corresponding to the page jump information is loaded through the idle window; The window size of each window in the electronic device is determined based on the screen resolution of the electronic device, the number of windows in each window, and the screen orientation.

5. The method according to claim 4, characterized in that, The determination of whether an idle window exists includes: Obtain the number of the first window currently displayed and the number of the second window initialized in the electronic device; Compare the size of the first number of windows and the second number of windows; If the number of the first window is not greater than the number of the second window, it is determined that there is an idle window.

6. The method according to claim 5, characterized in that, The method further includes: Obtain the target logical pixel count of the electronic device in the split-screen direction; If the target logical pixel count is not less than the screen split pixel threshold, the second window count is determined based on the target logical pixel count and the screen split pixel threshold, and window initialization is performed based on the second window count.

7. The method according to claim 4, characterized in that, The method further includes: If it is determined that there is no idle window and multiple windows are currently displayed in the electronic device, the window identifier of the current window is obtained; When the window identifier indicates that the current window is a window displaying first-level page content, the web page content corresponding to the page jump information is displayed through the target window adjacent to the current window; When the window identifier indicates that the current window is a window that displays multi-level page content, it is determined whether there is an adjacent next window in the current window. If there is, the web page content corresponding to the page jump information is displayed through the next window. If there is no next window, the web page content corresponding to the page jump information is displayed through the current window.

8. A webpage display device, characterized in that, include: The parameter acquisition module is used to acquire the target node parameters of the node to be displayed in the current webpage. The target node parameters include a first size and the target unit type corresponding to the first size. During webpage layout, the unit type is set to density-independent pixel type or pixel type according to the node type and node size. The size conversion module is used to convert the first size into a second size of the pixel type when the target unit type is the density-independent pixel type, based on the window size of the current window used to display the current webpage in the electronic device; The display module is used to display the node to be displayed in the current window based on the second size, or, if the target unit type is the pixel type, to display the node to be displayed in the current window based on the first size.

9. An electronic device, characterized in that, include: Processor and memory; The processor executes the webpage display method as described in any one of claims 1 to 7 by calling the program or instructions stored in the memory.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a program or instructions that cause a computer to perform the webpage display method as described in any one of claims 1 to 7.

Images