TWI503676B - Methods, devices and systems for presenting web pages - Google Patents

Description

Method, device and system for presenting webpage page

The present application relates to the field of computers, and in particular, to a method, device and system for presenting web pages.

With the development of technology, the resolution of the screen supported by the client is gradually improved, and the value of the font font size of the web page displayed by the browser used by the client has not changed. Currently, the default font of any browser. The size of the type is 16PX (that is, 16 primitives). Obviously, the higher the resolution of the screen, the smaller the font of the web page rendered by the browser through the browser, which brings great browsing to the user. inconvenient. For example, when the font of 12 primitives is displayed at a screen resolution of 1280*1024PX and above, the text content is too small, which may cause difficulty for some viewers to read text. See Figure 1A for details.

In view of the above problems, in the prior art, the font adjustment function embedded in the browser (for example, "font size" in the IE tool) or the font adjustment function preset by the operating system (for example, screen resolution adjustment) is used for browsing. The size of the font rendered by the device is adjusted so that the size of the font contained in the webpage page reaches the user's usage requirement, as shown in FIG. 1B. However, using this method will make the layout of webpage pages confusing, and the page information cannot be completely presented. Since the Chinese characters are dot matrix fonts, the enlarged fonts will become blurred, which still affects the user's use. , thereby reducing the service quality of the website system.

The embodiment of the present invention provides a method, device, and system for presenting a webpage page, which are used to improve the display effect of the webpage.

A method for presenting a webpage page, comprising: after receiving a first request message sent by a client for requesting to browse a webpage, the website server sends a second request message for querying the screen resolution to the client; the website The server selects a font font size corresponding to the screen resolution setting according to a screen resolution returned by the user terminal, and a correspondence between a preset screen resolution and a font font size; the website server according to the The screen resolution and the obtained font font size generate a corresponding proportion of the webpage page, and send the webpage page to the client.

A method for presenting a webpage, comprising: querying, by a client, a screen resolution for requesting browsing of a webpage, querying a screen resolution of the client, and transmitting the screen resolution to a web server; the web server receiving a screen resolution sent by the client, and a correspondence between the preset screen resolution and the font font size, and selecting a font font size corresponding to the screen resolution setting; the website server parses according to the screen The degree and the obtained font font size generate a corresponding proportion of the web page, and send the web page to the client.

A website server, comprising: a communication unit, configured to: after receiving a first request message sent by a user end for requesting to browse a webpage, send a second request message for querying the screen resolution to the user end, and receiving the user The screen resolution returned by the end; the obtaining unit is configured to select, according to the screen resolution returned by the user end, and the correspondence between the preset screen resolution and the font font size, select the screen resolution corresponding to the screen resolution a font size; a generating unit, configured to generate a webpage corresponding to the screen according to the screen resolution and the obtained font font size, and send the webpage to the client by using the communication unit.

A website server, comprising: a communication unit, configured to receive a request message sent by a client for requesting browsing of a webpage, and a screen resolution; an obtaining unit, configured to use the screen resolution sent by the user terminal, and a preset Corresponding relationship between the screen resolution and the font font size, selecting a font font size corresponding to the screen resolution setting; and a generating unit configured to generate a corresponding ratio according to the screen resolution and the obtained font font size a web page, and sending the web page to the client through the communication unit.

a website system, including a website server, after receiving a first request message sent by a client for requesting to browse a webpage, sending a second request message for querying the screen resolution to the client, and According to the resolution of the screen returned by the user terminal, and the correspondence between the preset screen resolution and the font font size, the font font size corresponding to the screen resolution setting is selected, and then obtained according to the screen resolution and obtained. The font font size generates a corresponding proportion of the web page, and sends the web page to the client.

A website system, comprising a website server and a client, comprising: a user end, configured to send a request for browsing a webpage page to the web server, query a screen resolution of the local user end, and send the screen resolution to the website server; The web server receives the screen resolution sent by the client, and the correspondence between the preset screen resolution and the font font size, selects the font font size corresponding to the screen resolution setting, and then according to the screen The resolution and the obtained font font size generate a corresponding proportion of the web page, and send the web page to the user.

By adopting the above technical solution, the website server can generate a webpage page suitable for the user to browse according to the screen resolution currently used by each client, thereby effectively improving the display effect of the webpage page, improving the service quality of the website system, and greatly improving the service quality of the website system. Increased user experience.

In order to improve the service quality of the website system and improve the display effect of the webpage, in the embodiment of the present application, the website server sends the first request message sent by the user end for requesting to browse the webpage, and then sends the query to the client for querying. a second request message of the screen resolution, and selecting a font font size corresponding to the screen resolution setting according to a screen resolution returned by the user terminal and a correspondence between a preset screen resolution and a font font size And generating a corresponding proportion of the webpage page according to the screen resolution and the obtained font font size, and sending the webpage page to the user end. Another embodiment of the present application is: when the user sends a request message for requesting to browse the webpage to the website server, the local screen resolution is actively queried, and the screen resolution is sent to the web server, and the web server is based on Corresponding relationship between the preset screen resolution and the font font size is selected to correspond to the font font size set by the screen resolution, and then generating a corresponding proportion of the webpage according to the screen resolution and the obtained font font size. And send the web page to the client.

The preferred embodiments of the present application are described in detail below with reference to the accompanying drawings.

Referring to FIG. 2, in the first embodiment of the present application, a system for providing a website service includes a plurality of client terminals 10 and a website server 11, wherein the client terminal 10 is configured to request a webpage server 11 to browse a webpage page; The server 11 is configured to receive a second request message sent by the user terminal 10 for requesting to browse the webpage, and send a second request message for querying the screen resolution to the client terminal 10, and according to the screen resolution returned by the client terminal 10. Degree, and the correspondence between the preset screen resolution and the font font size, selecting the font font size corresponding to the screen resolution setting, and generating corresponding according to the screen resolution and the obtained font font size. The proportion of the web page and send the web page to the client 10.

As shown in FIG. 3, in the embodiment of the present application, the website server 11 includes a storage unit 110, a communication unit 111, an obtaining unit 112, and a generating unit 113, wherein the storage unit 110 is configured to save a preset screen resolution and font. Corresponding relationship between font sizes; the communication unit 111 is configured to send a second request message for querying the screen resolution to the user terminal 10 after receiving the first request message sent by the user terminal 10 to request to browse the webpage. And receiving the screen resolution returned by the client 10; the obtaining unit 112 is configured to select, according to the screen resolution returned by the client 10, and the corresponding relationship between the preset screen resolution and the font font size, a font font size set by the screen resolution; a generating unit 113, configured to generate a webpage corresponding to the screen according to the screen resolution and the obtained font font size, and send the webpage page to the user terminal 10 through the communication unit 111. .

In the second embodiment of the present application, the system for providing the website service includes a plurality of client terminals 10 and a website server 11, wherein the client terminal 10 is configured to request the website server 11 to browse the webpage page and actively query the screen of the local client. Resolution, and send the screen resolution to the web server.

The website server 11 selects the font font size corresponding to the screen resolution setting according to the screen resolution sent by the client terminal 10 and the correspondence between the preset screen resolution and the font font size, and then according to the The screen resolution and the obtained font font size generate a corresponding proportion of the webpage page, and the webpage page is sent to the client terminal 10.

Based on the above system architecture, in the embodiment of the present application, the correspondence between the initial screen resolution and the font font size is pre-defined on the website server 11. Can be set up using Cascading Stylesheet (CSS) technology, which is a stylesheet technology that uses CSS technology for web page creation, effectively mapping the page layout, fonts, colors, backgrounds and other effects. Achieve more precise control. In this embodiment, when the initial setting of the screen resolution and the font font size is adopted by the CSS technology, the font height (em) is introduced into the definition of the font size, and em is a relative unit, that is, relative to the text in the current object. The font size, if the font size of the text in the current object is not set manually, it is similar to the default font size of the browser. For example, in the prior art, most browsers adopt font definition standards that are consistent with: 1em=16px, and so on, 14px=0.875em, 12px=0.75em, 10px=0.625em. In order to simplify the conversion, preferably, the body selector is used to set the page element attribute, and the body type selector is used to apply the default rule to all page elements by using the inheritance mechanism, and the effect is to add a font style to the elements in the page. Properties such as color, size, border appearance, padding, and more. In the embodiment of the present application, Font-size=62.5% is preset in the body selector of the CSS, so that the font size of the browser is changed to: 16px*62.5%=10px, and the value of 1em is converted to: 10px. That is to say, it is only necessary to divide the value of the original font font size in px by 10 and convert it to em as a unit. The specific implementation is as follows:

(font-family refers to font, font-size refers to font size specification: TD refers to the text size specification defined in the table, light-height indicates the line spacing)

Font-family: Microsoft Yahei, Lucida Grande, tahoma, Song style;

Font-size: 62.5%

Td: 1.2-1.8em (or 120%-180%)

Light-height: 1.6-2 em (or 160%-200%)

The font size is defined by em as follows: em value is not fixed, em inherits the font size of the parent element, and can be applied to the IE-based browser to scale/extend the font size; Em is a relative size unit, the user can modify the font size based on em according to his own needs (the user can not modify the font size when setting the font size in units of graphics), which is more flexible. A variety of user needs have improved the service quality of the website system.

After the initial definition is performed, the website server 11 first determines the screen resolution used by the client 10 when receiving the request for browsing the webpage sent by the client terminal 10, and then according to the preset screen resolution and the font font size. The mapping relationship is generated, and a web page of a corresponding proportion is generated and sent to the user terminal 10; as shown in FIG. 4, the detailed process of the website server 11 presenting the corresponding website page according to the screen resolution of the client 10 according to the first embodiment of the present application is shown. as follows:

Step 400: The client 10 logs in to the website server 11 and passes the authentication.

In the actual application, after the client 10 passes the authentication of the website server 11, the website services provided by the website server 11 can be used, for example, browsing a webpage, downloading a file, and the like.

Step 410: The user terminal 10 sends a webpage browsing request message to the website server 11 according to the user instruction.

In this embodiment, the webpage browsing request message carries a uniform resource location (URL) address of a webpage that the user instructs to browse.

Step 420: After receiving the webpage browsing request message sent by the client 10, the website server 11 sends a resolution query request message to the client 10, and the message 10 is used to instruct the client 10 to return the currently used screen resolution.

Step 430: After receiving the resolution query request message, the client 10 obtains the screen resolution currently used locally, which is referred to as resolution 1 below.

Step 440: The client 10 carries the acquired resolution 1 in the resolution query response message and sends it to the website server 11.

Step 450: The website server 11 obtains the font font size 1 set corresponding to the resolution 1 according to the received resolution 1 and the correspondence between the preset screen resolution and the font font size, and according to the resolution 1 A webpage page corresponding to the font font size 1 is generated, which is hereinafter referred to as webpage 1.

In step 450, the website server 11 needs to obtain corresponding webpage elements (such as text, links, pictures, etc.) according to the received URL address in the process of generating the webpage page, and add it to the determined proportion. In the webpage page, for example, according to the font font size 1, the size of the primitive used when the obtained text is displayed is determined, and the obtained text is typeset in the webpage page according to the size of the primitive. For another example, the acquired image is resized or tailored according to the font font size 1 to suit the typesetting of the text, and the like.

In practical applications, since Chinese characters are dot matrix fonts, when rendered in the browser, less than 12 primitives begin to appear missing strokes, and when displayed between 12 to 18 graphics, the reading effect is relatively Preferably, if the font used is a non-integer multiple, it is not possible to achieve an optimal browsing effect. Therefore, in the embodiment of the present application, the correspondence between the screen resolution and the font size is preset in the following manner. : Under 800*600 or 1024*768 screen resolution, the default font font size is defined as “1.2em”, which is equal to 12 graphics; the default font font size is defined at 1280*1024 resolution. "1.4em", that is, 14 primitives are equal in size; and the default font font size is defined as "1.6em" at 1920*1600 or above, that is, 16 primitives are equal in size. This type of setting is only an example.

Step 460: The website server 11 sends the generated web page 1 to the client terminal 10.

Step 470: The client 10 presents the obtained webpage 1 to the user.

Based on the foregoing embodiment, during the process of browsing the webpage by the user terminal 10, the font size of the font may be set according to actual needs.

For example, the client 10 currently uses 1280*1024 screen resolution for web browsing, and the user requests the website server 11 to set the font font size to 2em through the client 10, assuming that the network side presets corresponding to the 1280*1024 screen. The resolution font font size is 1.4em, less than 2em, the website server 11 discards the font font size preset on the network side, and generates a corresponding proportion of webpage pages according to the 2em and 1280*1024 graphics resolutions indicated by the user. .

For another example, the client 10 currently uses 1280*1024 screen resolution for web browsing, and the user requests the website server 11 to set the font font size to 1em through the client 10, and also assumes that the network side is preset to correspond to 1280*. The font font size of 1024 screen resolution is 1.4em, which is greater than 1em, the website server 11 can directly generate the corresponding proportion of webpage pages according to the resolution of 1em and 1280*1024 screens; or can prompt the user for the font font currently selected by the user. The size of the type is not a better parameter setting corresponding to the resolution of the screen. If the user still chooses to use the font font size 1em, then according to 1em and generate a corresponding proportion of the web page; if the user resets the font font size to 1.5em, then The web server 11 generates a web page of a corresponding ratio based on the 1.5 em and 1280*1024 screen resolutions.

On the other hand, in the above embodiment, after the website server 11 provides the web page 1 that meets the user's usage requirements to the client terminal 10, the resolution query request message may be periodically sent to the client terminal 10 to determine the screen resolution used by the client terminal 10. Whether the degree has changed, and when the change is determined, the page page currently browsed by the user is adjusted accordingly; or, after the user adjusts the screen resolution of the user terminal 10, the user terminal 10 actively sends the website server 11 After the changed screen resolution is reported, the website server 11 is requested to adjust the web page currently browsed by the user according to the newly set screen resolution.

In the embodiment of the present application, after determining that the user resets the screen resolution of the user terminal 10, the website server 11 adjusts the web page currently viewed by the user, including but not limited to the following two types:

1. According to the resolution of the screen reset by the user, and the correspondence between the preset screen resolution and the font font size, the font font size corresponding to the reset screen resolution is obtained, and according to the font font type. The size and related webpage elements regenerate the corresponding proportion of the webpage page, and then send the webpage page to the client terminal 10.

2. According to the ratio of the screen resolution set by the user and the screen resolution used last time, the user terminal 10 is instructed to scale/extend the webpage page currently browsed by the user.

In the second embodiment of the present application, the user terminal 10 actively queries the screen resolution of the local client, and sends it to the website server 11, and the process by which the website server 11 presents the corresponding website page is as follows:

Step 510: When the user terminal 10 sends a webpage browsing request message to the website server 11, the user terminal actively queries the local screen resolution and sends the screen resolution to the website server 11.

The user terminal 10 may send the screen resolution to the website server 11 together with the request message for requesting to browse the webpage, or send the screen resolution to the website server 11 by sending an independent request message.

Step 520: The website server 11 obtains the font font size corresponding to the resolution setting according to the received resolution and the correspondence between the preset screen resolution and the font font size, and according to the resolution and the font font. The size generates a page of the corresponding proportion of the page.

Step 530: The website server 11 sends the generated web page to the client 10.

Step 540: The client 10 presents the obtained webpage to the user.

In summary, according to the technical solution described in the embodiment of the present application, the website server 11 can generate a webpage page suitable for the user to browse according to the screen resolution currently used by each client terminal 10, thereby effectively improving the webpage page. The display effect improves the service quality of the website system and greatly enhances the user experience. On the other hand, the website server 11 can also adaptively adjust the proportion of the generated webpage page according to the change of the resolution of the user terminal 10, and according to the font font size customized by the user and the screen resolution currently used by the client terminal 10. Degrees, generate web pages based on user-defined proportions, which improves the flexibility of the website service, can better adapt to the various needs of users, thereby further improving the service quality of the website system and enhancing the user experience.

The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (system), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flowchart illustrations and/or FIG. These computer program instructions can be provided to a processor of a general purpose computer, a special purpose computer, an embedded processor or other programmable data processing device to produce a machine for generating instructions for execution by a processor of a computer or other programmable data processing device. Means for implementing the functions specified in one or more of the flow or in a block or blocks of the flow chart.

The computer program instructions can also be stored in a computer readable memory that can boot a computer or other programmable data processing device to operate in a particular manner, such that instructions stored in the computer readable memory produce an article of manufacture including the instruction device. The instruction means implements the functions specified in one or more blocks of the flow or in a flow or block diagram of the flowchart.

These computer program instructions can also be loaded onto a computer or other programmable data processing device to perform a series of operational steps on a computer or other programmable device to produce computer-implemented processing for execution on a computer or other programmable device. The instructions provide steps for implementing the functions specified in one or more of the flow or in a block or blocks of a flow diagram.

It is apparent that those skilled in the art can make various modifications and variations to the embodiments of the present application without departing from the spirit and scope of the application. Thus, the present embodiments of the present application are intended to cover such modifications and variations as the scope of the application and the scope of the invention.

10. . . user terminal

11. . . Website server

110. . . Storage unit

111. . . Communication unit

112. . . Acquisition unit

113. . . Generating unit

1A and FIG. 1B are schematic diagrams showing the presentation of a web page in the prior art of the present application;

2 is a structural diagram of a website service system in a first embodiment of the present application;

3 is a functional structural diagram of a website server in the first embodiment of the present application;

FIG. 4 is a flowchart of a webpage provided by a website server to a client in the first embodiment of the present application.

10. . . user terminal

11. . . Website server

Claims (15)

A method for presenting a web page, comprising: receiving, by a website server, a second request message for requesting browsing of a webpage, and sending a second request message for querying screen resolution to the client; The website server selects a font font size corresponding to the screen resolution setting according to the resolution of the screen returned by the user terminal and the correspondence between the preset screen resolution and the font font size; and the website server according to the server The screen resolution and the obtained font font size generate a corresponding proportion of the webpage page, and send the webpage page to the user terminal, wherein the web server is sent to the client after the web server sends the webpage page to the client The resolution query request message may be sent to the client periodically to determine whether the screen resolution adopted by the user is changed, and when the change is determined, the page page currently browsed by the user is adjusted accordingly. The method of claim 1, wherein after the web server sends the web page to the user end, if the third request message sent by the user end for instructing to reset the font font size is received, Then, according to the screen resolution currently used by the client and the font font size re-set by the user, a corresponding proportion of the webpage page is generated. The method of claim 2, wherein the website server generates a corresponding proportion of webpage pages according to the screen resolution currently used by the user end and the font font size re-set by the user, including: The website server directly generates a corresponding proportion of the webpage page according to the screen resolution currently used by the user end and the font font size re-set by the user; or the website server determines the resizing font font size and the corresponding user end The currently used mask resolution preset font font size is compared, and when it is determined that the reset font font size is larger than the preset font font size, according to the screen resolution currently used by the user terminal and the re The set font font size generates a corresponding proportion of web pages. The method of claim 1, wherein the website server sends the web page to the user end, and if it is determined that the user end resets the screen resolution, the user terminal resets according to the user end. The resolution of the screen, and the correspondence between the preset screen resolution and the font font size, obtain the font font size corresponding to the reset screen resolution, and according to the reset screen resolution and the corresponding font The font size generates a corresponding proportion of web pages. The method of claim 1, wherein the web server sends the webpage face to the user end, and if it is determined that the user terminal resets the screen resolution, the reset is performed according to the method. The ratio of the screen resolution to the screen resolution used by the client last time, indicating that the user side scales/expands the web page currently viewed by the user. The method of claim 1, wherein before the website server receives the first request message sent by the client for requesting to browse the webpage, the method further includes: preset screen resolution and font font size. between Correspondence, where the font size is in em. A method for presenting a webpage, the method comprising: when the user sends a request message for requesting browsing of a webpage, querying a screen resolution of the client, and sending the screen resolution to the web server; the web server Receiving the resolution of the screen sent by the client, and the correspondence between the preset screen resolution and the font font size, selecting the font font size corresponding to the screen resolution setting; and the website server according to the screen resolution And generating a corresponding proportion of the webpage page with the obtained font font size, and sending the webpage page to the user end, wherein after the webpage server sends the webpage page to the user end, the web server can periodically send the user to the webpage The terminal sends a resolution query request message to determine whether the screen resolution adopted by the user is changed, and when the change is determined, the page page currently browsed by the user is adjusted accordingly. The method of claim 7, wherein the user sends the screen resolution to the website server, specifically: the user end carries the screen resolution in the request message for requesting to browse the webpage. Sent to the web server, or the client sends the screen resolution to the web server by sending a separate request message. A website server, comprising: a communication unit, configured to: after receiving a first request message sent by a user end for requesting to browse a webpage, send the query resolution to the client end The second request message, and the screen resolution returned by the receiving client; the obtaining unit is configured to select according to the resolution of the screen returned by the client, and the correspondence between the preset screen resolution and the font font size. a font font size corresponding to the screen resolution setting; and a generating unit, configured to generate a webpage corresponding to the screen according to the screen resolution and the obtained font font size, and send the webpage page to the user through the communication unit End, wherein, after the webpage is sent to the user end by the communication unit, the communication unit may periodically send a resolution query request message to the user end to determine whether the screen resolution adopted by the user end changes, and is determined When a change occurs, the page page currently viewed by the user is adjusted accordingly. The website server according to claim 9, wherein after the generating unit sends the webpage page to the user terminal through the communication unit, if the communication unit receives the font sent by the user terminal for instructing to reset the font The third request message of the font size generates a corresponding proportion of webpage pages according to the screen resolution currently used by the user terminal and the font font size re-set by the user. The website server according to claim 9 or 10, wherein after the generating unit sends the webpage page to the user terminal through the communication unit, if it is determined that the user terminal resets the screen resolution, the user is The screen resolution of the reset screen, and the correspondence between the preset screen resolution and the font font size, and the font font size corresponding to the reset screen resolution is obtained, and the screen resolution is performed according to the reset screen. The degree and the corresponding font font size generate a corresponding proportion of the web page. The website server according to claim 9 or 10, wherein after the generating unit sends the webpage page to the user terminal through the communication unit, if it is determined that the user terminal resets the screen resolution, the The ratio of the reset screen resolution to the screen resolution used by the client last time, instructing the client to scale/extend the web page currently viewed by the user. A website server, comprising: a communication unit, configured to receive a request message sent by a user end for requesting to browse a webpage and a screen resolution; and an obtaining unit, configured to use the screen resolution sent by the user terminal, and Corresponding relationship between the preset screen resolution and the font font size, selecting the font font size corresponding to the screen resolution setting; and generating unit for generating corresponding according to the screen resolution and the obtained font font size And the webpage of the webpage is sent to the client by the communication unit, wherein the communication unit can periodically send the resolution query request to the client after the webpage is sent to the client through the communication unit. The message is used to determine whether the screen resolution adopted by the user has changed, and when the change is determined, the page page currently browsed by the user is adjusted accordingly. A website system, comprising a website server, wherein the website server receives a first request message sent by a user end for requesting to browse a webpage, and sends a second second for querying the screen resolution to the client end. Requesting a message, and according to the resolution of the screen returned by the client, and the correspondence between the preset screen resolution and the font font size, selecting the font font size corresponding to the screen resolution setting, and then according to the screen resolution And generating a corresponding proportion of the webpage page with the obtained font font size, and sending the webpage page to the user end, wherein after the webpage server sends the webpage page to the user end, the web server can periodically send the user to the webpage The terminal sends a resolution query request message to determine whether the screen resolution adopted by the user is changed, and when the change is determined, the page page currently browsed by the user is adjusted accordingly. A website system, comprising a website server and a client, comprising: a user end, configured to send a request for browsing a webpage page to a website server, query a screen resolution of the local user end, and send the screen resolution to the website The web server; and the web server receive the resolution of the screen sent by the client, and the correspondence between the preset screen resolution and the font font size, and select the font font size corresponding to the screen resolution setting, and then Generating a corresponding proportion of the webpage page according to the screen resolution and the obtained font font size, and sending the webpage page to the user terminal, wherein the webpage server is sent to the client after the webpage server sends the webpage page to the client end The device may periodically send a resolution query request message to the client to determine whether the screen resolution adopted by the user is changed, and when the change is determined, the page page currently browsed by the user is adjusted accordingly. whole.