Webpage layout compatibility method and device, equipment and medium

Abstract

The invention relates to the technical field of webpage layout, and discloses a webpage layout compatibility method and device, equipment and a medium, and the method comprises the steps: obtaining an equipment type and a webpage display width corresponding to the equipment when a target webpage is accessed by the equipment; determining the design width and the root font design size of the target webpage according to the equipment type; determining a first root font attribute value of the target webpage relative to the terminal equipment based on a proportional relation between the design width of the target webpage and the webpage display width and the root font design size; performing unit conversion on the first root font attribute value to obtain a second root font attribute value under a viewport unit, and determining the second root font attribute value as a relative unit; according to the relative unit size of each element in the target webpage, the equipment is controlled to display each element in the target webpage, and the display effect of the webpage is ensured by providing targeted design sizes for different types of equipment and performing viewport unit conversion on the root font attribute value.

Description

Technical Field

[0001] The present invention relates to the technical field of web page layout, and in particular to a web page layout compatibility method, device, equipment and medium. Background Art

[0002] As more and more screen sizes appear on Web-enabled devices, the concept of adaptive Web design has emerged, which is the practice of allowing web pages to change their layout and appearance to adapt to different screen widths, resolutions, etc. Adaptive layout means that the same page has different layouts on different screen sizes to ensure that the web page can have a good display effect on different devices.

[0003] In the prior art, when performing adaptive layout, the corresponding web page display size is often provided by obtaining the specific interval of the specific parameters of the actual access device. This method realizes adaptive layout according to the interval, cannot restore the design drawing in proportion, and has a large workload and low efficiency in being compatible with various devices. Summary of the invention

[0004] In view of this, the present invention provides a web page layout compatibility method, device, equipment and medium to solve the problem that when a web page is adaptively laid out, it is impossible to restore it in proportion to the design drawing, and the workload of being compatible with various devices is large.

[0005] In a first aspect, the present invention provides a web page layout compatibility method, the method comprising:

[0006] In response to a target webpage being accessed by a terminal device, obtaining a device type and a webpage display width corresponding to the terminal device;

[0007] Determining the design width and root font design size of the target webpage according to the device type of the terminal device;

[0008] Determine a proportional relationship between a design width of the target webpage and a display width of the webpage, and determine a first root font attribute value of the target webpage relative to the terminal device based on the proportional relationship and the root font design size;

[0009] Determine a unit width dimension value of the target webpage in viewport units according to the webpage display width, perform unit conversion on the first root font attribute value based on the unit width dimension value to obtain a second root font attribute value in viewport units, and determine the second root font attribute value as a relative unit;

[0010] According to the relative unit size of each element in the target webpage relative to the root font and the second root font attribute value, the terminal device is controlled to display each element in the target webpage.

[0011] When a web page is accessed, the design width and root font design size of the web page are determined according to the device type corresponding to the terminal device accessing the web page, and the root font attribute value of the target web page on the terminal device is determined according to the proportional relationship between the design width and the display width of the web page on the terminal device, and its value under the viewport unit is used as a relative unit, so as to control the terminal device to display each element in the target web page according to the relative unit size of each element, thereby achieving that the target web page can be compatible with the display of terminal devices with different screen sizes and has a relatively good display effect.

[0012] In an optional implementation, obtaining the device type of the terminal device includes:

[0013] Obtaining the actual screen width of the terminal device;

[0014] The device type of the terminal device is determined according to the size relationship between the actual screen width and the preset critical width.

[0015] The device type of the terminal device can be determined accurately and quickly through the size relationship between the actual screen width of the terminal device and the preset critical width.

[0016] In an optional implementation, the device types include: mobile terminal devices and computer devices;

[0017] Determining the design width and root font design size of the target webpage according to the device type of the terminal device includes:

[0018] When the terminal device is a mobile terminal device, calling a first design draft of the target webpage, the first design draft being a webpage design draft preset for the mobile terminal device, and determining the design width and root font design size of the first design draft as the design width and root font design size of the target webpage;

[0019] When the terminal device is a computer device, the second design draft of the target web page is called, the second design draft is a web page design draft preset for the computer device, and the design width and root font design size of the second design draft are determined as the design width and root font design size of the target web page.

[0020] By using pre-designed design drafts for different types of terminal devices, after determining the device type of the terminal device, the corresponding design draft is called and subsequent corresponding adjustments are made to ensure that the display effect of the final target web page is more in line with the terminal device accessing the web page.

[0021] In an optional implementation, controlling the terminal device to display each element in the target webpage according to the relative unit size of each element in the target webpage relative to the root font and the second root font attribute value includes:

[0022] When the terminal device is a mobile terminal device, determining the size of each element in the first design draft in viewport units according to the relative unit size of each element in the first design draft relative to the root font and the attribute value of the second root font;

[0023] Based on the size of each element in the first design draft in viewport units, controlling the terminal device to display each element in the target webpage;

[0024] When the terminal device is a computer device, determining the size of each element in the second design draft in viewport units according to the relative unit size of each element in the second design draft relative to the root font and the attribute value of the second root font;

[0025] Based on the size of each element in the second design draft in viewport units, the terminal device is controlled to display each element in the target web page.

[0026] By using the relative unit size of each element in different design drafts relative to the root font and the second root font attribute value, we can get the size of each element in the viewport unit, so as to control the display element of the terminal device according to the size in the viewport unit, so as to achieve proportional scaling of the elements in the target web page and ensure the display effect.

[0027] In an optional embodiment, the method further includes:

[0028] Determining the font size of the block-level elements in the target web page according to the size relationship between the web page display width and the preset interval;

[0029] The fonts in the block-level elements in the target webpage are displayed according to the font sizes in the block-level elements in the target webpage.

[0030] For the fonts in the block-level elements in the target web page, the corresponding font size can be determined based on the relationship between the web page display width in the terminal device and the preset interval, to avoid the fonts in the block-level elements being too large or too small due to scaling, affecting the display effect.

[0031] In an optional embodiment, the method further includes:

[0032] When the terminal device is a mobile terminal device, obtaining a device pixel ratio of the mobile terminal device;

[0033] Determining, according to the device pixel ratio, a scaling ratio corresponding to an element with a pixel size of 1 in the target webpage;

[0034] The elements of the target webpage having a pixel size of 1 are displayed based on the zoom ratio.

[0035] By obtaining the corresponding device pixel ratio when the terminal device is a mobile terminal device, the corresponding scaling ratio of the element with a pixel size of 1 in the target web page is adjusted to ensure that the display effect of the element with a pixel size of 1 on the terminal device will not be affected by the device pixel ratio, and a more accurate display effect is achieved.

[0036] In an optional embodiment, the method further includes:

[0037] When each element in the target webpage is displayed in the terminal device, if there is an element to be played in the target webpage, it is automatically played, and the element to be played is: video or audio.

[0038] By automatically playing the elements to be played in the webpage when displaying the target webpage, the display effect of the target webpage is further guaranteed.

[0039] In a second aspect, the present invention provides a webpage layout compatibility device, the device comprising:

[0040] A device information acquisition module, configured to acquire a device type and a webpage display width corresponding to a terminal device in response to a target webpage being accessed by the terminal device;

[0041] A design data determination module, used to determine the design width and root font design size of the target webpage according to the device type of the terminal device;

[0042] a root font attribute determination module, configured to determine a proportional relationship between a design width of the target webpage and a display width of the webpage, and determine a first root font attribute value of the target webpage relative to the terminal device based on the proportional relationship and the root font design size;

[0043] a root font unit conversion module, configured to determine a unit width dimension value of the target webpage in a viewport unit according to the webpage display width, perform unit conversion on the first root font attribute value based on the unit width dimension value to obtain a second root font attribute value in a viewport unit, and determine the second root font attribute value as a relative unit;

[0044] The web page element display module is used to control the terminal device to display each element in the target web page according to the relative unit size of each element in the target web page relative to the root font and the second root font attribute value.

[0045] In a third aspect, the present invention provides a computer device, comprising: a memory and a processor, the memory and the processor being communicatively connected to each other, the memory storing computer instructions, and the processor executing the web page layout compatibility method of the first aspect or any corresponding embodiment thereof by executing the computer instructions.

[0046] In a fourth aspect, the present invention provides a computer-readable storage medium having computer instructions stored thereon, the computer instructions being used to enable a computer to execute the web page layout compatibility method of the first aspect or any corresponding embodiment thereof. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] In order to more clearly illustrate the specific implementation methods of the present invention or the technical solutions in the prior art, the drawings required for use in the specific implementation methods or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some implementation methods of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0048] Figure 1 is a flow chart of a webpage layout compatibility method according to an embodiment of the present invention;

[0049] Figure 2 is a flow chart of another webpage layout compatibility method according to an embodiment of the present invention;

[0050] Figure 3 is an example diagram of a web page processing flow in response to device access according to an embodiment of the present invention;

[0051] Figure 4 is a structural block diagram of a webpage layout compatibility device according to an embodiment of the present invention;

[0052] Figure 5 It is a schematic diagram of the hardware structure of a computer device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0053] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present invention.

[0054] As more and more screen sizes appear on Web-enabled devices, the concept of adaptive Web design has emerged, which is the practice of allowing web pages to change their layout and appearance to adapt to different screen widths, resolutions, etc. Adaptive layout means that the same page has different layouts on different screen sizes to ensure that the web page can have a good display effect on different devices.

[0055] In the prior art, when performing adaptive layout, the corresponding web page display size is often provided by obtaining the specific interval of the specific parameters of the actual access device. This method realizes adaptive layout according to the interval, cannot restore the design drawing in proportion, and has a large workload and low efficiency in being compatible with various devices.

[0056] To this end, an embodiment of the present invention provides a web page layout compatibility method, by determining the design width and root font design size of the web page according to the device type corresponding to the terminal device accessing the web page when the web page is accessed, and determining the root font attribute value of the target web page on the terminal device according to the proportional relationship between the design width and the display width of the web page on the terminal device, and using its value under the viewport unit as a relative unit, thereby controlling the terminal device to display each element in the target web page according to the relative unit size of each element, thereby achieving that the target web page can be compatible with terminal devices of different screen sizes and has a relatively good display effect.

[0057] According to an embodiment of the present invention, an embodiment of a web page layout compatibility method is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0058] In this embodiment, a web page layout compatibility method is provided, which can be used for the above web page layout. Figure 1 is a flow chart of a webpage layout compatibility method according to an embodiment of the present invention. Figure 1 As shown, the process includes the following steps:

[0059] Step S101, in response to a target webpage being accessed by a terminal device, obtaining a device type and a webpage display width corresponding to the terminal device.

[0060] It can be understood that when the target web page is accessed by a terminal device, the accessed web page can obtain the device type and web page display width of the terminal device. The terminal device can be: a mobile phone, tablet, computer, etc. that can access and display web pages.

[0061] These devices can be divided into mobile terminal devices and computer devices. For example, the device type corresponding to terminal devices such as mobile phones and tablets is mobile terminal devices, and the device type of host computers, laptops and other devices is computer devices.

[0062] The web page display width corresponding to the terminal device can be understood as the specific width of the target web page when it is displayed on the terminal device. For example, the terminal device is a mobile phone, and its actual screen width is 750px. The web page is displayed in full screen on the mobile phone, and the display width of the target web page is 750px.

[0063] Step S102, determining the design width and root font design size of the target webpage according to the device type of the terminal device.

[0064] It can be understood that for different types of devices, the target web page can provide different web page design formats. The target web pages under different design formats have different design widths and root font design sizes. The design width and root font design size of the target web page can be determined according to the specific device type corresponding to the terminal device accessing the web page.

[0065] Step S103, determining the proportional relationship between the design width of the target webpage and the webpage display width, and determining the first root font attribute value of the target webpage relative to the terminal device based on the proportional relationship and the root font design size.

[0066] After obtaining the design width of the target web page, the proportional relationship between the design width and the web page display width corresponding to the terminal device can be calculated, and the root font design size of the target web page can be adjusted according to the proportional relationship, thereby obtaining the first root font attribute value of the target web page relative to the terminal device, that is, the root font attribute of the target web page when displayed on the terminal device, that is, font size, and the unit of the first root font attribute value is px.

[0067] For example, for a terminal device accessing a target web page, assuming that the terminal device is a mobile phone, the corresponding web page design width is 750px, the root font design size is 100px, and the web page display width of the terminal device when displaying the web page is 500px, then the ratio between the web page design width and the web page display width is 3:2. The root font design size is adjusted according to the ratio, and the root font attribute value when the target web page is displayed on the mobile phone is 66.7px, that is, the font size is set to 66.7px.

[0068] Step S104, determining the unit width dimension value of the target webpage in viewport units according to the webpage display width, performing unit conversion on the first root font attribute value based on the unit width dimension value to obtain a second root font attribute value in viewport units, and determining the second root font attribute value as a relative unit.

[0069] The viewport unit is vw, which can be understood as the size corresponding to 1% of the display width when the terminal device displays the webpage. Therefore, it is necessary to determine the unit width size value of the target webpage in the viewport unit according to the webpage display width. For example, when the terminal device displays the target webpage, the webpage display width is 500px, then when the target webpage is displayed, the unit width size value in the viewport unit is 5px, that is, 1vw is 5px.

[0070] Then, the first font attribute value is determined according to the unit width size value for unit conversion. Similarly, based on the above example, assuming that the first font attribute value is 66.7px, and when the terminal device displays the target web page, 1vw is equal to 5px, then the second font attribute value after unit conversion is 66.7 / 5vw, that is, 13.33vw, and the font size is 13.33vw.

[0071] The relative unit is rem, which is used to represent the size of other elements in the web page relative to the root font size. After determining that the second root font attribute value is 13.33vw, rem is set according to the relative unit, that is, 1rem is equal to 13.33vw.

[0072] Step S105 , controlling the terminal device to display each element in the target web page according to the relative unit size of each element in the target web page relative to the root font and the second root font attribute value.

[0073] In the target webpage, each element has a relative unit size relative to the root font, and the various elements of the target webpage can be displayed in the terminal device according to the relative unit size corresponding to each element in the target webpage and the specific second root font attribute value.

[0074] For example, in the target web page, the relative unit size of element A relative to the root font is 2rem. At the same time, in the above step S104, it is determined that 1rem in the target web page is equal to 13.33vw. Therefore, when element A is displayed, its corresponding size is 26.66vw. Since vw is a unit relative to the web page display width of the device, the size determined according to this unit can be compatible with display devices of various screen sizes.

[0075] The web page layout compatibility method provided in this embodiment determines the design width and root font design size of the web page according to the device type corresponding to the terminal device accessing the web page when the web page is accessed, and determines the root font attribute value of the target web page on the terminal device according to the proportional relationship between the design width and the display width of the web page on the terminal device, and uses its value in the viewport unit as the relative unit, thereby controlling the terminal device to display each element in the target web page according to the relative unit size of each element, thereby achieving that the target web page can be compatible with the display of terminal devices with different screen sizes and has a relatively good display effect.

[0076] According to an embodiment of the present invention, another web page layout compatibility method embodiment is provided, which can be used for the above web page layout. Figure 2 is a flow chart of another webpage layout compatibility method according to an embodiment of the present invention. Figure 2 As shown, the process includes the following steps:

[0077] Step S201, in response to a target web page being accessed by a terminal device, obtaining a device type and a web page display width corresponding to the terminal device.

[0078] Specifically, in the above step S201, obtaining the device type of the terminal device includes:

[0079] Get the actual screen width of the terminal device;

[0080] The device type of the terminal device is determined according to the size relationship between the actual screen width and the preset critical width.

[0081] It can be understood that when the target web page is accessed, the actual screen width of the terminal device accessing the web page can be obtained, and the obtained actual screen width is compared with the preset critical width to determine the specific device type of the terminal device accessing the web page.

[0082] Exemplarily, the device type can be divided into: mobile terminal device and computer device. If the actual screen width is greater than the preset critical width, the device type of the terminal device is determined to be a computer device; if the actual screen width is less than the preset critical width, it is determined to be a mobile terminal device. For example, if the actual screen width is 750px and the preset critical width is 800px, the device type of the terminal device is determined to be a mobile terminal device.

[0083] Step S202, determining the design width and root font design size of the target webpage according to the device type of the terminal device.

[0084] Specifically, the device types may include: mobile terminal devices and computer devices;

[0085] In step S202, determining the design width and root font design size of the target webpage according to the device type of the terminal device includes:

[0086] When the terminal device is a mobile terminal device, calling a first design draft of the target webpage, the first design draft being a webpage design draft preset for the mobile terminal device, and determining the design width and root font design size of the first design draft as the design width and root font design size of the target webpage;

[0087] When the terminal device is a computer device, the second design draft of the target web page is called, the second design draft is a web page design draft preset for the computer device, and the design width and root font design size of the second design draft are determined as the design width and root font design size of the target web page.

[0088] It can be understood that the target web page can be pre-set with two versions of web page design drafts, one is the first design draft for mobile terminal devices, and the other is the second design draft for computer devices. For mobile terminal devices, such as mobile phones, tablets and other types of devices, and computer devices, such as host computers, laptops and other types of devices, since the two types of devices have large differences in screen width and aspect ratio, web page design drafts for these two different types of devices, namely the first design draft and the second design draft, can be pre-set.

[0089] For the two design drafts, their corresponding web page design widths and root font design sizes are different. In addition, based on the actual situation, the relative unit sizes of different web page elements in the two design drafts relative to the root font may also be different. The specific settings can be made according to the actual situation. The purpose is to ensure that the web page can have a better display effect on different devices.

[0090] After determining the device type corresponding to the terminal device accessing the target web page, different design drafts can be selected according to the specific type of the terminal device. If the terminal device is a mobile terminal device, call the first design draft for the mobile terminal device pre-set in the target web page, obtain the design width and root font design size in the first design draft, and determine them as the design width and root font design size of the target web page for subsequent size scaling and unit conversion.

[0091] Similarly, when the terminal device is a computer device, the second design draft for the computer device pre-set in the target web page is called, and the design width and root font design size in the second design draft are determined as the design width and root font design size of the target web page.

[0092] Step S203, determining the proportional relationship between the design width of the target webpage and the webpage display width, and determining the first root font attribute value of the target webpage relative to the terminal device based on the proportional relationship and the root font design size. Figure 1 Step S103 of the illustrated embodiment will not be described in detail here.

[0093] Step S204, determining the unit width dimension value of the target webpage in the viewport unit according to the webpage display width, performing unit conversion on the first root font attribute value based on the unit width dimension value to obtain the second root font attribute value in the viewport unit, and determining the second root font attribute value as a relative unit. Figure 1 Step S104 of the illustrated embodiment will not be described in detail here.

[0094] Step S205 , controlling the terminal device to display each element in the target web page according to the relative unit size of each element in the target web page relative to the root font and the second root font attribute value.

[0095] Specifically, in step S205, according to the relative unit size of each element in the target webpage relative to the root font and the second root font attribute value, controlling the terminal device to display each element in the target webpage includes:

[0096] When the terminal device is a mobile terminal device, determining the size of each element in the first design draft in viewport units according to the relative unit size of each element in the first design draft relative to the root font and the second root font attribute value;

[0097] Based on the size of each element in the first design draft in viewport units, controlling the terminal device to display each element in the target web page;

[0098] When the terminal device is a computer device, the size of each element in the second design draft in viewport units is determined according to the relative unit size of each element in the second design draft relative to the root font and the second root font attribute value;

[0099] Based on the size of each element in the second design draft in the viewport unit, the terminal device is controlled to display each element in the target web page.

[0100] It can be understood that in the pre-set design draft, each element has a relative unit size relative to the root font. At the same time, the root font attribute value under the viewport unit is determined in the above steps and set as a relative unit. Combined with the above example, font size = 13.33vw, 1rem = 13.33vw. Assume that in the first design draft, the size of element A is 2rem. When element A is displayed in the terminal device accessing the target web page, the specific display size is 26.66vw. The relative size of an element relative to the root font may be different in different design drafts. Therefore, when displaying, the size of each element in the viewport unit can be determined according to the relative unit size of each element in the design draft relative to the root font, thereby controlling the terminal device to display each element in the target web page.

[0101] Step S206, determining the font size of the block-level element in the target web page according to the size relationship between the web page display width and the preset interval;

[0102] Displays the fonts in block-level elements on the target page based on the font size of the block-level elements on the target page.

[0103] It can be understood that when the font inside the block-level element in the target web page is displayed, since the element is displayed in viewport units, when the web page display width of the screen is larger, the font in the block element will also be larger. Similarly, when the web page display width of the screen is smaller, the font in the block element will also be smaller. In order to avoid the font in the block element being too large or too small, the font size in the block-level element can be determined according to the size relationship between the web page display width of the terminal device and the preset interval, so that the font in the block-level element in the target web page is displayed according to the font size.

[0104] For example, when the webpage display width of the terminal device is less than 300px, the font size in the block-level element is 31px, when the webpage width of the terminal device is between 300px and 400px, the font size in the block-level element is 32px, and so on. By presetting the font sizes in the block-level elements corresponding to different intervals, the font size in the block-level element can be determined according to the specific interval of the webpage display width of the terminal device, and displayed in the terminal device, avoiding the problem of too large or too small fonts.

[0105] In one example, when the terminal device is a mobile terminal device, obtaining a device pixel ratio of the mobile terminal device;

[0106] Determine the scaling ratio of the target web page's element with a pixel size of 1 based on the device pixel ratio;

[0107] Displays elements of the target web page at a pixel size of 1 based on the zoom factor.

[0108] It can be understood that on some mobile devices with high-definition screens, 1px in the web page displayed by the device will become very thick, showing an effect of more than 1px. The reason is that 1px in CSS cannot be equated with 1px on mobile devices. The proportional relationship between them is determined by the device pixel ratio (dpr) and size.

[0109] Therefore, it is necessary to obtain the device pixel ratio dpr corresponding to the mobile terminal device, and scale the elements with a pixel size of 1px in the target web page, such as wireframes, shadows, etc., according to the device pixel ratio. That is, the scaling ratio for the 1px element is determined according to the device pixel ratio dpr, so that the elements in the target web page are displayed based on the determined scaling ratio.

[0110] By obtaining the corresponding device pixel ratio when the terminal device is a mobile terminal device, the corresponding scaling ratio of the element with a pixel size of 1 in the target web page is adjusted to ensure that the display effect of the element with a pixel size of 1 on the terminal device will not be affected by the device pixel ratio, and a more accurate display effect is achieved.

[0111] Specifically, when the terminal device is controlled to display each element in the target web page, if there is an element to be played in the target web page, it is automatically played, and the element to be played is: video or audio. By automatically playing the element to be played in the web page, the display effect of the target web page can be further guaranteed.

[0112] The web page layout compatibility method provided by the embodiment of the present invention obtains the design width and root font design size corresponding to the accessed terminal device by calling the corresponding design draft according to the specific device type of the accessed terminal device when the web page is accessed, and then determines the root font attribute value of the target web page on the terminal device according to the proportional relationship between the design width and the display width, and uses its value under the viewport unit as the relative unit, thereby controlling the terminal device to display each element in the target web page according to the relative unit size of each element, thereby achieving that the target web page can be compatible with the display of terminal devices with different screen sizes and has a relatively good display effect.

[0113] In order to facilitate understanding of the above-mentioned embodiments of the invention, according to an embodiment of the invention, an example diagram of a web page processing flow in response to device access is provided, such as Figure 3 As shown, when the target web page is accessed, the specific device type of the access device must first be determined, that is, whether the access device is a mobile terminal device or a PC device, i.e., a computer device. After the determination is completed, the corresponding js file is loaded and the device identifier is added. Exemplarily, it can be implemented according to the following code:

[0114] HTML settings, adaptive device size

[0115] <meta name＝"viewport"content＝"width＝device-width,initial-scale＝1.0">

[0116] const designWidth = 1920; / / define PC standard width

[0117] const designMobileWidth = 750; / / define H5 design width

[0118] const baseMobleSize = 32; / /

[0119] const deviceWidth = 768; / / define the critical width of h5

[0120] function setRem(){

[0121] / / Judge PC, mobile terminal

[0122] if(window.screen.availWidth<=deviceWidth){

[0123] / / Add h5 logo

[0124] document.body.classList.add('is-mobile')

[0125] dw = designMobileWidth;

[0126] size = baseMobileSize

[0127] }else{

[0128] / / Add PC ID

[0129] dw = designWidth;

[0130] size = baseSize;

[0131] document.body.classList.add('is-pc')

[0132] }

[0133] }

[0134] setRem()

[0135] At the same time, the screen changes are dynamically monitored, so as to set the scaling ratio of the 1px element in the page according to the device pixel ratio dpr. For example, the specific code is as follows:

[0136] / / Monitor page size changes

[0137] window.addEventListener('resize',setRem);

[0138] / / Set the ipx element scaling ratio according to dpr

[0139] let dpr=Window.devicePixelRatio

[0140] / / Add [data-dpr] to control different dpr sizes through css

[0141] let data_dpr=document.createAttribute('data-dpr');

[0142] data_dpr.value=parseInt(dpr);

[0143] document.body.setAttributeNode(data_dpr);

[0144] [data-dpr=2]{.border-bottom::after{-webkit-transform:scaleY(0.5); transform:scaleY(0.5);}}

[0145] [data-dpr=3]{.border-bottom::after{-webkit-transform:scaleY(0.33); transform:scaleY(0.33);}}

[0146] Next, the rem+vw layout scheme is started to realize that the elements in the target web page can be scaled and compatible according to the viewport unit vw. The specific content can be combined with the above method embodiment, which will not be repeated here.

[0147] For the font size of block-level elements, the font size in the block-level elements can be set according to the specific interval of the web page display width. For example, the specific code can be as follows:

[0148] Setting font ranges via CSS media query

[0149] @media only screen and(max-width:700px){div{font-size:34px;}}

[0150] @media only screen and(max-width:600px){div{font-size:33px;}}

[0151] @media only screen and(max-width:500px){div{font-size:32px;}}

[0152] @media only screen and(max-width:400px){div{font-size:31px;}}

[0153] @media only screen and(max-width:300px){div{font-size:30px;}}

[0154] And set multiple parameters to ensure automatic playback and playback compatibility of each device type. For example, the specific code is as follows:

[0155] video(src='xxx.mp4,loop,preload,playsinline,webkit-playsinline,x5-video-player-type='h5-page')

[0156] For the above content, you can 1. package the above logic implementation through npm and reuse it in multiple projects. For example, package the above logic and implementation into deviceSolution through npm. When using it, use it through import ds from'deviceSolution'ds.init().

[0157] In this embodiment, a web page layout compatible device is also provided, which is used to implement the above embodiments and preferred implementation modes, and the descriptions that have been made will not be repeated. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.

[0158] This embodiment provides a web page layout compatible device, such as Figure 4 As shown, including:

[0159] The device information acquisition module 401 is used to acquire the device type and webpage display width corresponding to the terminal device in response to the target webpage being accessed by the terminal device.

[0160] The design data determination module 402 is used to determine the design width and root font design size of the target webpage according to the device type of the terminal device.

[0161] The root font attribute determination module 403 is used to determine the proportional relationship between the design width of the target webpage and the webpage display width, and determine the first root font attribute value of the target webpage relative to the terminal device based on the proportional relationship and the root font design size.

[0162] The root font unit conversion module 404 is used to determine the unit width dimension value of the target web page in the viewport unit according to the web page display width, perform unit conversion on the first root font attribute value based on the unit width dimension value to obtain the second root font attribute value in the viewport unit, and determine the second root font attribute value as a relative unit.

[0163] The web page element display module 405 is used to control the terminal device to display each element in the target web page according to the relative unit size of each element in the target web page relative to the root font and the second root font attribute value.

[0164] In some optional implementations, the device information acquisition module 401, when acquiring the device type of the terminal device, includes:

[0165] Get the actual screen width of the terminal device;

[0166] The device type of the terminal device is determined according to the size relationship between the actual screen width and the preset critical width.

[0167] In some optional implementations, the device type includes: a mobile terminal device and a computer device; the design data determination module 402, when determining the design width and the root font design size of the target webpage according to the device type of the terminal device, includes: when the terminal device is a mobile terminal device, calling a first design draft of the target webpage, the first design draft being a webpage design draft preset for the mobile terminal device, and determining the design width and the root font design size of the first design draft as the design width and the root font design size of the target webpage;

[0168] When the terminal device is a computer device, the second design draft of the target web page is called, the second design draft is a web page design draft preset for the computer device, and the design width and root font design size of the second design draft are determined as the design width and root font design size of the target web page.

[0169] In some optional implementations, the web page element display module 405, when controlling the terminal device to display each element in the target web page according to the relative unit size of each element in the target web page relative to the root font and the second root font attribute value, includes:

[0170] When the terminal device is a mobile terminal device, determining the size of each element in the first design draft in viewport units according to the relative unit size of each element in the first design draft relative to the root font and the second root font attribute value;

[0171] Based on the size of each element in the first design draft in viewport units, controlling the terminal device to display each element in the target web page;

[0172] When the terminal device is a computer device, the size of each element in the second design draft in viewport units is determined according to the relative unit size of each element in the second design draft relative to the root font and the second root font attribute value;

[0173] Based on the size of each element in the second design draft in the viewport unit, the terminal device is controlled to display each element in the target web page.

[0174] In some optional implementations, the web page element display module 405 is further used to determine the font size of the block-level element in the target web page according to the size relationship between the web page display width and the preset interval;

[0175] Displays the fonts in block-level elements on the target page based on the font size of the block-level elements on the target page.

[0176] In some optional implementations, the web page element display module 405 is further configured to obtain a device pixel ratio of the mobile terminal device when the terminal device is a mobile terminal device;

[0177] Determine the scaling ratio of the target web page's element with a pixel size of 1 based on the device pixel ratio;

[0178] Displays elements of the target web page at a pixel size of 1 based on the zoom factor.

[0179] In some optional implementations, the web page element display module 405 is also used to automatically play the elements to be played when controlling the terminal device to display the elements in the target web page if there are elements to be played in the target web page, and the elements to be played are: video or audio.

[0180] The further functional description of each of the above modules and units is the same as that of the above corresponding embodiments and will not be repeated here.

[0181] The web page layout compatibility device in this embodiment is presented in the form of a functional unit, where the unit refers to an ASIC (Application Specific Integrated Circuit) circuit, a processor and memory that executes one or more software or fixed programs, and / or other devices that can provide the above functions.

[0182] The embodiment of the present invention also provides a computer device having the above Figure 4 The web page layout shown is compatible with the device.

[0183] See also Figure 5 , Figure 5 is a schematic diagram of the structure of a computer device provided by an optional embodiment of the present invention, such as Figure 5 As shown, the computer device includes: one or more processors 10, a memory 20, and interfaces for connecting various components, including high-speed interfaces and low-speed interfaces. Various components are connected to each other using different buses for communication, and can be installed on a common mainboard or installed in other ways as needed. The processor can process the instructions executed in the computer device, including instructions stored in or on the memory to display the graphical information of the GUI on an external input / output device (such as, a display device coupled to the interface). In some optional embodiments, if necessary, multiple processors and / or multiple buses can be used together with multiple memories and multiple memories. Similarly, multiple computer devices can be connected, and each device provides some necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system). Figure 5 A processor 10 is taken as an example.

[0184] The processor 10 may be a central processing unit, a network processor or a combination thereof. The processor 10 may further include a hardware chip. The hardware chip may be a dedicated integrated circuit, a programmable logic device or a combination thereof. The programmable logic device may be a complex programmable logic device, a field programmable gate array, a general purpose array logic or any combination thereof.

[0185] The memory 20 stores instructions executable by at least one processor 10, so that at least one processor 10 executes the method shown in the above embodiment.

[0186] The memory 20 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created according to the use of the computer device, etc. In addition, the memory 20 may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some optional embodiments, the memory 20 may optionally include a memory remotely arranged relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0187] The memory 20 may include a volatile memory, such as a random access memory; the memory may also include a non-volatile memory, such as a flash memory, a hard disk or a solid state drive; the memory 20 may also include a combination of the above types of memory.

[0188] The computer device also includes an input device 30 and an output device 40. The processor 10, the memory 20, the input device 30 and the output device 40 may be connected via a bus or other means. Figure 5 The example of connecting through bus is taken in the following.

[0189] The input device 30 can receive input digital or character information, and generate key signal input related to the user settings and function control of the computer device, such as a touch screen, a keypad, a mouse, a track pad, a touch pad, an indicator bar, one or more mouse buttons, a trackball, a joystick, etc. The output device 40 may include a display device, an auxiliary lighting device (e.g., an LED) and a tactile feedback device (e.g., a vibration motor), etc. The above-mentioned display device includes but is not limited to a liquid crystal display, a light emitting diode, a display and a plasma display. In some optional embodiments, the display device can be a touch screen.

[0190] The embodiment of the present invention also provides a computer-readable storage medium. The method according to the embodiment of the present invention can be implemented in hardware, firmware, or can be implemented as a computer code that can be recorded in a storage medium, or can be implemented as a computer code that is originally stored in a remote storage medium or a non-temporary machine-readable storage medium and will be stored in a local storage medium through a network download, so that the method described herein can be stored in such software processing on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. Among them, the storage medium can be a magnetic disk, an optical disk, a read-only storage memory, a random access memory, a flash memory, a hard disk or a solid-state hard disk, etc.; further, the storage medium can also include a combination of the above types of memories. It can be understood that a computer, a processor, a microprocessor controller, or programmable hardware includes a storage component that can store or receive software or computer code. When the software or computer code is accessed and executed by a computer, a processor, or hardware, the method shown in the above embodiment is implemented.

[0191] Although the embodiments of the present invention have been described in conjunction with the accompanying drawings, those skilled in the art may make various modifications and variations without departing from the spirit and scope of the present invention, and such modifications and variations are all within the scope defined by the appended claims.

Claims

1. A web page layout compatibility method, characterized in that: The method comprises: In response to a target webpage being accessed by a terminal device, obtaining a device type and a webpage display width corresponding to the terminal device; Determining the design width and root font design size of the target webpage according to the device type of the terminal device; Determine a proportional relationship between a design width of the target webpage and a display width of the webpage, and determine a first root font attribute value of the target webpage relative to the terminal device based on the proportional relationship and the root font design size; Determine a unit width dimension value of the target webpage in viewport units according to the webpage display width, perform unit conversion on the first root font attribute value based on the unit width dimension value to obtain a second root font attribute value in viewport units, and determine the second root font attribute value as a relative unit; According to the relative unit size of each element in the target webpage relative to the root font and the second root font attribute value, the terminal device is controlled to display each element in the target webpage.

2. The method according to claim 1, characterized in that The obtaining the device type of the terminal device includes: Obtaining the actual screen width of the terminal device; The device type of the terminal device is determined according to the size relationship between the actual screen width and the preset critical width.

3. The method according to claim 1, characterized in that The device types include: mobile terminal devices and computer devices; Determining the design width and root font design size of the target webpage according to the device type of the terminal device includes: When the terminal device is a mobile terminal device, calling a first design draft of the target webpage, the first design draft being a webpage design draft preset for the mobile terminal device, and determining the design width and root font design size of the first design draft as the design width and root font design size of the target webpage; When the terminal device is a computer device, the second design draft of the target web page is called, the second design draft is a web page design draft preset for the computer device, and the design width and root font design size of the second design draft are determined as the design width and root font design size of the target web page.

4. The method according to claim 3, characterized in that The step of controlling the terminal device to display each element in the target webpage according to the relative unit size of each element in the target webpage relative to the root font and the second root font attribute value includes: When the terminal device is a mobile terminal device, determining the size of each element in the first design draft in viewport units according to the relative unit size of each element in the first design draft relative to the root font and the attribute value of the second root font; Based on the size of each element in the first design draft in viewport units, controlling the terminal device to display each element in the target webpage; When the terminal device is a computer device, determining the size of each element in the second design draft in viewport units according to the relative unit size of each element in the second design draft relative to the root font and the attribute value of the second root font; Based on the size of each element in the second design draft in viewport units, the terminal device is controlled to display each element in the target web page.

5. The method according to claim 1, characterized in that The method further comprises: Determining the font size of the block-level elements in the target web page according to the size relationship between the web page display width and the preset interval; The fonts in the block-level elements in the target webpage are displayed according to the font sizes in the block-level elements in the target webpage.

6. The method according to claim 3, characterized in that: The method further comprises: When the terminal device is a mobile terminal device, obtaining a device pixel ratio of the mobile terminal device; Determining, according to the device pixel ratio, a scaling ratio corresponding to an element with a pixel size of 1 in the target webpage; The elements of the target webpage having a pixel size of 1 are displayed based on the zoom ratio.

7. The method according to claim 1, characterized in that The method further comprises: When the terminal device is controlled to display each element in the target webpage, if there is an element to be played in the target webpage, it is automatically played, and the element to be played is: video or audio.

8. A web page layout compatible device, characterized in that: The device comprises: A device information acquisition module, configured to acquire a device type and a webpage display width corresponding to a terminal device in response to a target webpage being accessed by the terminal device; A design data determination module, used to determine the design width and root font design size of the target webpage according to the device type of the terminal device; a root font attribute determination module, configured to determine a proportional relationship between a design width of the target webpage and a display width of the webpage, and determine a first root font attribute value of the target webpage relative to the terminal device based on the proportional relationship and the root font design size; a root font unit conversion module, configured to determine a unit width dimension value of the target webpage in a viewport unit according to the webpage display width, perform unit conversion on the first root font attribute value based on the unit width dimension value to obtain a second root font attribute value in a viewport unit, and determine the second root font attribute value as a relative unit; The web page element display module is used to control the terminal device to display each element in the target web page according to the relative unit size of each element in the target web page relative to the root font and the second root font attribute value.

9. A computer device, characterized in that: include: A memory and a processor, wherein the memory and the processor are communicatively connected to each other, the memory stores computer instructions, and the processor executes the web page layout compatibility method according to any one of claims 1 to 7 by executing the computer instructions.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the webpage layout compatibility method according to any one of claims 1 to 7.

Images