CN109992337A - 网页页面展示方法、装置及存储介质 - Google Patents

Abstract

本发明公开了一种网页页面展示方法、装置及存储介质，属于计算机技术领域。方法包括：获取网页页面的配置数据，配置数据包括样式数据、内容数据和逻辑数据，逻辑数据用于描述计算缩放系数的运行逻辑；按照运行逻辑，获取网页页面的页面宽高比，并获取显示屏幕的屏幕宽高比，根据页面宽高比和屏幕宽高比，计算缩放系数；根据缩放系数，对配置数据中至少一个面板的尺寸以及至少一个面板中展示内容的尺寸进行调整，基于调整后的配置数据展示网页页面。本发明提高了灵活性，保证了网页页面能够适用于多种显示屏幕，避免出现展示效果不佳的问题，而且无需开发人员为网页页面设置尺寸范围对应的缩放系数，降低了对开发人员的要求，节省了人力成本。

Description

网页页面展示方法、装置及存储介质

本申请要求于2017年12月29日提交中国国家知识产权局、申请号为201711468408.1、发明名称为“网页页面展示方法、装置及存储介质”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。

技术领域

本发明涉及计算机技术领域，特别涉及一种网页页面展示方法、装置及存储介质。

背景技术

随着互联网技术的快速发展，网页页面(Web页面)得到了广泛应用，很多种终端上均可以展示网页页面。而由于不同终端的显示屏幕不同，在不同的终端上展示同一网页页面时，会导致网页页面的展示效果不同。

通常在设置网页页面时，会由开发人员为网页页面配置CSS(Cascading StyleSheet，层叠样式表)文件，在CSS文件中设置一个显示屏幕的尺寸范围对应的缩放系数。当某一终端请求展示网页页面时，服务器会向终端发送网页页面和CSS文件，终端对CSS文件进行解析，确定该尺寸范围对应的缩放系数，如果本终端的显示屏幕的尺寸属于该尺寸范围，则将该尺寸范围对应的缩放系数确定为适用于本终端的缩放系数，之后按照该缩放系数对网页页面的尺寸进行调整，并展示调整后的网页页面。

在实现本发明实施例的过程中，发明人发现相关技术至少存在以下缺陷：上述展示方式要求开发人员在CSS文件中设置尺寸范围对应的缩放系数，对开发人员的要求过高，而且设置的缩放系数只能适用于尺寸属于该尺寸范围的显示屏幕，针对尺寸不属于该尺寸范围的显示屏幕易出现展示效果不佳的问题，因此具有局限性。

发明内容

本发明实施例提供了一种网页页面展示方法、装置及存储介质，可以解决展示方式具有局限性，对开发人员的要求过高的问题。所述技术方案如下：

第一方面，提供了一种网页页面展示方法，所述方法包括：

获取网页页面的配置数据，所述配置数据包括样式数据、内容数据和逻辑数据，所述样式数据用于描述所述网页页面中至少一个面板的展示样式，所述内容数据用于描述所述至少一个面板中的展示内容，所述逻辑数据用于描述计算缩放系数的运行逻辑；

按照所述运行逻辑，获取所述网页页面的页面宽高比，并获取显示屏幕的屏幕宽高比，根据所述页面宽高比和所述屏幕宽高比，计算缩放系数；

根据所述缩放系数，对所述配置数据中所述至少一个面板的尺寸以及所述至少一个面板中展示内容的尺寸进行调整，基于调整后的配置数据展示所述网页页面。

在一种可能实现方式中，所述样式数据包括所述至少一个面板的层级关系，用于描述下一层面板在上一层面板之中展示，所述获取所述网页页面的页面宽高比，包括：

获取所述至少一个面板中位于第一层的面板的宽度和高度，分别作为所述网页页面的宽度和高度；

根据所述网页页面的宽度和高度，计算所述页面宽高比。

在一种可能实现方式中，所述根据所述页面宽高比和所述屏幕宽高比，计算缩放系数，包括：

当所述页面宽高比大于所述屏幕宽高比时，计算所述网页页面的宽度与所述显示屏幕的宽度的比值，作为所述缩放系数；

当所述页面宽高比不大于所述屏幕宽高比时，计算所述网页页面的高度与所述显示屏幕的宽度的比值，作为所述缩放系数。

在一种可能实现方式中，所述根据所述缩放系数，对所述配置数据中所述至少一个面板的尺寸以及所述至少一个面板中展示内容的尺寸进行调整，基于调整后的配置数据展示所述网页页面，包括：

根据所述缩放系数，对所述样式数据中所述至少一个面板的尺寸进行调整，得到调整后的样式数据；

根据所述调整后的样式数据，对所述内容数据中所述至少一个面板中展示内容的尺寸进行调整，得到调整后的内容数据；

根据所述调整后的样式数据和所述调整后的内容数据进行渲染，以展示所述网页页面。

在一种可能实现方式中，所述根据所述缩放系数，对所述样式数据中所述至少一个面板的尺寸进行调整，得到调整后的样式数据，包括：

将所述至少一个面板划分为第一类面板和第二类面板，所述第一类面板为所述至少一个面板中位于指定行的面板，所述第二类面板为所述至少一个面板中除所述第一类面板以外的面板；

对每个所述第二类面板的高度与所述缩放系数的乘积进行取整操作，得到每个所述第二类面板调整后的高度；

计算所述网页页面的总高度与所述第二类面板的总高度的差值，作为所述第一类面板的高度。

在一种可能实现方式中，所述根据所述缩放系数，对所述样式数据中所述至少一个面板的尺寸进行调整，得到调整后的样式数据，包括：

将所述至少一个面板划分为第三类面板和第四类面板，所述第三类面板为所述至少一个面板中位于指定列的面板，所述第四类面板为所述至少一个面板中除所述第三类面板以外的面板；

对每个所述第四类面板的宽度与所述缩放系数的乘积进行取整操作，得到每个所述第四类面板调整后的宽度；

计算所述网页页面的总宽度与所述第四类面板的总宽度的差值，作为所述第三类面板的宽度。

第二方面，提供了一种网页页面展示装置，所述装置包括：

数据获取模块，用于获取网页页面的配置数据，所述配置数据包括样式数据、内容数据和逻辑数据，所述样式数据用于描述所述网页页面中至少一个面板的展示样式，所述内容数据用于描述所述至少一个面板中的展示内容，所述逻辑数据用于描述计算缩放系数的运行逻辑；

计算模块，用于按照所述运行逻辑，获取所述网页页面的页面宽高比，并获取显示屏幕的屏幕宽高比，根据所述页面宽高比和所述屏幕宽高比，计算缩放系数；

调整模块，用于根据所述缩放系数，对所述配置数据中所述至少一个面板的尺寸以及所述至少一个面板中展示内容的尺寸进行调整；

展示模块，用于基于调整后的配置数据展示所述网页页面。

在一种可能实现方式中，所述样式数据包括所述至少一个面板的层级关系，用于描述下一层面板在上一层面板之中展示，所述计算模块，包括：

获取子模块，用于获取所述至少一个面板中位于第一层的面板的宽度和高度，分别作为所述网页页面的宽度和高度；

比值计算子模块，用于根据所述网页页面的宽度和高度，计算所述页面宽高比。

在一种可能实现方式中，所述计算模块包括：

第一计算子模块，用于当所述页面宽高比大于所述屏幕宽高比时，计算所述网页页面的宽度与所述显示屏幕的宽度的比值，作为所述缩放系数；

第二计算子模块，用于当所述页面宽高比不大于所述屏幕宽高比时，计算所述网页页面的高度与所述显示屏幕的宽度的比值，作为所述缩放系数。

在一种可能实现方式中，所述调整模块，包括：

样式调整子模块，用于根据所述缩放系数，对所述样式数据中所述至少一个面板的尺寸进行调整，得到调整后的样式数据；

内容调整子模块，用于根据所述调整后的样式数据，对所述内容数据中所述至少一个面板中展示内容的尺寸进行调整，得到调整后的内容数据；

所述展示模块，还用于根据所述调整后的样式数据和所述调整后的内容数据进行渲染，以展示所述网页页面。

在一种可能实现方式中，所述样式调整子模块，用于将所述至少一个面板划分为第一类面板和第二类面板，所述第一类面板为所述至少一个面板中位于指定行的面板，所述第二类面板为所述至少一个面板中除所述第一类面板以外的面板；对每个所述第二类面板的高度与所述缩放系数的乘积进行取整操作，得到每个所述第二类面板调整后的高度；计算所述网页页面的总高度与所述第二类面板的总高度的差值，作为所述第一类面板的高度。

在一种可能实现方式中，所述样式调整子模块，用于将所述至少一个面板划分为第三类面板和第四类面板，所述第三类面板为所述至少一个面板中位于指定列的面板，所述第四类面板为所述至少一个面板中除所述第三类面板以外的面板；对每个所述第四类面板的宽度与所述缩放系数的乘积进行取整操作，得到每个所述第四类面板调整后的宽度；计算所述网页页面的总宽度与所述第四类面板的总宽度的差值，作为所述第三类面板的宽度。

第三方面，提供了一种网页页面展示装置，所述预览数据播放装置包括处理器和存储器，所述存储器中存储有至少一条指令，所述指令由所述处理器加载并执行以实现如第一方面所述的网页页面展示方法中所执行的操作。

第四方面，提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一条指令，所述指令由处理器加载并执行以实现如第一方面所述的网页页面展示方法中所执行的操作。

本发明实施例提供的技术方案带来的有益效果是：

本发明实施例提供的方法、装置及存储介质，通过将网页页面抽象为至少一个面板，通过在网页页面的配置数据中设置用于描述至少一个面板的样式数据和内容数据，以及计算缩放系数的运行逻辑，保证了终端能够按照设置的运行逻辑自动计算适用于该终端的缩放系数，根据缩放系数对至少一个面板的尺寸进行调整，从而能够展示适用于该终端显示屏幕的网页页面，提高了灵活性，保证了网页页面能够适用于多种显示屏幕，避免在某些尺寸的显示屏幕上出现展示效果不佳的问题，而且无需开发人员为网页页面设置尺寸范围对应的缩放系数，降低了对开发人员的要求，节省了人力成本。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的一种实施环境的示意图；

图2是本发明实施例提供的一种网页页面展示方法的流程图；

图3是本发明实施例提供的一种网页页面展示方法流程图；

图4是本发明实施例提供的一种网页页面中的面板示意图；

图5是本发明实施例提供的面板之间的层级关系示意图；

图6是本发明实施例提供的配置数据的示意图；

图7是本发明实施例提供的网页页面展示装置的结构示意图；

图8是本发明实施例提供的一种终端的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

图1是本发明实施例提供的一种实施环境的示意图，该实施环境包括：终端101和服务器102，终端101与服务器102之间通过网络连接。

其中，终端101可以为手机、计算机、电视机等具有展示功能的设备，终端101配置有显示屏幕，通过显示屏幕展示网页页面。该服务器102用于为终端101提供网页页面的配置数据，该终端101根据网页页面的配置数据计算缩放系数，并根据缩放系数对网页页面的尺寸进行调整，从而展示调整后的网页页面。

在一种可能实现方式中，终端101可以安装浏览器客户端，通过浏览器客户端与服务器102进行交互，展示服务器102提供的网页页面。

需要说明的是，上述终端101可以配置任意尺寸、任意样式的显示屏幕，如电视机上配置的大尺寸屏幕、拼接屏等。也即是，本发明实施例可以应用于包含不同终端101的多种实施环境中，适用于多种显示屏幕，能够适应性地在不同的显示屏幕上展示网页页面，并且针对同一网页页面，可以保证在不同显示屏幕上的展示效果统一。

图2是本发明实施例提供的一种网页页面展示方法的流程图。本发明实施例的执行主体为终端，参见图2，该方法包括：

201、获取网页页面的配置数据，配置数据包括网页页面的样式数据、内容数据和逻辑数据。

其中，样式数据用于描述网页页面中至少一个面板的展示样式，内容数据用于描述至少一个面板中的展示内容，逻辑数据用于描述计算缩放系数的运行逻辑。

202、按照运行逻辑，获取网页页面的页面宽高比，并获取显示屏幕的屏幕宽高比，根据页面宽高比和屏幕宽高比，计算缩放系数。

203、根据缩放系数，对配置数据中至少一个面板的尺寸以及至少一个面板中展示内容的尺寸进行调整，基于调整后的配置数据展示网页页面。

本发明实施例提供的方法，通过将网页页面抽象为至少一个面板，在网页页面的配置数据中设置用于描述至少一个面板的样式数据和内容数据，以及计算缩放系数的运行逻辑，保证了终端能够按照设置的运行逻辑自动计算适用于该终端的缩放系数，根据缩放系数对至少一个面板的尺寸进行调整，从而能够展示适用于该终端显示屏幕的网页页面，提高了灵活性，保证了网页页面能够适用于多种显示屏幕，避免在某些尺寸的显示屏幕上出现展示效果不佳的问题，而且无需开发人员为网页页面设置尺寸范围对应的缩放系数，降低了对开发人员的要求，节省了人力成本。

图3是本发明实施例提供的一种网页页面展示方法的流程图。本发明实施例的执行主体为终端，参见图3，该方法包括：

301、终端获取网页页面的配置数据。

本发明实施例中，将网页页面看作是至少一个面板排列形成的页面，该网页页面中的展示内容均是在面板中进行展示的，且每个面板之中还可以嵌套一个或多个面板。

其中，该配置数据用于对网页页面进行描述，终端根据该配置数据能够展示出该网页页面。该配置数据包括样式数据、内容数据和逻辑数据。

样式数据用于描述网页页面中至少一个面板的展示样式，该样式数据中还可以包括该至少一个面板的层级关系，从而能够描述上一层面板中嵌套下一层面板、下一层面板在上一层面板之中展示的效果。因此，每个面板的样式数据可以包括该面板的背景样式、尺寸以及该面板之中包括的下一层面板的分布方式等，如该面板中包括的下一层面板的行数和列数。

内容数据用于描述至少一个面板中的展示内容，可以包括展示内容本身以及用于描述展示内容的数据，该内容数据可以包括文本内容、图片内容、表格内容等，以及这些展示内容的颜色、位置、尺寸、类型等数据。

逻辑数据用于描述计算缩放系数的运行逻辑，终端可以根据该逻辑数据所确定的运行逻辑，自动计算出适用于终端显示屏幕的缩放系数。该逻辑数据可以为JavaScript(脚本语言)文件的形式，终端可以加载并运行JavaScript文件，在JavaScript(脚本语言)文件的运行过程中可以按照该运行逻辑进行操作。当然，该逻辑数据也可以为其他形式的数据。

图4是本发明实施例提供的网页页面中面板的示意图，参见图4，将网页页面抽象为面板1，面板1中嵌套两个面板：面板11和面板12，而面板11中嵌套3个面板：面板111、面板112和面板113，面板12中嵌套2个面板：面板121和面板122。基于网页页面中的面板，可以得到如图5所示的面板层级关系。相应地，样式数据和内容数据可以如图6所示，每个面板中包括面板自身的样式以及内部的面板分布情况，最后一层面板(如面板111)中包括面板自身的样式以及面板中要展示的内容，如文本或图片等(面板112、面板113、面板121、面板122与面板111类似，图6中未示出)。

网页页面的面板可以通过Table(表格)进行布局，在面板内通过拆分表格、合并单元格等方式，调整行高和列宽，从而形成一块块可控的子区域，每个子区域也可以看做一个处于下一层的面板。对于下一层的面板，仍然可以看做一个Table，继续进行布局。

实际应用中，网页页面的配置数据可以由服务器提供，当终端要访问该网页页面时，从服务器加载配置数据。或者，终端加载配置数据之后，也可以缓存该配置数据，那么当后续要访问网页页面时，也可以从缓存中获取该配置数据。

302、终端按照运行逻辑，获取网页页面的页面宽高比，并获取显示屏幕的屏幕宽高比。

终端获取到配置数据后，对配置数据进行解析，确定运行逻辑，并按照该运行逻辑进行操作。

其中，宽高比是指宽度与高度之间的比值，终端可以获取网页页面的宽度和高度，计算宽度与高度的比值，得到页面宽高比，且获取显示屏幕的宽度和高度，计算宽度与高度的比值，得到屏幕宽高比。

在一种可能实现方式中，配置数据中并未直接包括网页页面的宽度和高度，而是在样式数据中包括每个面板的宽度和高度，以及至少一个面板的层级关系，则可以确定第一层面板的宽度和高度即为网页页面的宽度和高度。因此，获取至少一个面板中位于第一层的面板的宽度和高度，分别作为网页页面的宽度和高度，计算网页页面的宽度与高度的比值，得到页面宽高比。

303、终端根据页面宽高比和屏幕宽高比，计算缩放系数。

终端获取到页面宽高比和屏幕宽高比后，判断页面宽高比是否大于屏幕宽高比，当页面宽高比大于屏幕宽高比时，如果将网页页面的高度与显示屏幕的高度的比值作为缩放系数，会导致缩放后网页页面的高度与显示屏幕的高度相等，但是网页页面的宽度会大于显示屏幕的宽度，这会导致网页页面中的一部分内容无法在显示屏幕上显示，因此，计算网页页面的宽度与显示屏幕的宽度的比值，作为缩放系数，从而保证缩放后网页页面的宽度与显示屏幕的宽度相等，网页页面的高度小于显示屏幕的高度，在显示屏幕中可以显示完整的网页页面。

而当页面宽高比不大于屏幕宽高比时，如果将网页页面的宽度与显示屏幕的宽度的比值作为缩放系数，会导致缩放后网页页面的宽度与显示屏幕的宽度相等，但是网页页面的高度会不小于显示屏幕的高度，可能会导致网页页面中的一部分内容无法在显示屏幕上显示，因此，计算网页页面的高度与显示屏幕的宽度的比值，作为缩放系数，从而保证缩放后网页页面的高度与显示屏幕的高度相等，网页页面的宽度不大于显示屏幕的宽度，在显示屏幕中可以显示完整的网页页面。

304、终端根据缩放系数，对配置数据中至少一个面板的尺寸以及至少一个面板中展示内容的尺寸进行调整，基于调整后的配置数据展示网页页面。

确定缩放系数后，终端要根据该缩放系数，对网页页面进行等比例地缩放。由于该网页页面实际上由配置数据进行配置，因此可以根据缩放系数对配置数据中设置的至少一个面板的尺寸以及至少一个面板中展示内容的尺寸进行缩放，从而实现网页页面的缩放。

该步骤304可以包括以下步骤：

3041、终端根据缩放系数，对样式数据中至少一个面板的尺寸进行调整，得到调整后的样式数据。

在一种可能实现方式中，终端可以计算每个面板的尺寸与缩放系数的乘积，作为每个面板调整后的尺寸，从而得到包含该至少一个面板调整后的尺寸的样式数据，后续可以根据该样式数据进行展示。

但是考虑到每个面板在显示屏幕上展示时，尺寸是由展示面板的像素点的数目确定，因此为了保证准确显示，应当保证面板的尺寸为正整数。

为此，终端可以计算每个面板的尺寸与缩放系数的乘积，对计算出的乘积进行取整操作，作为每个面板调整之后的尺寸。或者，考虑到取整操作会造成每个面板的尺寸损失，进而导致整个网页页面的尺寸损失，为了保证每个面板的尺寸为正整数且避免尺寸损失，可以采用以下调整方式：

1、调整每个面板的高度时，将至少一个面板划分为第一类面板和第二类面板，第一类面板为至少一个面板中位于指定行的面板，第二类面板为至少一个面板中除第一类面板以外的面板，对每个第二类面板的高度与缩放系数的乘积进行取整操作，得到每个第二类面板调整后的高度，计算网页页面的总高度与第二类面板的总高度的差值，作为第一类面板的高度。

也即是，先留出位于指定行的面板，其他行的面板计算出与缩放系数的乘积并进行取整操作后，得到调整后的高度，而位于指定行的面板不再计算与缩放系数的乘积，而是将整个网页页面中剩余的高度直接作为位于指定行的面板的高度。

2、调整每个面板的宽度时，将至少一个面板划分为第三类面板和第四类面板，第三类面板为至少一个面板中位于指定列的面板，第四类面板为至少一个面板中除第三类面板以外的面板，对每个第四类面板的宽度与缩放系数的乘积进行取整操作，得到每个第四类面板调整后的宽度，计算网页页面的总宽度与第四类面板的总宽度的差值，作为第三类面板的宽度。

也即是，先留出位于指定列的面板，其他列的面板计算出与缩放系数的乘积并进行取整操作后，得到调整后的宽度，而位于指定列的面板不再计算与缩放系数的乘积，而是将整个网页页面中剩余的宽度直接作为位于指定列的面板的宽度。

例如，900*900的面板内包含三列均分的面板，当将900*900的面板投放到1000*1000的显示屏幕中时，三列的宽度分别为333、333、334，以保证每列的宽度都是整数，且三列的宽度之和为1000。

采用上述方式1和2可以计算出每个面板的高度和宽度，并且可以保证每个面板的尺寸都是正整数，且整个网页页面的高度和宽度不会因为进行取整操作而发生尺寸损失。

3042、根据调整后的样式数据，对内容数据中至少一个面板中展示内容的尺寸进行调整，得到调整后的内容数据。

展示内容需要在对应的最后一层面板中进行展示，当调整面板的尺寸之后，需要对面板中的展示内容的尺寸相应地进行调整，使展示内容的尺寸与其所在的、最后一层面板的尺寸相等。

因此，终端根据调整后的样式数据中每个面板调整后的尺寸，对内容数据中每个面板中展示内容的尺寸进行调整，以使展示内容调整后的尺寸与所在面板调整后的尺寸相等。

3043、根据调整后的样式数据和调整后的内容数据进行渲染，以展示网页页面。

本发明实施例中，终端可以提供多种接口，通过调用这些接口来进行渲染。例如，终端可以将具有下一层面板的面板看做Table(表格)，通过调用drawTable接口，并根据Table的高度、宽度以及面板内每行的高度和每列的宽度将每个Table渲染出来。并且，将最后一层的面板看做Cell(单元格)，通过调用drawCells接口，将每个Cell内的展示内容渲染出来。

其中，Table和Cell所用的接口以及调用接口所需的参数可以如下表1和表2所示。

表1

表2

渲染Table时可以通过设置domId(文档对象模型的序列号)、background(背景)、border(边界)、height(高度)、width(宽度)、rowHeights(行高)、colWidths(列宽)和cells(单元格)等参数，并通过调用drawTable和drawCells接口将Table渲染出来。渲染Cell时，通过设置rowSpan(单元格一列所跨越的行数)、colSpan(单元格一行所跨越的列数)、rowIndex(行索引)、colIndex(列索引)，并通过调用fixMerge、hideRowSpan、hideColSpan等接口将每个Cell的大小按规则渲染，通过调用fixCss接口将展示内容的大小、颜色、居中效果渲染出来。

本发明实施例提供的方法，通过将网页页面抽象为至少一个面板，在网页页面的配置数据中设置用于描述至少一个面板的样式数据和内容数据，以及计算缩放系数的运行逻辑，保证了终端能够按照设置的运行逻辑自动计算适用于该终端的缩放系数，根据缩放系数对至少一个面板的尺寸进行调整，从而能够展示适用于该终端显示屏幕的网页页面，提高了灵活性，保证了网页页面能够适用于多种显示屏幕，避免在某些尺寸的显示屏幕上出现展示效果不佳的问题，而且无需开发人员为网页页面设置尺寸范围对应的缩放系数，降低了对开发人员的要求，节省了人力成本。

而且，通过对网页页面进行抽象，不需要编写html、css等代码，可以快速完成任意布局分块的页面制作，无需再投入人工编写代码，无需要求客户端浏览器的类型与版本，成本低效果好。对于配备了较大显示屏幕并且无滚动条的设备，采用本发明实施例提供的方法，可以很好地保证同一个网页页面在不同显示屏幕中的展示效果是一样的，保持了统一性。

图7是本发明实施例提供的一种网页页面展示装置的结构示意图。参见图7，该装置包括：

数据获取模块701，用于获取网页页面的配置数据，配置数据包括样式数据、内容数据和逻辑数据，样式数据用于描述网页页面中至少一个面板的展示样式，内容数据用于描述至少一个面板中的展示内容，逻辑数据用于描述计算缩放系数的运行逻辑；

计算模块702，用于按照运行逻辑，获取网页页面的页面宽高比，并获取显示屏幕的屏幕宽高比，根据页面宽高比和屏幕宽高比，计算缩放系数；

调整模块703，用于根据缩放系数，对配置数据中至少一个面板的尺寸以及至少一个面板中展示内容的尺寸进行调整；

展示模块704，用于基于调整后的配置数据展示网页页面。

在一种可能实现方式中，样式数据包括至少一个面板的层级关系，用于描述下一层面板在上一层面板之中展示，计算模块702，包括：

获取子模块，用于获取至少一个面板中位于第一层的面板的宽度和高度，分别作为网页页面的宽度和高度；

比值计算子模块，用于根据网页页面的宽度和高度，计算页面宽高比。

在另一种可能实现方式中，计算模块702包括：

第一计算子模块，用于当页面宽高比大于屏幕宽高比时，计算网页页面的宽度与显示屏幕的宽度的比值，作为缩放系数；

第二计算子模块，用于当页面宽高比不大于屏幕宽高比时，计算网页页面的高度与显示屏幕的宽度的比值，作为缩放系数。

在另一种可能实现方式中，调整模块703，包括：

样式调整子模块，用于根据缩放系数，对样式数据中至少一个面板的尺寸进行调整，得到调整后的样式数据；

内容调整子模块，用于根据调整后的样式数据，对内容数据中至少一个面板中展示内容的尺寸进行调整，得到调整后的内容数据；

展示模块704，还用于根据调整后的样式数据和调整后的内容数据进行渲染，以展示网页页面。

在另一种可能实现方式中，样式调整子模块，用于将至少一个面板划分为第一类面板和第二类面板，第一类面板为至少一个面板中位于指定行的面板，第二类面板为至少一个面板中除第一类面板以外的面板；对每个第二类面板的高度与缩放系数的乘积进行取整操作，得到每个第二类面板调整后的高度；计算网页页面的总高度与第二类面板的总高度的差值，作为第一类面板的高度。或者，将至少一个面板划分为第三类面板和第四类面板，第三类面板为至少一个面板中位于指定列的面板，第四类面板为至少一个面板中除第三类面板以外的面板；对每个第四类面板的宽度与缩放系数的乘积进行取整操作，得到每个第四类面板调整后的宽度；计算网页页面的总宽度与第四类面板的总宽度的差值，作为第三类面板的宽度。

上述可选技术方案，可以采用任意结合形成本公开的可选实施例，在此不再一一赘述。

需要说明的是：上述实施例提供的网页页面展示装置在展示网页页面时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将终端的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的网页页面展示装置与网页页面展示方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

图8是本发明实施例提供的一种终端的结构示意图。该终端可以用于实施上述实施例所示出的网页页面展示方法中所执行的功能。具体来讲：

终端800可以包括RF(Radio Frequency，射频)电路110、包括有一个或一个以上计算机可读存储介质的存储器120、输入单元130、显示单元140、传感器150、音频电路160、传输模块170、包括有一个或者一个以上处理核心的处理器180、以及电源190等部件。本领域技术人员可以理解，图8中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

RF电路110可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，交由一个或者一个以上处理器180处理；另外，将涉及上行的数据发送给基站。通常，RF电路110包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(SIM)卡、收发信机、耦合器、LNA(Low Noise Amplifier，低噪声放大器)、双工器等。此外，RF电路110还可以通过无线通信与网络和其他终端通信。所述无线通信可以使用任一通信标准或协议，包括但不限于GSM(Global System of Mobile communication，全球移动通讯系统)、GPRS(General Packet Radio Service，通用团体无线服务)、CDMA(CodeDivision Multiple Access，码分多址)、WCDMA(Wideband Code Division MultipleAccess,宽带码分多址)、LTE(Long Term Evolution,长期演进)、电子邮件、SMS(ShortMessaging Service，短消息服务)等。

存储器120可用于存储软件程序以及模块，如上述示例性实施例所示出的终端所对应的软件程序以及模块，处理器180通过运行存储在存储器120的软件程序以及模块，从而执行各种功能应用以及数据处理，如实现基于视频的交互等。存储器120可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据终端800的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器120还可以包括存储器控制器，以提供处理器180和输入单元130对存储器120的访问。

输入单元130可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，输入单元130可包括触敏表面131以及其他输入终端132。触敏表面131，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面131上或在触敏表面131附近的操作)，并根据预先设定的程式驱动相应的链接装置。可选的，触敏表面131可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器180，并能接收处理器180发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面131。除了触敏表面131，输入单元130还可以包括其他输入终端132。具体地，其他输入终端132可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元140可用于显示由用户输入的信息或提供给用户的信息以及终端800的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元140可包括显示面板141，可选的，可以采用LCD(Liquid Crystal Display，液晶显示器)、OLED(Organic Light-Emitting Diode,有机发光二极管)等形式来配置显示面板141。进一步的，触敏表面131可覆盖显示面板141，当触敏表面131检测到在其上或附近的触摸操作后，传送给处理器180以确定触摸事件的类型，随后处理器180根据触摸事件的类型在显示面板141上提供相应的视觉输出。虽然在图8中，触敏表面131与显示面板141是作为两个独立的部件来实现输入和输入功能，但是在某些实施例中，可以将触敏表面131与显示面板141集成而实现输入和输出功能。

终端800还可包括至少一种传感器150，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板141的亮度，接近传感器可在终端800移动到耳边时，关闭显示面板141和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于终端800还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路160、扬声器161，传声器162可提供用户与终端800之间的音频接口。音频电路160可将接收到的音频数据转换后的电信号，传输到扬声器161，由扬声器161转换为声音信号输出；另一方面，传声器162将收集的声音信号转换为电信号，由音频电路160接收后转换为音频数据，再将音频数据输出处理器180处理后，经RF电路110以发送给比如另一终端，或者将音频数据输出至存储器120以便进一步处理。音频电路160还可能包括耳塞插孔，以提供外设耳机与终端800的通信。

终端800通过传输模块170可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线或有线的宽带互联网访问。虽然图8示出了传输模块170，但是可以理解的是，其并不属于终端800的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器180是终端800的控制中心，利用各种接口和线路链接整个手机的各个部分，通过运行或执行存储在存储器120内的软件程序和/或模块，以及调用存储在存储器120内的数据，执行终端800的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器180可包括一个或多个处理核心；优选的，处理器180可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器180中。

终端800还包括给各个部件供电的电源190(比如电池)，优选的，电源可以通过电源管理系统与处理器180逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源190还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管未示出，终端800还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，终端800的显示单元是触摸屏显示器，终端800还包括有存储器以及至少一条指令、至少一段程序、代码集或指令集，其中至少一条指令、至少一段程序、代码集或指令集存储于存储器中，且经配置以由一个或者一个以上处理器加载并执行，以实现上述实施例中的网页页面展示方法中所执行的操作。

本发明实施例还提供了一种网页页面展示装置，该网页页面展示装置包括处理器和存储器，存储器中存储有至少一条指令，指令由处理器加载并执行以实现上述实施例的网页页面展示方法中所执行的操作。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

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

Claims (12)

1.一种网页页面展示方法，其特征在于，所述方法包括：

获取网页页面的配置数据，所述配置数据包括样式数据、内容数据和逻辑数据，所述样式数据用于描述所述网页页面中至少一个面板的展示样式，所述内容数据用于描述所述至少一个面板中的展示内容，所述逻辑数据用于描述计算缩放系数的运行逻辑；

按照所述运行逻辑，获取所述网页页面的页面宽高比，并获取显示屏幕的屏幕宽高比，根据所述页面宽高比和所述屏幕宽高比，计算缩放系数；

根据所述缩放系数，对所述配置数据中所述至少一个面板的尺寸以及所述至少一个面板中展示内容的尺寸进行调整，基于调整后的配置数据展示所述网页页面。

2.根据权利要求1所述的方法，其特征在于，所述样式数据包括所述至少一个面板的层级关系，用于描述下一层面板在上一层面板之中展示，所述获取所述网页页面的页面宽高比，包括：

获取所述至少一个面板中位于第一层的面板的宽度和高度，分别作为所述网页页面的宽度和高度；

根据所述网页页面的宽度和高度，计算所述页面宽高比。

3.根据权利要求1所述的方法，其特征在于，所述根据所述页面宽高比和所述屏幕宽高比，计算缩放系数，包括：

当所述页面宽高比大于所述屏幕宽高比时，计算所述网页页面的宽度与所述显示屏幕的宽度的比值，作为所述缩放系数；

当所述页面宽高比不大于所述屏幕宽高比时，计算所述网页页面的高度与所述显示屏幕的宽度的比值，作为所述缩放系数。

4.根据权利要求1所述的方法，其特征在于，所述根据所述缩放系数，对所述配置数据中所述至少一个面板的尺寸以及所述至少一个面板中展示内容的尺寸进行调整，基于调整后的配置数据展示所述网页页面，包括：

根据所述缩放系数，对所述样式数据中所述至少一个面板的尺寸进行调整，得到调整后的样式数据；

根据所述调整后的样式数据，对所述内容数据中所述至少一个面板中展示内容的尺寸进行调整，得到调整后的内容数据；

根据所述调整后的样式数据和所述调整后的内容数据进行渲染，以展示所述网页页面。

5.根据权利要求4所述的方法，其特征在于，所述根据所述缩放系数，对所述样式数据中所述至少一个面板的尺寸进行调整，得到调整后的样式数据，包括：

将所述至少一个面板划分为第一类面板和第二类面板，所述第一类面板为所述至少一个面板中位于指定行的面板，所述第二类面板为所述至少一个面板中除所述第一类面板以外的面板；对每个所述第二类面板的高度与所述缩放系数的乘积进行取整操作，得到每个所述第二类面板调整后的高度；计算所述网页页面的总高度与所述第二类面板的总高度的差值，作为所述第一类面板的高度；或者，

将所述至少一个面板划分为第三类面板和第四类面板，所述第三类面板为所述至少一个面板中位于指定列的面板，所述第四类面板为所述至少一个面板中除所述第三类面板以外的面板；对每个所述第四类面板的宽度与所述缩放系数的乘积进行取整操作，得到每个所述第四类面板调整后的宽度；计算所述网页页面的总宽度与所述第四类面板的总宽度的差值，作为所述第三类面板的宽度。

6.一种网页页面展示装置，其特征在于，所述装置包括：

数据获取模块，用于获取网页页面的配置数据，所述配置数据包括样式数据、内容数据和逻辑数据，所述样式数据用于描述所述网页页面中至少一个面板的展示样式，所述内容数据用于描述所述至少一个面板中的展示内容，所述逻辑数据用于描述计算缩放系数的运行逻辑；

计算模块，用于按照所述运行逻辑，获取所述网页页面的页面宽高比，并获取显示屏幕的屏幕宽高比，根据所述页面宽高比和所述屏幕宽高比，计算缩放系数；

调整模块，用于根据所述缩放系数，对所述配置数据中所述至少一个面板的尺寸以及所述至少一个面板中展示内容的尺寸进行调整；

展示模块，用于基于调整后的配置数据展示所述网页页面。

7.根据权利要求6所述的装置，其特征在于，所述样式数据包括所述至少一个面板的层级关系，用于描述下一层面板在上一层面板之中展示，所述计算模块，包括：

获取子模块，用于获取所述至少一个面板中位于第一层的面板的宽度和高度，分别作为所述网页页面的宽度和高度；

比值计算子模块，用于根据所述网页页面的宽度和高度，计算所述页面宽高比。

8.根据权利要求6所述的装置，其特征在于，所述计算模块包括：

第一计算子模块，用于当所述页面宽高比大于所述屏幕宽高比时，计算所述网页页面的宽度与所述显示屏幕的宽度的比值，作为所述缩放系数；

第二计算子模块，用于当所述页面宽高比不大于所述屏幕宽高比时，计算所述网页页面的高度与所述显示屏幕的宽度的比值，作为所述缩放系数。

9.根据权利要求6所述的装置，其特征在于，所述调整模块，包括：

样式调整子模块，用于根据所述缩放系数，对所述样式数据中所述至少一个面板的尺寸进行调整，得到调整后的样式数据；

内容调整子模块，用于根据所述调整后的样式数据，对所述内容数据中所述至少一个面板中展示内容的尺寸进行调整，得到调整后的内容数据；

所述展示模块，还用于根据所述调整后的样式数据和所述调整后的内容数据进行渲染，以展示所述网页页面。

10.根据权利要求9所述的装置，其特征在于，所述样式调整子模块，用于：

将所述至少一个面板划分为第一类面板和第二类面板，所述第一类面板为所述至少一个面板中位于指定行的面板，所述第二类面板为所述至少一个面板中除所述第一类面板以外的面板；对每个所述第二类面板的高度与所述缩放系数的乘积进行取整操作，得到每个所述第二类面板调整后的高度；计算所述网页页面的总高度与所述第二类面板的总高度的差值，作为所述第一类面板的高度；或者，

将所述至少一个面板划分为第三类面板和第四类面板，所述第三类面板为所述至少一个面板中位于指定列的面板，所述第四类面板为所述至少一个面板中除所述第三类面板以外的面板；对每个所述第四类面板的宽度与所述缩放系数的乘积进行取整操作，得到每个所述第四类面板调整后的宽度；计算所述网页页面的总宽度与所述第四类面板的总宽度的差值，作为所述第三类面板的宽度。

11.一种网页页面展示装置，其特征在于，所述装置包括处理器和存储器，所述存储器中存储有至少一条指令，所述指令由所述处理器加载并执行以实现如权利要求1至5任一权利要求所述的网页页面展示方法中所执行的操作。

12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有至少一条指令，所述指令由处理器加载并执行以实现如权利要求1至5任一权利要求所述的网页页面展示方法中所执行的操作。