CN116204741A

CN116204741A - Webpage adaptation method and device, electronic equipment and medium

Info

Publication number: CN116204741A
Application number: CN202111456067.2A
Authority: CN
Inventors: 李正雄
Original assignee: Jingdong Technology Holding Co Ltd
Current assignee: Jingdong Technology Holding Co Ltd
Priority date: 2021-12-01
Filing date: 2021-12-01
Publication date: 2023-06-02

Abstract

The disclosure relates to a method, a device, an electronic device and a medium for web page adaptation, wherein the method comprises the following steps: receiving an access request of a user to a target webpage on terminal equipment; acquiring information of a target display size of the terminal equipment; loading codes or files corresponding to the page content of the target webpage from a pre-written front-end page file; and performing size conversion on codes or files corresponding to the page content according to the information of the target display size to obtain a webpage file suitable for the target display size of the terminal equipment. Based on the webpage adaptation method disclosed by the invention, the written webpage codes or files can be dynamically adapted to various types of terminal equipment with display size and display resolution, and corresponding adaptation codes are not required to be independently developed for different types of terminal equipment.

Description

Webpage adaptation method and device, electronic equipment and medium

Technical Field

The disclosure relates to the technical field of internet, and in particular relates to a method, a device, electronic equipment and a medium for web page adaptation.

Background

In the network architecture of the browser side/server side (B/S), the sizes of different terminal devices have differences, and when developing a web page, the problem of how to adapt to different display interfaces needs to be considered. For example, there is a difference in interface size between a mobile terminal and a Personal Computer (PC) terminal, and there is a difference in screen size between different mobile terminals and between different PC terminals, so that when developing web pages corresponding to different types, sizes or resolutions of terminal devices, a problem of how to adapt to different display interfaces needs to be considered.

As HTML5 (HTML refers to hypertext markup language) technology continues to evolve, units of front end size come in a variety of types, including: the absolute length units px (pixel), the relative length units em, the relative length units rem, the width vw of the window, the height vh of the window, and the like.

In the process of implementing the disclosed concept, the inventor finds that at least the following technical problems exist in the related art: when front-end page development of terminal equipment with different types (such as a mobile terminal and a PC terminal) and sizes or resolutions is carried out, the respective page development needs to be carried out in a targeted manner, and the workload is huge; in addition, when a front-end page developed by a specific type of terminal device (for example, a mobile terminal) is intended to be applied to other types of terminal devices (for example, a PC terminal), a code adapted to a display interface of the other types of terminal devices needs to be added to the developed front-end page, so that the development work is complicated and complex, the maintenance cost of the code is high, and the risk of errors of an original page is increased, namely, a general page development or adaptation logic is lacking, so that the developed page can be adapted to various types, sizes or resolutions of terminal devices.

Disclosure of Invention

In order to solve the above technical problems or at least partially solve the above technical problems, embodiments of the present disclosure provide a method, an apparatus, an electronic device, and a medium for web page adaptation.

In a first aspect, embodiments of the present disclosure provide a method of web page adaptation. The method comprises the following steps: receiving an access request of a user to a target webpage on terminal equipment; acquiring information of a target display size of the terminal equipment; loading codes or files corresponding to the page content of the target webpage from a pre-written front-end page file; and performing size conversion on codes or files corresponding to the page content according to the information of the target display size to obtain a webpage file suitable for the target display size of the terminal equipment.

According to an embodiment of the present disclosure, the target display size is a browser size of the terminal device or a display size customized for a user. The obtaining the information of the target display size of the terminal device includes: analyzing the access request of the target webpage, and determining whether the access parameters of the access request comprise the user-defined display size or not; taking the user-defined display size as the target display size under the condition that the access parameter comprises the user-defined display size; and under the condition that the access parameters do not comprise the user-defined display size, acquiring the browser size information of the terminal equipment, and taking the acquired browser size information as the target display size information.

According to an embodiment of the present disclosure, the target web page is in the form of a web site link on a terminal device, and a user initiates an access request to the target web page through the web site link, where an html (hypertext markup language) file corresponding to the web site link includes: and the function code is used for acquiring the browser size information of the terminal equipment. Wherein, the obtaining the information of the browser size of the terminal device includes: transmitting an html file comprising the function code to the terminal equipment; and acquiring the browser size information of the terminal equipment based on the function code in the process that the user accesses the html file corresponding to the website link through the terminal equipment.

According to the embodiment of the disclosure, the cookie (the data set related to the user identity tracked and stored on the browser) of the terminal device stores information of the browser size of the terminal device in advance; the obtaining the information of the browser size of the terminal device includes: and acquiring the browser size information from the cookie of the terminal equipment.

According to an embodiment of the present disclosure, the front-end page file corresponds to a preset size. The method for obtaining the webpage file with the target display size adapted to the terminal equipment includes the steps of: determining whether the preset size is consistent with the target display size; converting the display size of the code or file corresponding to the page content from the preset size to the target display size under the condition that the preset size is inconsistent with the target display size, so as to obtain a webpage file suitable for the target display size of the terminal equipment; generating a webpage file adapted to the target display size of the terminal device based on a code corresponding to the page content when the preset size is consistent with the target display size; or the file corresponding to the page content is taken as the webpage file.

According to an embodiment of the present disclosure, the above method further includes: and feeding back the webpage file to the terminal equipment so that the terminal equipment displays the content of the target webpage according to the webpage file.

In a second aspect, embodiments of the present disclosure provide a method of web page adaptation. The method comprises the following steps: receiving a request of a first user for accessing a target webpage based on an access link on a terminal device; the request is sent to a first server, and the first server is used for providing network service for the terminal equipment; receiving a webpage file fed back by the first server, wherein the webpage file is obtained by the first server through size conversion of codes or files corresponding to the page content of the target webpage according to the information of the target display size of the terminal equipment; and displaying the content of the target webpage according to the webpage file.

According to an embodiment of the present disclosure, before the receiving the request for the first user to access the target web page based on the access link on the terminal device, the method further includes: receiving configuration information of developing one or more webpages by a second user, wherein the configuration information is written based on the initial size of a front-end webpage design drawing or a user-defined preset size, and the one or more webpages comprise target webpages; generating a front-end page file based on the configuration information; uploading the front-end page file to a second server so that the second server publishes a link library of the webpage, wherein the link library comprises: access links to one or more web pages.

In a third aspect, embodiments of the present disclosure provide an apparatus for web page adaptation. The device may be a server. The device comprises: the device comprises a request receiving module, a size information acquisition module, a page information loading module and a size conversion module. The request receiving module is used for receiving an access request of a user to a target webpage on the terminal equipment. The size information acquisition module is used for acquiring information of the target display size of the terminal equipment. The page information loading module is used for loading codes or files corresponding to the page content of the target webpage from a pre-written front-end page file. And the size conversion module is used for carrying out size conversion on codes or files corresponding to the page content according to the information of the target display size to obtain the webpage file which is suitable for the target display size of the terminal equipment.

According to an embodiment of the present disclosure, the above apparatus further includes: and the response module is used for feeding back the webpage file to the terminal equipment so that the terminal equipment displays the content of the target webpage according to the webpage file.

In a fourth aspect, embodiments of the present disclosure provide an apparatus for web page adaptation. The above-mentioned means may be a terminal device. The device comprises: the system comprises a request receiving module, a request sending module, a file receiving module and a webpage display module. The request receiving module is used for receiving a request of a first user for accessing a target webpage based on an access link on a terminal device. The request sending module is used for sending the request to a first server, and the first server is used for providing network service for the terminal equipment. The file receiving module is configured to receive a web page file fed back by the first server, where the web page file is obtained by performing size conversion on a code or a file corresponding to the page content of the target web page by the first server according to the information of the target display size of the terminal device. The webpage display module is used for displaying the content of the target webpage according to the webpage file.

According to an embodiment of the present disclosure, the above apparatus further includes: the system comprises a development configuration information receiving module, a file generating module and a communication module. The development configuration information receiving module is configured to receive configuration information of a second user for developing one or more web pages, where the configuration information is written based on an initial size of a front-end web page design drawing or a preset size defined by the user, and the one or more web pages include a target web page. The file generation module is used for generating a front-end page file based on the configuration information. The communication module is configured to upload the front-end page file to a second server, so that the second server issues a link library of a web page, where the link library includes: access links to one or more web pages.

In a fifth aspect, embodiments of the present disclosure provide an electronic device. The electronic equipment comprises a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory are communicated with each other through the communication bus; a memory for storing a computer program; and the processor is used for realizing the webpage adaptation method when executing the program stored in the memory.

In a sixth aspect, embodiments of the present disclosure provide a computer-readable storage medium. The computer readable storage medium stores a computer program which, when executed by a processor, implements a method of web page adaptation as described above.

Compared with the prior art, the technical scheme provided by the embodiment of the disclosure has at least part or all of the following advantages:

acquiring information of a target display size of the terminal equipment in the process of responding to an access request of a user to a target webpage; and according to the information of the target display size, the size conversion is performed on the code or file corresponding to the page content of the loaded target webpage, the obtained webpage file can be adapted to the display interface of the terminal equipment corresponding to the current access request, the dynamic adaptation of the webpage aiming at different terminal equipment is realized, in the process of performing page development by a webpage developer, conversion work of different sizes is not required, the written webpage file can be written according to the initial size of the front-end webpage design drawing or the custom preset size, and the written webpage file can be dynamically adapted to various types of terminal equipment with different display sizes and display resolutions based on the webpage adaptation method disclosed by the disclosure, and the corresponding adaptation code is not required to be independently developed aiming at different types of terminal equipment.

Drawings

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

In order to more clearly illustrate the embodiments of the present disclosure or the technical solutions in the prior art, the drawings that are required to be used in the description of the embodiments or the related art will be briefly described below, and it will be apparent to those skilled in the art that other drawings can be obtained from these drawings without inventive effort.

FIG. 1 schematically illustrates a system architecture of a method and apparatus for web page adaptation suitable for use in embodiments of the present disclosure;

FIG. 2 schematically illustrates a flow chart of a method of web page adaptation according to an embodiment of the present disclosure;

FIG. 3 schematically illustrates a detailed implementation flowchart of operation S202, according to an embodiment of the present disclosure;

FIG. 4A schematically illustrates an implementation scenario diagram of operation S303, according to an embodiment of the present disclosure;

FIG. 4B schematically illustrates an implementation scenario diagram of operation S303 according to another embodiment of the present disclosure;

FIG. 5 schematically illustrates a detailed implementation flowchart of operation S204, according to an embodiment of the present disclosure;

FIG. 6 schematically illustrates a flow chart of a method of web page adaptation according to another embodiment of the present disclosure;

FIG. 7 schematically illustrates a flow chart of a method of web page adaptation according to yet another embodiment of the present disclosure;

FIG. 8 schematically illustrates a flow chart of a method of web page adaptation according to yet another embodiment of the present disclosure;

FIG. 9 schematically illustrates a block diagram of an apparatus for web page adaptation in accordance with an embodiment of the present disclosure;

FIG. 10 schematically illustrates a block diagram of an apparatus for web page adaptation according to another embodiment of the present disclosure; and

fig. 11 schematically shows a block diagram of an electronic device provided by an embodiment of the disclosure.

Detailed Description

The absolute length unit px is often referred to as a CSS pixel for describing the width and height of an element and positioning information. CSS pixel = physical pixel/resolution. Furthermore, there is a difference in resolution between different mobile devices, and there is also a difference in physical pixels that 1 CSS pixel (px) can represent.

The relative length unit em is calculated by the font size (font-size) of the parent element relative to the current element, and if the current element is not set, the default font size relative to the browser.

The relative length unit rem is a new relative unit which is added to CSS3 (CSS 3 is a cascading style sheet technology adopted in webpage making, and can effectively realize more accurate control on layout, fonts, colors, backgrounds and other effects of the webpage), rem is a calculation on the font size (font-size) relative to a root element (html), and rem can not only set the font size, but also set the element width and height attributes.

In terms of width vw and height vh relative to the window, the window refers to the size of the viewable area within the browser, excluding the size of the browser area of the taskbar title bar and the bottom toolbar. 1vw = one percent of the width of the visual window.

Where px is the most used size unit in front-end development, and when px is used as a size unit in a mobile terminal due to different screen sizes and densities, adaptation is often required for different screens, which leads to an increase in front-end page development workload. em, rem, vw, vh, etc. as relative dimensions, have great advantages in screen adaptation, exemplified by vw, which is calculated relative to the screen width, 100vw being equal to 750px and 1vw being equal to 7.5px on a 750px wide screen, but since the aspect ratio of the screens is different, the gap between the pc end screen width and the cell phone end screen width is very large, and the front page requires dynamic adaptation of the page size unit if it is intended to be used at the mobile end and the pc end. When front-end page development of terminal equipment with different types (such as a mobile terminal and a PC terminal) and sizes or resolutions is performed, respective page development needs to be performed in a targeted manner, and the workload is huge. In addition, when a front page developed by a specific type of terminal equipment (for example, a mobile terminal) is to be applied to other types of terminal equipment (for example, a PC terminal), a code adapted to a display interface of the other types of terminal equipment needs to be added to the developed front page, so that the development work is complicated and complex, the maintenance cost of the code is high, and the risk of error of an original page is increased.

In view of this, embodiments of the present disclosure provide a method, an apparatus, an electronic device, and a medium for web page adaptation, which enable a developed page to be adapted to various types, sizes, or resolutions of terminal devices based on general page adaptation logic. The method comprises the following steps: receiving an access request of a user to a target webpage on terminal equipment; acquiring information of a target display size of the terminal equipment under the condition that the access request is received; loading codes or files corresponding to the page content of the target webpage from a pre-written front-end page file; and performing size conversion on codes or files corresponding to the page content according to the information of the target display size to obtain a webpage file suitable for the target display size of the terminal equipment.

For the purposes of making the objects, technical solutions and advantages of the embodiments of the present disclosure more apparent, the technical solutions of the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present disclosure, and it is apparent that the described embodiments are some, but not all, embodiments of the present disclosure. All other embodiments, which can be made by one of ordinary skill in the art without undue burden from the disclosure, are within the scope of the disclosure.

Fig. 1 schematically illustrates a system architecture of a method and apparatus for web page adaptation suitable for use in embodiments of the present disclosure.

Referring to fig. 1, a system architecture 100 suitable for a method and apparatus for web page adaptation in an embodiment of the present disclosure includes:

terminal devices

101, 102, 103, a network 104 and a server 105. The network 104 is a medium for providing a communication link between the

terminal devices

101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.

The user may interact with the server 105 via the network 104 using the

terminal devices

101, 102, 103 to receive or send messages or the like. Various communication client applications, such as shopping class applications, web browser applications, search class applications, instant messaging tools, mailbox clients, social platform software, etc. (by way of example only) may be installed on the

terminal devices

101, 102, 103.

The

terminal devices

101, 102, 103 may be various electronic devices having a display screen and supporting web browsing, such as electronic devices including, but not limited to, smartphones, tablets, notebooks, desktop computers, smartwatches, and the like.

The server 105 may be a server providing various services, such as a network (web) server (by way of example only) providing service support for websites accessed by users using the

terminal devices

101, 102, 103. The web server may analyze and process the received website access request, and feed back the processing result (e.g., a web page, information, or data obtained or generated according to the user request) to the terminal device.

It should be noted that the method for web page adaptation provided in the first embodiment of the present disclosure may be generally performed by the server 105, and the method for web page adaptation provided in the second embodiment may be generally performed by the

terminal devices

101, 102, 103. Accordingly, the apparatus for web page adaptation provided in the third embodiment of the present disclosure may be generally provided in the server 105. The apparatus for web page adaptation provided in the fourth embodiment of the present disclosure may be generally provided in the

terminal devices

101, 102, 103. It should be noted that the method for adapting a web page provided by the embodiments of the present disclosure may also be performed by a server or a server cluster that is different from the server 105 and is capable of communicating with the

terminal devices

101, 102, 103 and/or the server 105. Accordingly, the means for web page adaptation provided by the embodiments of the present disclosure may also be provided in a server or a server cluster different from the server 105 and capable of communicating with the

terminal devices

101, 102, 103 and/or the server 105.

It should be understood that the number of terminal devices, networks and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.

A first exemplary embodiment of the present disclosure provides a method of web page adaptation. The method for web page adaptation described in this embodiment may be performed by a server.

Fig. 2 schematically illustrates a flow chart of a method of web page adaptation according to an embodiment of the present disclosure.

Referring to fig. 2, a method for adapting a web page provided by an embodiment of the present disclosure includes the following operations: s201, S202, S203, and S204. The above operations S201 to S204 may be performed by a server.

In operation S201, a user' S access request to a target web page on a terminal device is received.

In operation S202, information of a target display size of the terminal device is acquired.

In operation S203, a code or file corresponding to the page content of the target web page is loaded from the pre-written front-end page file.

In operation S204, according to the information of the target display size, a size conversion is performed on the code or file corresponding to the page content, so as to obtain a web page file adapted to the target display size of the terminal device.

In the implementation scenario of the above operation S201, the user clicks url (uniform resource locator) link on a terminal device, so as to consider that the user initiates an access request to a target web page corresponding to the web address link on the terminal device; or the user pastes the address of the plain text into the address bar of the browser and clicks the enter key, which is regarded that the user initiates an access request to the target webpage corresponding to the address on the terminal equipment. And the terminal equipment sends the request to the server in the form of an http message. On the server side, a request for access by a user to a target web page on a terminal device is received (corresponding to operation S201).

It should be appreciated that the web site link and corresponding access modality leading to the target web page may be of various forms, through which the user initiates an access request to the target web page. For example, in addition to the above-described example access form of clicking on url links, access form of inputting/pasting plain text links to address bars of a browser, click keyword hyperlinks or other web page access forms may be used.

The operations S202 to S204 are performed in the process of the server responding to the access request.

The server, upon receiving the above access request, acquires information of the target display size of the above terminal device (corresponding to operation S202).

Then, the server loads a code or file corresponding to the page content of the above-described target web page from the pre-written front-end page file (corresponding to operation S203). The code or file corresponding to the page content of the target webpage refers to a file of resources/contents that need to be referenced/called for forming the target webpage, and includes: pictures (Images) files, CSS (a programming language) files, JS (a programming language) files, etc.

The above-described operation S203 may be triggered in response to the resource/content reference/call request of the terminal device in the course of the server responding to the access request, or may be self-implemented in the course of the server responding to the access request.

After performing operations S202 and S203, the server obtains the information of the target display size of the terminal device, loads the code or file corresponding to the page content of the target web page, performs size conversion on the code or file corresponding to the page content according to the information of the target display size, and obtains the web page file adapted to the target display size of the terminal device (corresponding to operation S204). Therefore, the terminal equipment can generate the content of the adapted target webpage based on the webpage file.

Based on the operations S201 to S204, information of the target display size of the terminal device is obtained in a process of responding to the access request of the user to the target web page; and according to the information of the target display size, the size conversion is carried out on the code or file corresponding to the page content of the loaded target webpage, and the obtained webpage file can be adapted to the display interface of the terminal equipment corresponding to the current access request, so that the dynamic adaptation of the webpages of different terminal equipment is realized. In the process of page development, a webpage developer does not need to perform conversion work of different sizes, can write according to the initial size of a front-end webpage design drawing or a custom preset size, and the written webpage file can be dynamically adapted to terminal equipment of various types, display sizes and display resolutions based on the webpage adaptation method disclosed by the invention, and does not need to independently develop corresponding adaptation codes for the terminal equipment of different types.

In accordance with the embodiment of the present disclosure, in operation S202 described above, there are various methods for acquiring information of the target display size of the terminal device. For example, in an implementation scenario, the target display size of the terminal device may be a user-defined display size, and the access parameter in the website link carries information of the user-defined display size, where the user-defined display size is the target display size. In this case, the user-defined display size information carried in the access parameter is directly extracted from the website link, so that the target display size information can be obtained. In this implementation scenario, the above operation S203 is performed by itself in the process of the server responding to the access request.

In another implementation scenario, the target display size of the terminal device defaults to the browser size of the terminal device, and before responding to the website link and feeding back an html (hypertext markup language or hypertext markup language, which is a standard language for making a web page) file corresponding to the website link to the terminal device, the server may add a function code for obtaining the browser size information of the terminal device to the html file, and then feed back the html file including the function code to the terminal device. After the terminal device receives the html file comprising the function code, the browser analyzes the html file to obtain information of the webpage resource/content to be referred/called, such as Images file, CSS file, JS file, etc. At this time, the browser of the terminal device automatically resends the resource/content acquisition request, and acquires the resource/content files to be referenced, such as the picture file, the CSS file, or the JS file, from the server. In this implementation scenario, the above-mentioned operation S203 is triggered in response to the resource/content reference/call request of the terminal device in the process of the server responding to the access request.

Fig. 3 schematically illustrates a detailed implementation flowchart of operation S202 according to an embodiment of the present disclosure.

According to an embodiment of the present disclosure, the target display size is a browser size of the terminal device or a display size customized for a user.

Referring to fig. 3, in the operation S202, information of the target display size of the terminal device is acquired, including the following operations: s301, S302 and S303.

In operation S301, the access request of the target web page is parsed, and it is determined whether the access parameter of the access request includes a user-defined display size.

In operation S302, in a case where the access parameter includes a user-defined display size, the user-defined display size is taken as the target display size.

In operation S303, when the access parameter does not include the user-defined display size, information of the browser size of the terminal device is acquired, and the acquired information of the browser size is used as the information of the target display size.

The operations S301 to S303 may be implemented by a filter provided at the server side, or by a functional plug-in/component/module in the server.

For example, in one embodiment, the website links of the target web page are:

https://xxx.xx.com/sdk.jswidth＝750。

in operation S201, the server receives an access request from a user to a target web page on the terminal device, where the access request carries information of a display size customized by the user.

In the implementation process of operation S202, operation S301 is executed to parse the access request, so as to obtain an access parameter "width=750" (a part of content in the parsing result) in the access request, so that it may be determined that the access parameter includes a user-defined display size, and the user-defined display size is 750px. In this embodiment, corresponding to the case where the result in operation S301 is yes, operation S302 is performed, and 750px is used as the target display size of the terminal device.

In another embodiment, the website links of the target web page are:

https:// xxx. Xx. Com/siehdq=aqxrg-4493 & query=filter of server & ie=utf8.

In operation S201, the server receives an access request from a user to a target web page on the terminal device, where the access request does not include information of a display size customized by the user.

In the implementation process of operation S202, operation S301 is executed to parse the access request, so that an access parameter "hdq =aqxrg-4493 & query=filter of server & ie=utf8" (part of the content in the parsing result) in the access request can be obtained, and thus, the access parameter may be determined to not include the user-defined display size. In this embodiment, in response to the result of "no" in operation S301, operation S303 is performed to acquire information of the browser size of the terminal device, and the acquired information of the browser size is used as the information of the target display size.

Fig. 4A schematically illustrates an implementation scenario diagram of operation S303 according to an embodiment of the present disclosure.

According to an embodiment of the present disclosure, referring to fig. 4A, the html file corresponding to the website link includes: and the function code is used for acquiring the browser size information of the terminal equipment. In the above operation S303, obtaining information of the browser size of the above terminal device includes the following operations: s401a and S402a.

In operation S401a, an html file including the function code is transmitted to the terminal device.

In operation S402a, in a process that a user accesses an html file corresponding to the web site link through the terminal device, information of a browser size of the terminal device is acquired based on the function code.

In a specific implementation scenario of the above embodiment, when a user initiates an access request, an openness server (a high-performance Web platform based on nglnx (high-performance HTTP and reverse proxy server) and Lua (a compact, lightweight and extensible programming language), in which a large number of sophisticated Lua libraries, third party modules and most of dependent items are integrated, is used to conveniently build a dynamic Web application, web service and dynamic gateway capable of handling ultra-high concurrency and extremely high expansibility), and when the filter performs information filtering on access information in response to the access request, a js (JavaScript) function code is added to a header (head) of an html string of an html file corresponding to a Web site link, where the js function code has the main functions of: and acquiring the information of the browser size of the terminal equipment of the current user. According to an embodiment of the present disclosure, after the information of the browser size is obtained, the information of the browser size may also be written into a cookie (a data set related to the identity of the user that is tracked and stored on the browser). Due to the homologous policy of the browser, the server can acquire the size of the current browser through the cookie by subsequently accessing all links under the domain. In this case, the subsequent access request may correspond to a scene of another embodiment described later.

Illustratively, js function code is in the form of:

var w＝window.innerWidth

||document.documentElement.clientWidth

||document.body.clientWidth；

var h＝window.innerHeight

||document.documentElement.clientHeight

||document.body.clientHeight。

fig. 4B schematically illustrates an implementation scenario diagram of operation S303 according to another embodiment of the present disclosure.

According to another embodiment of the present disclosure, referring to fig. 4B, information of a browser size of the terminal device is stored in a cookie of the terminal device in advance; in the above operation S303, the information of the browser size of the above terminal device is acquired, including the following operation S401b: and acquiring the browser size information from the cookie of the terminal equipment.

According to an embodiment of the present disclosure, the front-end page file in operation S203 is a pre-written file. For example, a user (web page/website developer) performs development and writing of a front-end page file in advance on a terminal device, and then uploads the front-end page file after writing to a server for publishing, and a website link of a target web page after publishing is opened to the user. So that on the terminal device, the user (website access/user) can access the target web page based on the issued web site links.

The front-end page file herein may encompass configuration information for one or more web pages, including a target web page to be accessed by a user.

According to an embodiment of the present disclosure, the foregoing front-end page file corresponds to a preset size, that is, when the front-end page file is written on the terminal device, the front-end page file is written based on the preset size. The predetermined size may be an initial size of the front-end web page design drawing, or a user (e.g., web page/web site developer) customized size.

The code or file corresponding to the page content of the target webpage refers to a file of resources/contents that need to be referenced/called for forming the target webpage, and includes: pictures (Images) files, CSS (a programming language) files, JS (a programming language) files, etc.

In an embodiment, the size unit of the front-end webpage design drawing is px, and in the process of developing the front-end webpage, the design size can be directly used to write the code of the front-end webpage, so that a User (webpage/website developer) is not required to manually convert the code into rem or vw size, based on the operations S201-S204, the dynamic adaptation of the webpage and the terminal device can be realized, the workload of front-end development is reduced, and meanwhile, the developed front-end webpage file can keep consistent with the front-end webpage design drawing, and is convenient for User Interface (UI) inspection.

Fig. 5 schematically shows a detailed implementation flowchart of operation S204 according to an embodiment of the present disclosure.

Referring to fig. 5, in operation S204, performing size conversion on a code or file corresponding to the page content according to the information of the target display size to obtain a web page file adapted to the target display size of the terminal device, including the following operations: s501, S502, and S503.

In operation S501, it is determined whether the preset size is consistent with the target display size.

In operation S501, when determining whether the preset size is consistent with the target display size, it is necessary to determine whether the unit and the numerical value of the preset size are consistent with both the unit and the numerical value of the target display size.

In operation S502, if the preset size is not consistent with the target display size, the display size of the code or file corresponding to the page content is converted from the preset size to the target display size, so as to obtain a web page file adapted to the target display size of the terminal device.

For example, the file corresponding to the page content is 1.Css, the preset size corresponding to the 1.Css file is 1000px when the file is written, the target display size of the terminal device (for example, the mobile terminal or the PC terminal) is 300vw, the result determined in operation S501 is no, and correspondingly implementing operation S502, the display sizes of all the objects in the 1.Css file are converted into 300vw, so as to obtain a 2.Css file, and the display size of the 2.Css file is 300vw.

In operation S503, generating a web page file adapted to the target display size of the terminal device based on the code corresponding to the page content, in the case where the preset size is consistent with the target display size; or the file corresponding to the page content is taken as the webpage file.

For example, the file corresponding to the page content is 1.Css, the preset size corresponding to the 1.Css file when written is 1000px, and the target display size of the terminal device is 1000px, and the result determined in operation S501 is yes, and operation S503 is correspondingly implemented, where the 1.Css file is used as the web page file.

It should be appreciated that scaling between different display sizes may be achieved by a function; in operation S502, the conversion relation between the display sizes may be written in advance as a conversion function on the server side, and the conversion may be performed based on the conversion function and specific numerical values by selecting a corresponding conversion function from the conversion functions written in advance based on the converted object and the replaced object whose size is converted.

Fig. 6 schematically illustrates a flow chart of a method of web page adaptation according to another embodiment of the present disclosure.

Referring to fig. 6, the method for adapting a web page according to the embodiment of the present disclosure includes operations S601 in addition to operations S201 to S204. Operation S601 is performed after operation S204 described above.

In operation S601, the web page file is fed back to the terminal device, so that the terminal device displays the content of the target web page according to the web page file.

A second exemplary embodiment of the present disclosure provides a method of web page adaptation. The method for web page adaptation described in this embodiment may be performed by a terminal device.

Fig. 7 schematically illustrates a flow chart of a method of web page adaptation according to a further embodiment of the present disclosure.

Referring to fig. 7, a method for adapting a web page provided by an embodiment of the present disclosure includes the following operations: s701, S702, S703 and S704.

In operation S701, a request for a first user to access a target web page based on an access link on a terminal device is received.

In operation S702, the request is sent to a first server, where the first server is configured to provide a network service for the terminal device.

In operation S703, a web page file fed back by the first server is received, where the web page file is obtained by the first server by performing size conversion on a code or a file corresponding to the page content of the target web page according to the information of the target display size of the terminal device.

In operation S704, contents of the target web page are displayed according to the web page file.

In this embodiment, the method for introducing the web page adaptation from the terminal device side is based on the operations S701 to S704, because the server performs size conversion on the code or the file corresponding to the page content of the target web page according to the information of the target display size of the terminal device, to obtain the web page file, after the terminal device sends the request to the server, the web page file capable of adapting to the target display size of the current terminal device fed back by the server is waited to be received, thereby realizing the web page dynamic adaptation for different terminal devices.

The first embodiment and the second embodiment can be combined to understand the scenario in which the browser side and the server side interact when accessing a web page. The terminal device receives a request from a first user to access a target web page based on an access link (corresponding to operation S701), and transmits the received request to a first server (corresponding to operation S702). On the server side, a user' S access request to a target web page on a terminal device is received (corresponding to operation S201). When the server receives the access request, the server performs operations S202 to S204 in response to the access request: acquiring information of a target display size of the terminal device (corresponding to operation S202); loading a code or file corresponding to the page content of the target web page from a pre-written front-end page file (corresponding to operation S203); and performing size conversion on the code or file corresponding to the page content according to the information of the target display size to obtain a web page file adapted to the target display size of the terminal device (corresponding to operation S204). Then, the server feeds back the above-mentioned web page file to the terminal device (corresponding to operation S601); accordingly, the web page file fed back by the first server is received at the terminal device (corresponding to operation S703). In the case where the terminal device receives the above-mentioned web page file, the content of the above-mentioned target web page is displayed according to the above-mentioned web page file (corresponding to operation S704).

Fig. 8 schematically illustrates a flow chart of a method of web page adaptation according to a further embodiment of the present disclosure.

Referring to fig. 8, the method for adapting a web page provided in this embodiment includes the following operations in addition to operations S701 to S704 described above: s801, S802, and S803. Operations S801 to S803 are performed before operation S701 to ensure that the target web page is in a pre-written state.

In operation S801, configuration information for developing one or more web pages by the second user is received, where the configuration information is written based on an initial size of a front-end web page design drawing or a preset size defined by the user, and the one or more web pages include a target web page.

In operation S802, a front-end page file is generated based on the above configuration information.

In operation S803, the front-end page file is uploaded to a second server, so that the second server publishes a link library of web pages, where the link library includes: access links to one or more web pages.

Based on the operations S201 to S204, or the method for adapting a web page corresponding to the operations S701 to S704, in the process of developing a web page, a web page developer does not need to perform conversion work of different sizes, and can write according to an initial size or a custom preset size of a front-end web page design drawing (corresponding to the operation S801), and the written web page file can be dynamically adapted to terminal devices of various types, display sizes and display resolutions, without separately developing corresponding adapting codes for the terminal devices of different types.

It should be understood that, for convenience of description, a server for providing a network service for the above-described terminal device is described as a first server, and a server for receiving a front-end page file written by the terminal device and for publishing a web page link library is described as a second server. In an embodiment, the first server and the second server are the same server; in another embodiment, the first server and the second server are different servers, and the first server is capable of retrieving/loading the front end page file from the second server.

A third exemplary embodiment of the present disclosure provides an apparatus for web page adaptation.

Fig. 9 schematically shows a block diagram of an apparatus for web page adaptation according to an embodiment of the disclosure.

Referring to fig. 9, an apparatus 900 for web page adaptation provided by an embodiment of the present disclosure may be a server. The apparatus 900 includes: a request receiving module 901, a size information acquiring module 902, a page information loading module 903, and a size scaling module 904.

The request receiving module 901 is configured to receive a request for a user to access a target web page on a terminal device. The request receiving module 901 may be a communication module on a server.

The size information obtaining module 902 is configured to obtain information of a target display size of the terminal device when the access request is received. The size information acquisition module 902 may include functional modules or sub-modules for implementing operations S301 to S304.

The page information loading module 903 is configured to load a code or a file corresponding to the page content of the target web page from a pre-written front-end page file.

The size conversion module 904 is configured to perform size conversion on a code or a file corresponding to the page content according to the information of the target display size, so as to obtain a web page file adapted to the target display size of the terminal device.

According to an embodiment of the present disclosure, the apparatus 900 further includes: and the response module is used for feeding back the webpage file to the terminal equipment so that the terminal equipment displays the content of the target webpage according to the webpage file.

A fourth exemplary embodiment of the present disclosure provides an apparatus for web page adaptation.

Fig. 10 schematically illustrates a block diagram of an apparatus for web page adaptation according to another embodiment of the present disclosure.

Referring to fig. 10, an apparatus 1000 for web page adaptation provided by an embodiment of the present disclosure may be a terminal device. The apparatus 1000 includes: a request receiving module 1001, a request transmitting module 1002, a file receiving module 1003, and a web page display module 1004.

The request receiving module 1001 is configured to receive a request from a first user to access a target web page based on an access link on a terminal device.

The request sending module 1002 is configured to send the request to a first server, where the first server is configured to provide a network service for the terminal device.

The file receiving module 1003 is configured to receive a web page file fed back by the first server, where the web page file is obtained by performing size conversion on a code or a file corresponding to a page content of the target web page by the first server according to information about a target display size of the terminal device.

The web page display module 1004 is configured to display the content of the target web page according to the web page file.

According to an embodiment of the present disclosure, the apparatus 1000 further includes: the system comprises a development configuration information receiving module, a file generating module and a communication module.

The development configuration information receiving module is configured to receive configuration information of a second user for developing one or more web pages, where the configuration information is written based on an initial size of a front-end web page design drawing or a preset size defined by the user, and the one or more web pages include a target web page.

The file generation module is used for generating a front-end page file based on the configuration information.

The communication module is configured to upload the front-end page file to a second server, so that the second server issues a link library of a web page, where the link library includes: access links to one or more web pages.

In the above-described third embodiment, any of the request receiving module 901, the size information acquiring module 902, the page information loading module 903, the size converting module 904, and the responding module may be incorporated in one module, or any of the modules may be split into a plurality of modules. Alternatively, at least some of the functionality of one or more of the modules may be combined with at least some of the functionality of other modules and implemented in one module. At least one of the request receiving module 901, the size information obtaining module 902, the page information loading module 903, the size scaling module 904, and the response module may be implemented at least in part as hardware circuitry, such as a Field Programmable Gate Array (FPGA), a Programmable Logic Array (PLA), a system on a chip, a system on a substrate, a system on a package, an Application Specific Integrated Circuit (ASIC), or may be implemented in hardware or firmware in any other reasonable way of integrating or packaging the circuitry, or in any one of or a suitable combination of three of software, hardware, and firmware. Alternatively, at least one of the request receiving module 901, the size information acquiring module 902, the page information loading module 903, the size scaling module 904, and the response module may be at least partially implemented as a computer program module, which when executed, may perform the corresponding functions.

In the fourth embodiment described above, any of the request receiving module 1001, the request transmitting module 1002, the file receiving module 1003, the web page display module 1004, the development configuration information receiving module, the file generating module, and the communication module may be incorporated in one module to be implemented, or any of the modules may be split into a plurality of modules. Alternatively, at least some of the functionality of one or more of the modules may be combined with at least some of the functionality of other modules and implemented in one module. At least one of the request receiving module 1001, the request transmitting module 1002, the file receiving module 1003, the web page display module 1004, the development configuration information receiving module, the file generating module, and the communication module may be implemented at least in part as hardware circuitry, such as a Field Programmable Gate Array (FPGA), a Programmable Logic Array (PLA), a system on a chip, a system on a substrate, a system on a package, an Application Specific Integrated Circuit (ASIC), or may be implemented by hardware or firmware in any other reasonable way of integrating or packaging the circuitry, or in any one of or a suitable combination of three of software, hardware, and firmware. Alternatively, at least one of the request receiving module 1001, the request transmitting module 1002, the file receiving module 1003, the web page display module 1004, the development configuration information receiving module, the file generating module, and the communication module may be at least partially implemented as a computer program module, which when executed, may perform the corresponding functions.

A fifth exemplary embodiment of the present disclosure provides an electronic device.

Referring to fig. 11, an electronic device 1100 provided by an embodiment of the present disclosure includes a processor 1101, a communication interface 1102, a memory 1103, and a communication bus 1104, where the processor 1101, the communication interface 1102, and the memory 1103 complete communication with each other through the communication bus 1104; a memory 1103 for storing a computer program; the processor 1101 is configured to implement the method for adapting a web page as described above when executing a program stored on the memory.

The sixth exemplary embodiment of the present disclosure also provides a computer-readable storage medium. The computer readable storage medium stores a computer program which, when executed by a processor, implements a method of web page adaptation as described above.

The computer-readable storage medium may be embodied in the apparatus/means described in the above embodiments; or may exist alone without being assembled into the apparatus/device. The computer-readable storage medium carries one or more programs which, when executed, implement methods in accordance with embodiments of the present disclosure.

According to embodiments of the present disclosure, the computer-readable storage medium may be a non-volatile computer-readable storage medium, which may include, for example, but is not limited to: a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this disclosure, a computer-readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

It should be noted that in this document, relational terms such as "first" and "second" and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

The foregoing is merely a specific embodiment of the disclosure to enable one skilled in the art to understand or practice the disclosure. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the disclosure. Thus, the present disclosure is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method of web page adaptation, comprising:

receiving an access request of a user to a target webpage on terminal equipment;

acquiring information of a target display size of the terminal equipment;

loading codes or files corresponding to the page content of the target webpage from a pre-written front-end page file; and

and according to the information of the target display size, performing size conversion on the code or file corresponding to the page content to obtain a webpage file which is adapted to the target display size of the terminal equipment.

2. The method of claim 1, wherein the target display size is a browser size of the terminal device or a display size customized for a user;

The obtaining the information of the target display size of the terminal equipment comprises the following steps:

analyzing the access request of the target webpage, and determining whether the access parameters of the access request comprise user-defined display size or not;

taking the user-defined display size as the target display size under the condition that the access parameter comprises the user-defined display size;

and under the condition that the access parameters do not comprise the user-defined display size, acquiring the browser size information of the terminal equipment, and taking the acquired browser size information as the target display size information.

3. The method according to claim 2, wherein the target web page is in the form of a web site link on a terminal device, and the user initiates an access request to the target web page through the web site link, and the hypertext markup language html file corresponding to the web site link includes: a function code for acquiring browser size information of the terminal device;

the obtaining the information of the browser size of the terminal equipment comprises the following steps:

transmitting an html file comprising the function code to the terminal equipment; and

And acquiring the browser size information of the terminal equipment based on the function code in the process that the user accesses the html file corresponding to the website link through the terminal equipment.

4. The method according to claim 2, wherein the cookie of the terminal device has information of browser size of the terminal device stored in advance;

and acquiring the information of the browser size from the cookie of the terminal equipment.

5. The method of claim 1, wherein the front end page file corresponds to a preset size;

and performing size conversion on the code or file corresponding to the page content according to the information of the target display size to obtain a web page file adapted to the target display size of the terminal device, where the method includes:

determining whether the preset size is consistent with the target display size;

converting the display size of the code or file corresponding to the page content from the preset size to the target display size under the condition that the preset size is inconsistent with the target display size, so as to obtain a webpage file which is adapted to the target display size of the terminal equipment;

Generating a webpage file adapted to the target display size of the terminal equipment based on the code corresponding to the page content under the condition that the preset size is consistent with the target display size; or taking the file corresponding to the page content as the webpage file.

6. The method of any one of claims 1-5, further comprising:

and feeding back the webpage file to the terminal equipment so that the terminal equipment displays the content of the target webpage according to the webpage file.

7. A method of web page adaptation, comprising:

receiving a request of a first user for accessing a target webpage based on an access link on a terminal device;

the request is sent to a first server, and the first server is used for providing network service for the terminal equipment;

receiving a webpage file fed back by the first server, wherein the webpage file is obtained by the first server through size conversion of codes or files corresponding to the page content of the target webpage according to the information of the target display size of the terminal equipment; and

and displaying the content of the target webpage according to the webpage file.

8. The method of claim 7, further comprising, prior to said receiving a request from the first user to access the target web page based on the access link at a terminal device:

receiving configuration information of developing one or more webpages by a second user, wherein the configuration information is written based on the initial size of a front-end webpage design drawing or a user-defined preset size, and the one or more webpages comprise target webpages;

generating a front-end page file based on the configuration information;

uploading the front-end page file to a second server so that the second server publishes a link library of web pages, wherein the link library comprises: access links to one or more web pages.

9. An apparatus for web page adaptation, comprising:

the request receiving module is used for receiving an access request of a user to a target webpage on the terminal equipment;

a size information obtaining module, configured to obtain information of a target display size of the terminal device when the access request is received;

the page information loading module is used for loading codes or files corresponding to the page content of the target webpage from a pre-written front-end page file; and

And the size conversion module is used for carrying out size conversion on codes or files corresponding to the page content according to the information of the target display size to obtain a webpage file which is adapted to the target display size of the terminal equipment.

10. An apparatus for web page adaptation, comprising:

the request receiving module is used for receiving a request of a first user for accessing a target webpage based on an access link on a terminal device;

the request sending module is used for sending the request to a first server, and the first server is used for providing network service for the terminal equipment;

the file receiving module is used for receiving a webpage file fed back by the first server, wherein the webpage file is obtained by the first server through size conversion of codes or files corresponding to the page content of the target webpage according to the information of the target display size of the terminal equipment; and

and the webpage display module is used for displaying the content of the target webpage according to the webpage file.

11. The electronic equipment is characterized by comprising a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory are communicated with each other through the communication bus;

A memory for storing a computer program;

a processor for implementing the method of any one of claims 1-8 when executing a program stored on a memory.

12. A computer readable storage medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, implements the method of any of claims 1-8.