CN111310082A - 一种页面显示方法和装置 - Google Patents

Abstract

本申请提供了一种页面显示方法和装置，该方法包括：当接收到缩放页面的操作请求时，确定缩放比例K；获取当前显示页面表格table的高度H1，以及table中每页将要显示的行数L；根据K、H1和L确定将要显示页面的table的高度H2，以及每行的行高H3；根据确定的H3，以及配置的行高和字体大小的映射关系，确定将要显示页面的内容的字体大小；在将要显示的页面上，根据H2、L，以及字体大小排版纵向要显示的内容；根据确定的字体大小排版横向要显示的内容，并将排版完成的页面进行显示。该方法能够提到设备处理能力和用户体验。

Description

一种页面显示方法和装置

技术领域

本发明涉及信息处理及显示技术领域，特别涉及一种页面显示方法和装置。

背景技术

页面缩放：一种通过浏览器进行缩放是指用户可通过调整浏览器比例进行样式调整；如100％、125％、等；一种通过调整页面大小来进行缩放，调整页面大小高，宽，如将页面高：900px，宽：1440px，调整为高1080px，宽：1920px，或者将高调整为1336px，宽调整为768px等。

目前修改字体大小方式，只要是通过页面通过浏览器放大、缩小功能进行手动调整；当页面调整到一定的宽度时，例如：浏览器缩小到50％时，页面字体太小导致模糊，用户体验及美观度都不佳。

现有解决方式为：直接修改页面排版进行展示，如一行显示10列内容，当缩小到一定程度后，因为页面字体模糊，则修改为一行显示5列，分2行进行显示；这样则改变了原来的展示效果；用户体验比较差。

发明内容

有鉴于此，本申请提供一种页面显示方法和装置，能够提高了设备处理能力和用户体验。

为解决上述技术问题，本申请的第一方面提供一种页面显示方法，该方法包括：

当接收到缩放页面的操作请求时，确定缩放比例K；

获取当前显示页面表格table的高度H1，以及table中每页将要显示的行数L；

根据K、H1和L确定将要显示页面的table的高度H2，以及每行的行高H3；

根据确定的H3，以及配置的行高和字体大小的映射关系，确定将要显示页面的内容的字体大小；

在将要显示的页面上，根据H2、L，以及字体大小排版纵向要显示的内容；根据确定的字体大小排版横向要显示的内容，并将排版完成的页面进行显示。

本申请的第二方面提供一种页面显示装置，该装置包括：接收单元、第一确定单元、获取单元、第二确定单元、第三确定单元和处理单元；

所述接收单元，用于接收缩放页面的操作请求；

所述第一确定单元，用于当所述接收单元接收到缩放页面的操作请求时，确定缩放比例K；

所述获取单元，用于获取当前显示页面表格table的高度H1，以及table中每页将要显示的行数L；

所述第二确定单元，用于根据所述获取单元获取的K、H1和L确定将要显示页面的table的高度H2，以及每行的行高H3；

所述第三确定单元，用于根据所述第二确定单元确定的H3，以及配置的行高和字体大小的映射关系，确定将要显示页面的内容的字体大小；

所述处理单元，用于在将要显示的页面上，根据所述第二单元确定的H2、L，以及所述第三确定单元确定的字体大小排版纵向要显示的内容；根据确定的字体大小排版横向要显示的内容；

所述显示单元，用于将所述处理单元排版完成的页面进行显示。

本申请的第三方面提供一种非瞬时计算机可读存储介质，所述非瞬时计算机可读存储介质存储指令，所述指令在由处理器执行时使得所述处理器执行如页面显示方法中的步骤。

一种电子设备，包括非瞬时计算机可读存储介质、以及可访问所述非瞬时计算机可读存储介质的所述处理器。

本申请中当接收到缩放页面的操作请求时，根据该操作请求确定缩放比例，并根据缩放比例，以及页面table的高度确定将要显示的页面字体大小、table高度，进行页面内容的横纵向排版，并将排版完成的页面显示。该方案的实现能够在不改变排版的形式，且不出现横纵向滚动条的前提下显示缩放后的页面，从而提高了设备处理能力和用户体验。

附图说明

图1为本申请实施例中页面显示流程示意图；

图2为本申请实施例中当前显示页面的页面示意图；

图3为本申请实施例中放大图2中显示页面的页面示意图；

图4为本申请实施例中应用于上述技术的装置结构示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，下面结合附图并举实施例，对本发明的技术方案进行详细说明。

本申请实施例中提供一种页面显示方法，应用于包括table的页面中，当接收到缩放页面的操作请求时，根据该操作请求确定缩放比例，并根据缩放比例，以及页面table的高度确定将要显示的页面字体大小、table高度，进行页面内容的横纵向排版，并将排版完成的页面显示。该方案的实现能够在不改变排版的形式，且不出现横纵向滚动条的前提下显示缩放后的页面，从而提高了设备处理能力和用户体验。

下面结合附图，详细说明本申请实施例中实现页面显示过程。

参见图1，图1为本申请实施例中页面显示流程示意图。具体步骤为：

步骤101，当接收到缩放页面的操作请求时，处理设备确定缩放比例K。

本步骤中处理设备确定缩放比例K，具体包括：

当接收到的缩放页面的操作请求为通过调整浏览器比例发送的请求时，获取该请求中携带的缩放比例K。

如通过鼠标来调整浏览器比例进行显示调整，也就是通过浏览器设置放大页面的120％，或缩小到页面的60％等，则确定的缩放比例K为120％，或60％。

当接收到的缩放页面的操作请求为调整页面高和宽进行缩放发送的请求时，获取该请求中携带调整后的页面高度，并根据获取的调整后的页面高度与调整前的页面高度的比值确定缩放比例K。

如调整前的页面的高：900px，宽：1440px，调整后页面的高:1080px，宽：1920px，则确定调整比例K为1080/900＝120％。

步骤102，该处理设备获取当前显示页面table的高度H1，以及table中每页将要显示的行数L。

本步骤中获取table中每页将要显示的行数L，可以通过如下两种方式获取：

第一种，处理设备接收到用户当前输入的table中每页将要显示的行数L时，获取table中每页将要显示的行数L。

第二种，该处理设备未接收到用户输入的table中每页将要显示的行数L时，获取当前table中每页显示的行数L作为table中每页将要显示的行数L。这时的情况为用户未输入L，仍然希望和当前页面显示的行数一致。

步骤103，该处理设备根据K、H1和L确定将要显示页面的table的高度H2，以及每行的行高H3。

本步骤中根据K、H1和L确定将要显示页面的table的高度H2，以及每行的行高H3，包括：

根据如下公式计算将要显示的页面的table的高度H2：

H2＝H-(H-H1)×K；其中，H为显示页面高度；

根据如下公式计算每行的行高H3：

H3＝H2/L；其中，当计算出的H3不为整数时，针对计算出的H3进行四舍五入取整。

步骤104，该处理设备根据确定的H3，以及配置的行高和字体大小的映射关系，确定将要显示页面的内容的字体大小。

本申请实施例中需要预先根据具体显示环境以及应用场景，配置行高和字体大小的映射关系。

参见表1，表1为行高和字体大小的映射关系对应的内容示。

行高	字体大小
		25px	16px(最大字体数)
23px	15px
		21px	14px
19px	13px
		17px	12px(最小字体数)

表1

在具体设置时，针对行高有一个最大值和最小值的限制，字体大小有一最大值和最小值的限制，如表1中给出一个具体的行高和字体大小的映射关系，行高的最大值设置为25px，行高的最小值设置为17；字体大小的最大值设置为16px，字体大小的最小值设置为12px。

在配置行高和字体大小的映射关系时，行高与字体大小成正比，也就是说行高越大对应的字体越大。

当确定存储的映射关系中的行高中不存在H3时，确定H3对应的字体大小为：所述映射关系中大于H3且与H3差值最小的行高对应的字体大小。

如确定的H3为15px时，确定在表1中不存在15px，则使用大于15px，且与15px差值最小的17px来匹配对应的字体大小。

如H3为24px时，确定在表1中不存在24px，则使用大于24px，且与24px差值最小的25px来匹配对应的字体大小。

当确定存储的映射关系中的行高均小于H3时，确定H3对应的字体大小为：所述映射关系中最大行高对应的字体大小。

如H3为27px时，在确定在表1中不存在27px，且表1中的所有行高都小于27px，则使用表1中行高最大的25px来匹配对应的字体大小。

步骤105，该处理设备在将要显示的页面上，根据H2、L，以及字体大小排版纵向要显示的内容；根据确定的字体大小排版横向要显示的内容，并将排版完成的页面进行显示。

本步骤中该处理设备根据H2、L，以及字体大小排版纵向要显示的内容，具体为：

排版要显示的页面中的table的高度H2，table中显示L行的内容，每行内容的高度在table中平均显示，即均匀排版即可，且整个页面要显示的内容(文字、数字、字母等)的字体大小均为步骤104中确定的字体大小。

本步骤中根据确定的字体大小排版横向要显示的内容，具体包括：

若确定的字体变大且判断当前显示页面不能完整显示一行的所有内容时，则只排版该行中能够被显示的内容。

针对显示的每行内容，按照步骤104中确定的字体大小显示，由于显示页面的宽度是一定的，因此，在table填充内容的方式确定的情况，如随着字体变大，将当前页面显示的一行内容不能够在将要显示的页面的一行中显示，则只显示能够显示的内容的多少，不能显示的则不显示，这样的实现方式中，在横向不会出现滚动条。

本申请实施例在具体实现时，table中每行显示的内容无论多少不换行，即如果不能完全显示，则使用省略的方式、或者隐藏的方式显示，再去选择对应的内容时，才会显示。

如原页面的某一行显示的内容为：“仰首望上去，湛蓝的天空下，阳光灿烂地做着背景，勾勒出高山那悬崖峭壁奇石怪垒的身架，更是把人们所有的崇敬和赞叹都写在了高处”；由于根据用户新输入的操作请求确定字体变大，则一行内容只够显示对应内容“仰首望上去，湛蓝的天空下，阳光灿烂地做着背景，勾勒出高山那悬崖峭壁奇石怪垒的身架”，则其他内容不显示；或者也可以通过省略号的方式显示：“仰首望上去，湛蓝的天空下，阳光灿烂地做着背景，勾勒出高山那悬崖峭壁奇石怪垒的身……”，具体实现时，还可以对省略号设置链接，打开链接显示隐藏的内容，或者仅仅是一个省略号，用于告知用户由于排版省略了部分内容。

下面结合附图，以具体实例来详细说明本申请实施例实现页面显示过程。

参见图2，图2为本申请实施例中当前显示页面的页面示意图。图2所显示的页面中table的高度H1为框起来的10条记录，即所述10行，以及table头所对应的高度，假设为200px，且发送的请求的缩放比例K为120％，输入的L为8，即修改记录条数为8；则确定显示的文本内容的字体大小，具体如下：

获取整个显示页面的高度H，假设为400，则调整缩放比例K后，要显示的页面中的table的高度H2＝H-(H-H1)×K，其中，H-H1＝400px-200px＝200px为当前页面中除了table之外显示的内容的高度，(H-H1)×K＝200px×120％＝240px为将要显示的页面中除了table之外的内容显示的高度，则将要显示的页面中table的高度H2＝H-(H-H1)×K＝400px-240px＝160px。

每行的行高H3＝H2/L＝160px/8＝20。

使用行高20在表1中匹配，表1中不存在20，则查找到与20差值最小，且大于20的为21，因此，确定行高21对应的字体大小为14px。

则使用确定的相关信息布局将要显示的页面。参见图3，图3为本申请实施例中放大图2中显示页面的页面示意图。

图3中为通过缩放比例K(120％)后显示的页面示意图，在纵向上“下载日志”，以及“共144条记录”对应的行的宽度均为原宽度放大120％备，table的高度为160px，table中显示用户输入的8对应的行数；并将每页显示的条数修改为“8”并根据条数对应修改144条记录对应的页数(18)，且当前显示第1页的8条。

在图3中的页面中字体大小均为确定的14px。

在横向上，针对table中每行显示的内容在使用确定的字体大小14px显示后，若存在不能显示内容的则不显示，不会换行，也不会以滚动条的方式呈现。

通过上述处理，显示的页面如图3中显示的内容，没对页面重新进行排版，在横向和纵向上都未出现滚动条，能够提高用户体验。

图2和图3中显示的字体大小和高度仅仅为一个示意图，不表示实际高度和大小。

基于同样的发明构思，本申请还提出一种页面显示装置。参见图4，图4为本申请实施例中应用于上述技术的装置结构示意图。该装置包括：接收单元401、第一确定单元402、获取单元403、第二确定单元404、第三确定单元405、处理单元406和显示单元407；

接收单元401，用于接收缩放页面的操作请求；

第一确定单元402，用于当接收单元401接收到缩放页面的操作请求时，确定缩放比例K；

获取单元403，用于获取当前显示页面表格table的高度H1，以及table中每页将要显示的行数L；

第二确定单元404，用于根据获取单元403获取的K、H1和L确定将要显示页面的table的高度H2，以及每行的行高H3；

第三确定单元405，用于根据第二确定单元404确定的H3，以及配置的行高和字体大小的映射关系，确定将要显示页面的内容的字体大小；

处理单元406，用于在将要显示的页面上，根据所述第二单元确定的H2、L，以及第三确定单元405确定的字体大小排版纵向要显示的内容；根据确定的字体大小排版横向要显示的内容；

显示单元407，用于将处理单元406排版完成的页面进行显示。

较佳地，

处理单元406，具体用于根据确定的字体大小排版横向要显示的内容时，包括：若确定的字体变大且判断当前显示页面不能完整显示一行的所有内容时，则只排版该行中能够被显示的内容。

较佳地，

获取单元403，具体用于获取table中每页将要显示的行数L时，包括：接收到用户当前输入的table中每页将要显示的行数L时，获取table中每页将要显示的行数L；或，当未接收到用户输入的table中每页将要显示的行数L时，获取当前table中每页显示的行数作为table中每页将要显示的行数L。

较佳地，

第二确定单元404，具体用于根据K、H1和L确定将要显示页面的table的高度H2，以及每行的行高H3时，包括：根据如下公式计算将要显示的页面的table的高度H2：H2＝H-(H-H1)×K；其中，H为显示页面高度；根据如下公式计算每行的行高：H3＝H2/L；其中，当计算出的H3不为整数时，针对计算出的H3进行四舍五入取整。

较佳地，

接收单元401，进一步用于接收用户输入的映射关系；

第二确定单元404，进一步用于当接收单元401接收到用户输入的行高和字体大小的映射关系时，将所述映射关系存储，其中，行高与字体大小成正比；当确定存储的映射关系中的行高中不存在H3时，确定H3对应的字体大小为：所述映射关系中大于H3且与H3差值最小的行高对应的字体大小；当确定存储的映射关系中的行高均小于H3时，确定H3对应的字体大小为：所述映射关系中最大行高对应的字体大小。

较佳地，

第一确定单元402，进一步用于确定缩放比例K时，包括：当接收到的缩放页面的操作请求为通过调整浏览器比例发送的请求时，获取请求中携带的缩放比例K；当接收到的缩放页面的操作请求为调整页面高和宽进行缩放发送的请求时，获取该请求中携带调整后的页面高度，并根据获取的调整后的页面高度与调整前的页面高度的比值确定缩放比例K。

上述实施例的单元可以集成于一体，也可以分离部署；可以合并为一个单元，也可以进一步拆分成多个子单元。

此外，本申请实施例中还提供一种非瞬时计算机可读存储介质，所述非瞬时计算机可读存储介质存储指令，所述指令在由处理器执行时使得所述处理器执行所述页面显示方法的步骤。

另外，还提供一种电子设备，包括如所述非瞬时计算机可读存储介质、以及可访问所述非瞬时计算机可读存储介质的所述处理器。

综上所述，本申请当接收到缩放页面的操作请求时，根据该操作请求确定缩放比例，并根据缩放比例，以及页面table的高度确定将要显示的页面字体大小、table高度，进行页面内容的横纵向排版，并将排版完成的页面显示。该方案的实现能够在不改变排版的形式，且不出现横纵向滚动条的前提下显示缩放后的页面，从而提高了设备处理能力和用户体验。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (14)

1.一种页面显示方法，其特征在于，该方法包括：

当接收到缩放页面的操作请求时，确定缩放比例K；

获取当前显示页面表格table的高度H1，以及table中每页将要显示的行数L；

根据K、H1和L确定将要显示页面的table的高度H2，以及每行的行高H3；

根据确定的H3，以及配置的行高和字体大小的映射关系，确定将要显示页面的内容的字体大小；

在将要显示的页面上，根据H2、L，以及字体大小排版纵向要显示的内容；根据确定的字体大小排版横向要显示的内容，并将排版完成的页面进行显示。

2.根据权利要求1所述的方法，其特征在于，所述根据确定的字体大小排版横向要显示的内容，包括：

若确定的字体变大且判断当前显示页面不能完整显示一行的所有内容时，则只排版该行中能够被显示的内容。

3.根据权利要求1所述的方法，其特征在于，获取table中每页将要显示的行数L，包括：

接收到用户当前输入的table中每页将要显示的行数L时，获取table中每页将要显示的行数L；

或，

当未接收到用户输入的table中每页将要显示的行数L时，获取当前table中每页显示的行数作为table中每页将要显示的行数L。

4.根据权利要求1所述的方法，其特征在于，所述根据K、H1和L确定将要显示页面的table的高度H2，以及每行的行高H3，包括：

根据如下公式计算将要显示的页面的table的高度H2：

H2＝H-(H-H1)×K；其中，H为显示页面高度；

根据如下公式计算每行的行高：

H3＝H2/L；其中，当计算出的H3不为整数时，针对计算出的H3进行四舍五入取整。

5.根据权利要求1所述的方法，其特征在于，所述方法进一步包括：

接收到用户输入的行高和字体大小的映射关系时，将所述映射关系存储，其中，行高与字体大小成正比；

当确定存储的映射关系中的行高中不存在H3时，确定H3对应的字体大小为：所述映射关系中大于H3且与H3差值最小的行高对应的字体大小；

当确定存储的映射关系中的行高均小于H3时，确定H3对应的字体大小为：所述映射关系中最大行高对应的字体大小。

6.根据权利要求1-5任一项所述的方法，其特征在于，所述确定缩放比例K，包括：

当接收到的缩放页面的操作请求为通过调整浏览器比例发送的请求时，获取请求中携带的缩放比例K；

当接收到的缩放页面的操作请求为调整页面高和宽进行缩放发送的请求时，获取该请求中携带调整后的页面高度，并根据获取的调整后的页面高度与调整前的页面高度的比值确定缩放比例K。

7.一种页面显示装置，该装置包括：接收单元、第一确定单元、获取单元、第二确定单元、第三确定单元、处理单元和显示单元；

所述接收单元，用于接收缩放页面的操作请求；

所述第一确定单元，用于当所述接收单元接收到缩放页面的操作请求时，确定缩放比例K；

所述获取单元，用于获取当前显示页面表格table的高度H1，以及table中每页将要显示的行数L；

所述第二确定单元，用于根据所述获取单元获取的K、H1和L确定将要显示页面的table的高度H2，以及每行的行高H3；

所述第三确定单元，用于根据所述第二确定单元确定的H3，以及配置的行高和字体大小的映射关系，确定将要显示页面的内容的字体大小；

所述处理单元，用于在将要显示的页面上，根据所述第二单元确定的H2、L，以及所述第三确定单元确定的字体大小排版纵向要显示的内容；根据确定的字体大小排版横向要显示的内容；

所述显示单元，用于将所述处理单元排版完成的页面进行显示。

8.根据权利要求7所述的装置，其特征在于，

所述处理单元，具体用于根据确定的字体大小排版横向要显示的内容时，包括：若确定的字体变大且判断当前显示页面不能完整显示一行的所有内容时，则只排版该行中能够被显示的内容。

9.根据权利要求7所述的装置，其特征在于，

所述获取单元，具体用于获取table中每页将要显示的行数L时，包括：接收到用户当前输入的table中每页将要显示的行数L时，获取table中每页将要显示的行数L；或，当未接收到用户输入的table中每页将要显示的行数L时，获取当前table中每页显示的行数作为table中每页将要显示的行数L。

10.根据权利要求7所述的装置，其特征在于，

所述第二确定单元，具体用于根据K、H1和L确定将要显示页面的table的高度H2，以及每行的行高H3时，包括：根据如下公式计算将要显示的页面的table的高度H2：H2＝H-(H-H1)×K；其中，H为显示页面高度；根据如下公式计算每行的行高：H3＝H2/L；其中，当计算出的H3不为整数时，针对计算出的H3进行四舍五入取整。

11.根据权利要求7所述的装置，其特征在于，

所述接收单元，进一步用于接收用户输入的映射关系；

所述第二确定单元，进一步用于当所述接收单元接收到用户输入的行高和字体大小的映射关系时，将所述映射关系存储，其中，行高与字体大小成正比；当确定存储的映射关系中的行高中不存在H3时，确定H3对应的字体大小为：所述映射关系中大于H3且与H3差值最小的行高对应的字体大小；当确定存储的映射关系中的行高均小于H3时，确定H3对应的字体大小为：所述映射关系中最大行高对应的字体大小。

12.根据权利要求7-11任一项所述的装置，其特征在于，

所述第一确定单元，进一步用于确定缩放比例K时，包括：当接收到的缩放页面的操作请求为通过调整浏览器比例发送的请求时，获取请求中携带的缩放比例K；当接收到的缩放页面的操作请求为调整页面高和宽进行缩放发送的请求时，获取该请求中携带调整后的页面高度，并根据获取的调整后的页面高度与调整前的页面高度的比值确定缩放比例K。

13.一种非瞬时计算机可读存储介质，所述非瞬时计算机可读存储介质存储指令，其特征在于，所述指令在由处理器执行时使得所述处理器执行如权利要求1至6中任一项所述的页面显示方法的步骤。

14.一种电子设备，其特征在于，包括如权利要求13所述的非瞬时计算机可读存储介质、以及可访问所述非瞬时计算机可读存储介质的所述处理器。

Images