CN103605783A - 网页显示方法及装置 - Google Patents

Abstract

本申请实施例公开了一种网页显示方法及装置。所述方法包括：获取待显示网页的源代码；解析所述源代码形成树状节点；将所述树状节点进行排版；根据排版后的树状节点定位主容器；定位所述主容器内的至少一个次容器；调整所述次容器的面积；绘制调整后的次容器。本申请实施例还公开了一种网页显示装置。本申请实施例所提供的网页显示方法及装置，将待显示网页模块化，当对网页的部分元素进行调整时，不会破坏网页的细节排版，而且各个次容器相互独立，每个次容器的细节排版不受其他次容器的影响。由此可见，本申请实施例所提供的网页显示方法及装置，不但能保证网页的可读性，也能够保留网页的细节排版，改善了用户体验。

Description

网页显示方法及装置

技术领域

本发明涉及移动通信技术领域，特别是涉及一种网页显示方法及装置。

背景技术

用户在使用便携终端，如手机、PAD等，浏览网页时，由于网页依照台式电脑的屏幕尺寸设计，而便携终端的屏幕尺寸偏小，如果将原始网页显示在便携移动终端屏幕上，则网页的高度和宽度会超出便携终端屏幕，当用户进行浏览时，需要边浏览边调整网页的内容；如果将网页直接完整的缩小至与便携终端屏幕尺寸一致进行显示，则网页内容显示过小，用户无法清楚的浏览网页内容，严重影响用户体验。

针对上述问题，目前在便携终端中广泛采用的网页显示方法为：通过放大部分内容的字体，提高网页在便携终端上的可读性。具体实现方法如下：对网页内容进行排版时，保证网页整体布局不变，对网页重点内容的文本进行放大，使重点内容的文字达到可阅读的效果。当用户需要对部分内容详细阅读时，再通过交互的方式对该部分文本内容再次进行放大。虽然该方法对文本进行了优化，而且能保证网页整体布局的完整，但是文本的放大导致某些区域排版的变形和文字的溢出隐藏，对局部细节的排版产生了破坏。

因此，如何提供一种既能保证可读性，又能保留网页细节排版的网页显示方法，成为本领域亟待解决的问题。

发明内容

本申请实施例提供了一种网页显示方法及装置，既能提高网页在便携终端上可读性，又能够保留网页的细节排版，改善了用户体验。

第一方面，本申请实施例公开了一种网页显示方法，所述方法包括：获取待显示网页的源代码；解析所述源代码形成树状节点；将所述树状节点按照所述源代码的样式规范进行排版；根据排版后的树状节点定位主容器；定位所述主容器内的至少一个次容器，其中，每个所述次容器包含一部分所述待显示网页的元素；调整所述次容器的面积；绘制调整后的次容器，将所述次容器所包含的待显示网页的元素在屏幕上显示。

在第一方面的第一种可能的实现方式中，所述根据排版后的树状节点定位主容器，包括：判断当前节点的上级节点是否为空或者其上级节点是否为主容器；当所述当前节点的上级节点为空或者为主容器时，判断当前节点的高度是否为固定值；当所述当前节点高度不是固定值时，如果上级节点为空，将当前节点定位为主容器；如果所述当前节点的上级节点为主容器，当所述当前节点的宽度大于等于根节点宽度的50%，且大于等于其上级节点宽度的90%，将所述当前节点定位为主容器。

结合第一方面或第一方面的第一种可能的实现方式，在第二种可能的实现方式中，所述定位所述主容器内包含的至少一个次容器，包括：判断所述当前节点的上级节点是否为主容器；当所述上级节点为主容器，如果所述当前节点的宽度为其上级节点宽度的20%到80%，将所述当前节点定位为次容器。

结合第一方面或第一方面的第一种或第二种可能的实现方式，在第三种可能的实现方式中，所述调整所述次容器的面积，包括：计算每个所述次容器的面积，并得到所有次容器面积的平均值；比较每个所述次容器的面积与所述平均值的大小；若所述次容器的面积大于所述平均值，将所述次容器按预设比例系数k进行放大，其中，所述k大于1；同时，将其他次容器进行相应缩小，以保持次容器的总宽度不变。

结合第一方面或第一方面的第一种或第二种或第三种可能的实现方式，在第四种可能的实现方式中，所述方法还包括：接收切换命令；生成所述目标次容器的缩放比例系数u；将所述目标次容器的面积进行u倍调整，并对应调整其他次容器的面积，以保持次容器的总宽度不变；绘制调整后的次容器，将所述次容器的元素在屏幕上进行显示。

结合第一方面或第一方面的第一种或第二种或第三种或第四种可能的实现方式，在第五种可能的实现方式中，所述生成所述目标次容器的缩放比例系数，包括：比较所述屏幕的宽度与所述主容器的宽度，取二者之中的最小值；将所述最小值与所述预设比例系数k作乘法计算，乘法计算的结果除以所述目标次容器的宽度，得到第一缩放系数u1；将所述主容器的高度值除以所述目标次容器的高度值，得到第二缩放系数u2；将所述u1和所述u2中的最小值确定为所述缩放比例系数u。

第二方面，本申请实施例还公开了一种网页显示装置，所述装置包括：获取单元，用于获取待显示网页的源代码；解析单元，用于解析所述获取单元获取到的源代码形成树状节点；排版单元，用于将所述解析单元解析形成的树状节点按照所述源代码的样式规范进行排版；第一定位单元，用于根据所述排版单元排版后的树状节点定位主容器；第二定位单元，用于定位所述主容器内的至少一个次容器，其中，每个所述次容器包含一部分所述待显示网页的元素；第一调整单元，用于调整所述第二定位单元定位得到次容器的面积；绘制单元，用于绘制所述第一调整单元调整后的次容器，将所述次容器所包含的待显示网页的元素在屏幕上显示。

在第二方面的第一种可能的实现方式中，所述第一定位单元包括：第一判断单元和第二判断单元，其中，所述第一判断单元，用于判断当前节点的上级节点是否为空或者其上级节点是否为主容器；所述第二判断单元，用于当所述当前节点的上级节点为空或者为主容器时，判断当前节点的高度是否为固定值；所述第一定位单元，具体用于当所述当前节点高度不是固定值时，如果上级节点为空，将当前节点定位为主容器；如果所述当前节点的上级节点为主容器，当所述当前节点的宽度大于等于根节点宽度的50%，且大于等于其上级节点宽度的90%，将所述当前节点定位为主容器。

结合第二方面或第二方面的第一种可能的实现方式，在第二种可能的实现方式中，所述第二定位单元包括：第三判断单元，其中，所述第三判断单元，用于判断所述当前节点的上级节点是否为主容器；所述第二定位单元，具体用于当所述当前节点的上级节点为主容器时，如果所述当前节点的宽度为其上级节点宽度的20%到80%，将所述当前节点定位为次容器。

结合第二方面或第二方面的第一种或第二种可能的实现方式，在第三种可能的实现方式中，所述第一调整单元包括：第一计算单元、第一比较单元和缩放单元，其中，所述第一计算单元，用于将计算每个所述次容器的面积，并得到所有次容器面积的平均值；所述第一比较单元，用于比较所述第一计算单元计算得到的每个所述次容器的面积与所述平均值的大小；所述缩放单元，用于若所述次容器的面积大于所述平均值，将所述次容器按预设比例系数k进行放大，其中，所述k大于1；同时，将其他次容器进行相应缩小，以保持次容器的总宽度不变。

结合第二方面或第二方面的第一种或第二种或第三种可能的实现方式，在第四种可能的实现方式中，所述装置还包括：接收单元、生成单元和第二调整单元，其中，所述接收单元，用于接收切换命令；所述生成单元，用于生成所述目标次容器的缩放比例系数u；所述第二调整单元，用于当所述生成单元生成缩放比例系数u后，将所述目标次容器的面积进行u倍调整，并对应调整其他次容器的面积，以保持次容器的总宽度不变；所述绘制单元，还用于绘制所述第二调整单元调整后的次容器，将所述次容器的元素在屏幕上进行显示。

结合第二方面或第二方面的第一种或第二种或第三种或第四种可能的实现方式，在第五种可能的实现方式中，所述生成单元包括：第二比较单元、第二计算单元和确定单元，其中，所述第二比较单元，用于比较所述屏幕的宽度与所述主容器的宽度，取二者之中的最小值；所述第二计算单元，具体用于将所述最小值与所述预设比例系数k作乘法计算，乘法计算的结果除以所述目标次容器的宽度，得到第一缩放系数u1；将所述主容器的高度值除以所述目标次容器的高度值，得到第二缩放系数u2；所述确定单元，用于将所述第二计算单元计算得到的u1和u2中的最小值确定为所述缩放比例系数u。

由上述技术方案可知，本申请实施例所提供的网页显示方法及装置，通过将待显示网页源代码解析形成树状节点，并定位所述树状节点的主容器及次容器，其中，每个所述次容器包含一部分待显示网页的元素。然后调整每个所述次容器的面积，并绘制调整后的次容器，所述次容器包含的待显示网页的元素在屏幕上显示。与现有技术相比，本申请实施例通过将所述待显示网页模块化，当对网页的部分元素进行调整时，实质上所调整的对象是包含该部分元素的次容器，因此，该部分元素的放大不会破坏该次容器的细节排版。同时，由于各个次容器是相互独立的模块，因此，对某一次容器的面积进行调整时，其他次容器的排版不会受到任何影响。由此可见，本申请实施例所提供的网页显示方法及装置，不但能保证网页的可读性，在此基础上也能够保留网页的细节排版，改善了用户体验。

附图说明

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

图1为本申请实施例所提供的网页显示方法流程图；

图2为本申请实施例所提供的网页显示方法的第二种实施方式流程图；

图3为本申请实施例所提供的网页显示方法的第三种实施方式流程图；

图4为本申请实施例所提供的网页显示装置结构示意图；

图5为本申请实施例所提供的网页显示装置的第二种实施方式结构示意图；

图6为本申请实施例所提供的网页显示装置的第三种实施方式结构示意图。

具体实施方式

为了使本领域技术人员更好地理解本申请实施例中的技术方案，并使本申请实施例的上述目的、特征和优点能够更加明显易懂，下面结合附图对本申请实施例中技术方案作进一步详细的说明。

参见图1，图1为本申请实施例所提供的网页显示方法流程图。

所述方法包括：

步骤101：获取待显示网页的源代码。

所述待显示网页是指用户在便携终端上触发后即将显示的网页，可以为任意网页页面，例如，网易、搜狐或者百度等。所述源代码是一种计算机描述语言，通过汇编的方式将待显示网页的图片，视频，音乐，文字等元素进行组织排版，通过浏览器翻译后以网页的形式展现出来。源代码可以通过超文本标记语言（HTML,Hypertext MarkupLanguage）进行编写。

步骤102：解析所述源代码形成树状节点。

现有网页一般通过HTML语言编写，现有网页的内容所遵循的为HTML规范或WAP规范，为了使所述待显示网页源代码的结构更清晰，从而可以更容易将所述待显示网页按照网页元素模块化，需要解析所述待显示网页的源代码，识别出其中的树状节点。

其中，所述树状节点可以为任意已知或者即将出现的树状节点，例如，在本申请的一个优选实例中，将网页按照文件对象模型（DOM，Document Object Model）规范，将描述所述待显示网页的源代码进行解析，并识别出DOM节点。当然，上述仅为本申请所提供的一个示例，本申请不限于此。

步骤103：将所述树状节点按照所述源代码的样式规范进行排版。

树状节点是将所述待显示网页的页面映射为一个由层次节点组成的文件，其中节点分几个等级，每个等级的节点包含一定的网页元素，但是为了准确的展现出所述待显示网页的排版结构，以便于将所述待显示网页的内容模块化，将所述树状节点按照所述源代码的样式规范进行排版。

需要指出的，所述将所述树状节点按照所述源代码的样式规范进行排版可以是，将树状节点按照级联样式表（CSS，Cascading Style Sheets）或者HTML样式进行排版，当然，也可以按照其他的标准进行排版，本申请对此不做限制。

此外，将所述树状节点进行排版的操作为本领域技术人员所熟知的技术，本申请在此不再赘述。

步骤104：根据排版后的树状节点定位主容器。

主容器是指网页中包含有多个小模块的模块，例如，一个网页的整个页面可以视为一个主容器。在树状节点中，可以将包含多个次级节点的节点定位为主容器。

其中，本申请实施例所提供的网页显示方法，通过节点排版后的宽度定位该节点是否为主容器，所述节点宽度指该树状节点按原比例显示在像素设备时，其横向所占的像素数，本申请中以节点中所包含的网页元素的量进行确定。

步骤105：定位所述主容器内的至少一个次容器。

需要指出的，每个主容器内包含一个或多个次容器，其中，主容器内所包含的次容器的数量根据待显示网页的结构确定。例如，百度搜索的主页页面结构相对简单，因此可以定位为一个次容器；360浏览器首页，可以将360浏览器首页的页面视为主容器，定位时将根节点定位为主容器，将页面右侧部分视为一个模块，左侧部分视为一个模块，则在对节点定位时，该主容器包含两个次容器。此外，当主容器内包含多个次容器时，次容器之间相互独立，调整任意次容器时，不影响其他次容器内元素的布局。

一般的，可以将网页的组成元素分为两大类，主体元素和用于定位的辅助元素。其中主体元素如文字、图片、有背景或有边框的区块、表单、输入框和其他可视元素等。用于定位的辅助元素，如不可见的区块（如HTML标签<div>在默认样式下的表现）。在对树状节点进行定位时，一个包含有大段内容的辅助元素可以定位为主容器，其他的辅助元素可以定位为该主容器内的次容器，主元素填充在每个次容器内。

步骤106：调整所述次容器的面积。

将次容器按照重要性计算缩放比例系数，并按照计算得到的缩放比例系数分别调整每个次容器的面积，放大重要性高的次容器的面积，缩小重要性低的次容器的面积，其中，放大的程度以在便携终端上清楚的显示为准。所述清楚的显示指，待显示网页在便携终端显示后，用户无需进行任何操作便可以清楚的浏览该放大的次容器的内容。此外，所述次容器的重要性，可以根据网页元素被浏览的频率来判定，如果该网页元素为用户浏览该网页是经常浏览的部分，则该网页元素的重要性高。因此，在定位次容器时，可以将包含被浏览频率较高的网页元素的部分定位为面积较大的次容器，通过次容器的面积来判定次容器的重要性。

需要指出的，调整次容器的面积是指，将次容器的宽和高进行等比缩放。将次容器进行缩放时，次容器内所包含的网页元素也会相应的放大或缩小。其中，对次容器的面积进行调整时，调整后与调整前相比，次容器的总宽度保持不变。

步骤107：绘制调整后的次容器，将所述次容器所包含的待显示网页的元素在屏幕上显示。

本实施例所提供的网页显示方法，通过将待显示网页源代码解析形成树状节点，并定位所述树状节点的主容器及次容器，其中，每个所述次容器包含一部分待显示网页的元素。然后调整每个所述次容器的面积，并绘制调整后的次容器，所述次容器包含的待显示网页的元素在屏幕上显示。与现有技术相比，本申请实施例通过将所述待显示网页模块化，当对网页的部分元素进行调整时，实质上所调整的对象是包含该部分元素的次容器，因此，该部分元素的放大不会破坏该次容器的细节排版。同时，由于各个次容器是相互独立的模块，因此，对某一次容器的面积进行调整时，其他次容器的排版不会受到任何影响。由此可见，本申请实施例所提供的网页显示方法及装置，不但能保证网页的可读性，在此基础上也能够保留网页的细节排版，改善了用户体验。

为了使本领域技术人员更加清楚的理解本申请的技术方案，在上述实施例的基础上，本申请还提供了网页显示方法的第二种实施方式流程图。

参见图2，图2为本申请实施例所提供的网页显示方法的第二种实施方式流程图。

所述方法包括：

步骤201：获取待显示网页的源代码。

步骤202：解析所述源代码形成树状节点。

步骤203：将所述树状节点按照所述源代码的样式规范进行排版。

步骤204：判断当前节点的上级节点是否为空或者为主容器，如果所述当前节点的上级节点为空，执行步骤206；如果所述当前节点的上级节点为主容器，执行步骤205。

所述当前节点的上级节点为空，即，所述当前节点为根节点。

步骤205：判断所述当前节点的宽度是否大于等于根节点宽度的50%，且是否大于等于其上级节点宽度的90%，如果是，执行步骤206，如果否，不执行任何操作。

当所述当前节点的宽度大于等于其上级节点宽度的90%，说明所述当前节点的上级节点仅仅是定位的辅助元素，其内部所包含的网页元素全部包含于当前节点所定位的容器中。

步骤206：判断当前节点的高度是否为固定值。如果当前节点的高度为固定值，对当前节点不执行任何操作；如果当前节点的不是固定值，执行步骤207。

判断当前节点高度是否为固定值，可以包括：判断当前节点对应的源代码是否将所述当前节点的高度值设置为固定值，如果将当前节点的高度值设置为固定值，则当前节点高度是固定值，否则，当前节点的高度可能不是固定值；还需要判断当前节点对应的背景图像是否支持可变高度，如果当前节点的背景图高度不可变，例如是repeat-x或者no-repeat的图像，则当前节点的高度是固定值，否则，当前节点的高度可能不是固定值。

需要指出的，上述判断仅仅是本申请提供的示例，本申请在判断当前节点是否可变时，还包括通过其他因素进行判断，本申请对此不做限制。

由于将次容器的宽度调整至与便携终端的屏幕宽度相一致时，为了保证次容器中网页元素的合理排版，次容器的高度肯定会产生变化，因此，需要包含所述次容器的主容器支持可变高度。

步骤207：将所述当前节点定位为主容器。

步骤208：判断所述当前节点的上级节点是否为主容器。如果所述当前节点的上级节点非主容器，不执行任何操作；如果所述当前节点的上级节点为主容器，执行步骤209。

次容器嵌套在主容器内，多个次容器相互独立，因此，按照树状节点的层级式结构特点，次容器节点的上级节点一定为主容器。

步骤209：判断所述当前节点的宽度是否为其上级节点宽度的20%到80%。如果是，执行步骤210；如果否，不执行任何操作。

由于每个主容器所包含的次容器至少为一个，当主容器内包含一个次容器时，所述次容器的宽度为所述主容器宽度的80%；当所述主容器包含多个次容器时，每个所述次容器宽度占所述主容器宽度的比例小于80%；如果次容器的宽度占其所在主容器宽度的20%以下，则该次容器区域过小，基于本申请所要解决的技术问题，没有任何意义。所以，次容器的宽度占主容器宽度的20%到80%。

步骤210：将所述当前节点定位为次容器。

步骤211：计算每个所述次容器的面积，并得到所有次容器面积的平均值。

由上述实施例可知，次容器的面积表示该次容器所包含的网页元素的重要性，次容器面积越大表示该次容器所包含的元素重要性越高。

需要指出的，当主容器内包含至少两个次容器时，需要根据次容器的重要性计算每个次容器的面积，计算方法可以为：计算该次容器的宽度与高度的乘积，将所述乘积结果作为该次容器的面积值；或者，计算所述次容器中每一种类别元素的面积值，并将所有面积值相加得到该次容器的面积，其中，所述元素类别包括文字、图片、动画视频和控件等，根据各类元素的重要程度，每类元素都被预设一个加权参数，所述元素的面积是根据所述元素所占的物理面积乘以所述元素的加权参数计算得到；当主容器内仅包含一个次容器时，无需比较次容器之间的重要性，将所述待显示网页直接显示即可。

步骤212：比较每个所述次容器的面积与所述平均值的大小。

步骤213：若所述次容器的面积大于所述平均值，将所述次容器按预设比例系数k进行放大，其中，所述k大于1；同时，将其他次容器进行相应缩小，以保持次容器的总宽度不变。

其中，预设比例系数k可以根据不同的网页排版及次容器的数量和大小计算得到；或者计算得到每个次容器的比例系数。为了保证次容器的总宽度不变，将重要性较高的次容器按照其自身的预设比例系数作k倍放大时，将其他次容器进行相应的缩小。

计算每个次容器的预设比例系数的方法包括：假定页面在便携终端屏幕上的可视宽度为u，每个次容器的宽度为w，u除以w的值即为该次容器的预设比例系数k。当然，该算法也可以作为调整任意次容器适应屏幕显示时，每个次容器的缩放比例系数的算法。

步骤214：绘制调整后的次容器，将所述次容器所包含的待显示网页的元素在屏幕上显示。

本申请所述的绘制指利用组合、移动、层叠、缩放、裁剪等技术手段将所述次容器中包含的内容显示在屏幕上。

本实施例所提供的网页显示方法，通过使用次容器的面积表示次容器中所包含的网页内容的重要性，在确定将要显示的次容器时方便简洁，避免了大量的运算过程，从而也能加快网页在屏幕上的显示速度，提高了用户的体验。

当然，用户在对网页进行浏览时，不可能仅仅浏览网页的一部分内容，当用户需要对当前所显示的部分之外的部分浏览时，需要切换所显示的网页的内容，基于此，在上述实施例的基础上，本申请还提供了第三种网页显示方法的实施方式。

参见图3，图3为本申请实施例所提供的网页显示方法的第三种实施方式流程图。

所述方法包括：

步骤301：获取待显示网页的源代码。

步骤302：解析所述源代码形成树状节点。

步骤303：将所述树状节点按照所述源代码的样式规范进行排版。

步骤304：根据排版后的树状节点定位主容器。

步骤305：定位所述主容器内的至少一个次容器。

步骤306：调整所述次容器的面积。

步骤307：绘制调整后的次容器，将所述次容器所包含的待显示网页的元素在屏幕上显示。

需要指出的，步骤301至步骤307与上述两实施例中所述类似，本申请在此不在赘述。

步骤308：接收切换命令。

由上述实施例可知，网页在屏幕上显示时，默认放大显示重要性最高的次容器的内容，而当用户需要浏览其他次容器的内容时，可以通过手势或者便携终端额外提供的功能控件与便携终端产生交互操作，放大显示目标次容器的内容。当便携终端接收到用户的手势或者功能控件等触发信息时，将所述触发信号作为切换命令，并根据所述切换命令将目标次容器放大。例如：在目标次容器的内容上双击。

步骤309：生成所述目标次容器的缩放比例系数u。

对次容器进行切换时，无须考虑目标次容器内的网页元素重要性，仅仅针对所述目标次容器与便携终端的屏幕进行调整。因此，生成目标次容器的缩放比例系数方法可以为，比较便携终端屏幕的宽度与主容器的宽度，取二者之中最小值；将所述最小值与所述预设比例系数k作乘法计算，乘法计算的结果除以所述目标次容器的宽度，得到第一缩放系数u1；将所述主容器的高度值除以所述目标次容器的高度值，得到第二缩放系数u2；将所述u1和所述u2中的最小值确定为所述缩放比例系数u，如果u小于1则取值为1；或者按照上述实施例所述的方法计算得到每个次容器预设比例系数。

当然，生成缩放比例系数u的方法不限于此，还可以为其他任意适用的方法，例如根据次容器的像素值生成，本申请对此不做限制。

步骤310：将所述目标次容器的面积进行u倍调整，并对应的调整其他次容器的面积，以保持次容器的总宽度不变。

当有切换命令触发时，次容器的重要性发生变化，目标次容器成为重要性较高的次容器。因此，所述目标次容器的面积在显示前需要进行放大，而为了保证调整后次容器的总宽度不变，将所述目标次容器的面积进行放大时，需要将其他的次容器进行相应缩小；或者根据上述实施例所述的每个次容器的预设比例系数，将目标次容器按照其自身的预设比例系数放大，将当前所显示的次容器相应缩小。

步骤311：绘制调整后的次容器，将所述次容器的元素在屏幕上进行显示。

调整后的次容器，目标次容器作为重要性较高的次容器面积增大，其他次容器的面积缩小，网页总体布局发生变化，当再次绘制后，屏幕上清楚显示的是放大后的目标次容器的内容。绘制调整后的次容器的方法与绘制所述当前所显示的次容器的方法类似，本申请在此不再赘述。

需要指出的，将所述目标次容器放大并将其他次容器缩小的过程中，可以为传统的画面，如放大目标次容器，缩小其他的次容器，也可以通过定时设置，使切换过程分几个步骤完成，该过程可以设置为动画效果，提高用户的交互体验。

本实施例所提供的网页显示方法，通过用户与便携终端的交互操作，将当前所显示的次容器的内容切换为目标次容器的内容，切换过程中，放大所述目标次容器，缩小当前所显示的次容器，不仅能提高目标次容器的可读性，而且能够保留当前次容器的细节排版。

本申请所提供的网页显示方法，通过将待显示网页源代码解析形成树状节点，并定位所述树状节点的主容器及次容器，其中，每个所述次容器包含一部分待显示网页的元素。然后调整每个所述次容器的面积，并绘制调整后的次容器，所述次容器包含的待显示网页的元素在屏幕上显示。与现有技术相比，本申请实施例通过将所述待显示网页模块化，当对网页的部分元素进行调整时，实质上所调整的对象是包含该部分元素的次容器，因此，该部分元素的放大不会破坏该次容器的细节排版。同时，由于各个次容器是相互独立的模块，因此，对某一次容器的面积进行调整时，其他次容器的排版不会受到任何影响。由此可见，本申请实施例所提供的网页显示方法及装置，不但能保证网页的可读性，在此基础上也能够保留网页的细节排版，改善了用户体验。

与上述实现方法相对应，本申请实施例还提供了一种网页显示装置。

参见图4，图4为本申请实施例所提供的网页显示装置结构示意图。

所述装置包括:获取单元11、解析单元12、排版单元13、第一定位单元14、第二定位单元15、第一调整单元16和绘制单元17，其中，所述获取单元11，用于获取待显示网页的源代码；所述解析单元12，用于解析所述获取单元11获取到的源代码形成树状节点；所述排版单元13，用于将所述解析单元12解析形成的树状节点按照所述源代码的样式规范进行排版；所述第一定位单元14，用于根据所述排版单元13排版后的宽度定位主容器；所述第二定位单元15，用于定位所述主容器内的至少一个次容器，其中，每个所述次容器包含一部分所述待显示网页的元素；所述第一调整单元16，用于调整所述第二定位单元15定位得到次容器的面积；所述绘制单元17，用于绘制所述第一调整单元16调整后的次容器，将所述次容器所包含的待显示网页的元素在屏幕上显示。

其中，所述第一定位单元包括：第一判断单元和第二判断单元；所述第二定位单元包括：第三判断单元；所述第一调整单元包括：第一计算单元、第一比较单元和缩放单元。

所述装置中各个单元的功能和作用的实现过程详见上述方法中对应的实现过程，在此不再赘述。

本申请所提供的网页显示装置，通过将待显示网页源代码解析形成树状节点，并定位所述树状节点的主容器及次容器，其中，每个所述次容器包含一部分待显示网页的元素。然后调整每个所述次容器的面积，并绘制调整后的次容器，所述次容器包含的待显示网页的元素在屏幕上显示。与现有技术相比，本申请实施例通过将所述待显示网页模块化，当对网页的部分元素进行调整时，实质上所调整的对象是包含该部分元素的次容器，因此，该部分元素的放大不会破坏该次容器的细节排版。同时，由于各个次容器是相互独立的模块，因此，对某一次容器的面积进行调整时，其他次容器的排版不会受到任何影响。由此可见，本申请实施例所提供的网页显示方法及装置，不但能保证网页的可读性，在此基础上也能够保留网页的细节排版，改善了用户体验。

参见图5，图5为本申请实施例所提供的网页显示装置的第二种实施方式结构示意图。

在上述实施例的基础上，本实施例所述装置包括：获取单元20、解析单元21、排版单元22、第一判断单元23、第二判断单元24、第三判断单元25、第一计算单元26、第一比较单元27、缩放单元28和绘制单元29，其中，所述获取单元20、所述解析单元21、所述排版单元22和所述绘制单元29的功能及连接方式与上述实施例类似，本申请在此不再赘述。所述第一判断单元23，用于判断当前节点的上级节点是否为空或者其上级节点是否为主容器；所述第二判断单元24，用于当所述当前节点的上级节点为空或者为主容器时，判断当前节点的高度是否为固定值；所述第三判断单元26，用于判断所述当前节点的上级节点是否为主容器；所述第一计算单元26，用于将计算每个所述次容器的面积，并得到所有次容器面积的平均值；所述第一比较单元27，用于比较所述第一计算单元26计算得到的每个所述次容器的面积与所述平均值的大小；所述缩放单元28，用于当所述次容器的面积大于所述平均值，将所述次容器按预设比例系数k进行放大，其中，所述k大于1；同时，将其他次容器进行相应缩小，以保持次容器的总宽度不变。

在上述实施例的基础上，在本实施例中，所述第一定位单元，具体用于当所述当前节点高度不是固定值时，如果上级节点为空，将当前节点定位为主容器；如果所述当前节点的上级节点为主容器，当所述当前节点的宽度大于等于根节点宽度的50%，且大于等于其上级节点宽度的90%，将所述当前节点定位为主容器；所述第二定位单元，具体用于当所述第三判断单元判断得到所述当前节点的上级节点为主容器时，如果所述当前节点的宽度为其上级节点宽度的20%到80%，将所述当前节点定位为次容器。

所述装置中各个单元的功能和作用的实现过程详见上述方法中对应的实现过程，在此不再赘述。

本实施例所提供的网页显示装置，通过使用次容器的面积表示次容器中所包含的网页内容的重要性，在确定将要显示的次容器时方便简洁，避免了大量的运算过程，从而也能加快网页在屏幕上的显示速度，提高了用户的体验。

为了方便用户对所显示内容的切换，在上述实施例的基础上，本申请实施例还提供的第三种网页显示装置。

参见图6，图6为本申请实施例所提供的网页显示装置的第三种实施方式结构示意图。

所述装置包括：获取单元30、解析单元31、排版单元32、第一定位单元33、第二定位单元34、第一调整单元35、绘制单元36、接收单元37、生成单元38和第二调整单元39，其中，所述获取单元30、所述解析单元31、所述排版单元32、所述第一定位单元33、所述第二定位单元34、所述第一调整单元35和所述绘制单元36的功能作用及连接关系与上述实施方式类似，本申请在此不再赘述。所述接收单元37，用于接收切换命令，以放大显示目标次容器的内容；所述生成单元38，用于生成所述目标次容器的缩放比例系数u；所述第二调整单元39，用于当所述生成单元生成缩放比例系数u后，将所述目标次容器的面积进行u倍调整，并对应调整其他次容器的面积，以保持次容器的总宽度不变。

在上述实施例的基础上，在本实施例中，所述绘制单元，还用于绘制所述第二调整单元调整后的次容器，将所述次容器的元素在屏幕上进行显示。

其中，所述生成单元包括：第二比较单元、第二计算单元和确定单元，所述第二比较单元，用于比较所述屏幕的宽度与所述主容器的宽度，取二者之中的最小值；所述第二计算单元，具体用于将所述最小值与所述预设比例系数k作乘法计算，乘法计算的结果除以所述目标次容器的宽度，得到第一缩放系数u1；将所述主容器的高度值除以所述目标次容器的高度值，得到第二缩放系数u2；所述确定单元，用于将所述第二计算单元计算得到的u1和u2中的最小值确定为所述缩放比例系数u。

所述装置中各个单元的功能和作用的实现过程详见上述方法中对应的实现过程，在此不再赘述。

本实施例所提供的网页显示装置，通过用户与便携终端的交互操作，将当前所显示的次容器的内容切换为目标次容器的内容，切换过程中，放大所述目标次容器，缩小当前所显示的次容器，不仅能提高目标次容器的可读性，而且能够保留当前次容器的细节排版。

综上所述，本申请所提供的网页显示方法及装置，通过将待显示网页源代码解析形成树状节点，并定位所述树状节点的主容器及次容器，其中，每个所述次容器包含一部分待显示网页的元素。然后调整每个所述次容器的面积，并绘制调整后的次容器，所述次容器包含的待显示网页的元素在屏幕上显示。与现有技术相比，本申请实施例通过将所述待显示网页模块化，当对网页的部分元素进行调整时，实质上所调整的对象是包含该部分元素的次容器，因此，该部分元素的放大不会破坏该次容器的细节排版。同时，由于各个次容器是相互独立的模块，因此，对某一次容器的面积进行调整时，其他次容器的排版不会受到任何影响。由此可见，本申请实施例所提供的网页显示方法及装置，不但能保证网页的可读性，在此基础上也能够保留网页的细节排版，改善了用户体验。

本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本发明，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅是本发明的具体实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (12)

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

获取待显示网页的源代码；

解析所述源代码形成树状节点；

将所述树状节点按照所述源代码的样式规范进行排版；

根据排版后的树状节点定位主容器；

定位所述主容器内的至少一个次容器，其中，每个所述次容器包含一部分所述待显示网页的元素；

调整所述次容器的面积；

绘制调整后的次容器，将所述次容器所包含的待显示网页的元素在屏幕上显示。

2.根据权利要求1所述的方法，其特征在于，所述根据排版后的树状节点定位主容器，包括：

判断当前节点的上级节点是否为空或者为主容器；

当所述当前节点的上级节点为空或者为主容器时，判断当前节点的高度是否为固定值；

当所述当前节点高度不是固定值时，如果上级节点为空，将当前节点定位为主容器；

如果所述当前节点的上级节点为主容器，当所述当前节点的宽度大于等于根节点宽度的50%，且大于等于其上级节点宽度的90%，将所述当前节点定位为主容器。

3.根据权利要求2所述的方法，其特征在于，所述定位所述主容器内包含的至少一个次容器，包括：

判断所述当前节点的上级节点是否为主容器；

当所述上级节点为主容器，如果所述当前节点的宽度为其上级节点宽度的20%到80%，将所述当前节点定位为次容器。

4.根据权利要求1所述的方法，其特征在于，所述调整所述次容器的面积，包括：

计算每个所述次容器的面积，并得到所有次容器面积的平均值；

比较每个所述次容器的面积与所述平均值的大小；

若所述次容器的面积大于所述平均值，将所述次容器按预设比例系数k进行放大，其中，所述k大于1；同时，将其他次容器进行相应缩小，以保持次容器的总宽度不变。

5.根据权利要求1至4中任一权项所述的方法，其特征在于，所述方法还包括：

接收切换命令，以放大显示目标次容器的内容；

生成所述目标次容器的缩放比例系数u；

将所述目标次容器的面积进行u倍调整，并对应调整其他次容器的面积，以保持次容器的总宽度不变；

绘制调整后的次容器，将所述次容器的元素在屏幕上进行显示。

6.根据权利要求5所述的方法，其特征在于，所述生成所述目标次容器的缩放比例系数，包括：

比较所述屏幕的宽度与所述主容器的宽度，取二者之中的最小值；

将所述最小值与所述预设比例系数k作乘法计算，乘法计算的结果除以所述目标次容器的宽度，得到第一缩放系数u1；将所述主容器的高度值除以所述目标次容器的高度值，得到第二缩放系数u2；

将所述u1和所述u2中的最小值确定为所述缩放比例系数u。

7.一种网页显示装置，其特征在于，所述装置包括：

获取单元，用于获取待显示网页的源代码；

解析单元，用于解析所述获取单元获取到的源代码形成树状节点；

排版单元，用于将所述解析单元解析形成的树状节点按照所述源代码的样式规范进行排版；

第一定位单元，用于根据所述排版单元排版后的树状节点定位主容器；

第二定位单元，用于定位所述主容器内的至少一个次容器，其中，每个所述次容器包含一部分所述待显示网页的元素；

第一调整单元，用于调整所述第二定位单元定位得到次容器的面积；

绘制单元，用于绘制所述第一调整单元调整后的次容器，将所述次容器所包含的待显示网页的元素在屏幕上显示。

8.根据权利要求7所述的装置，其特征在于，所述第一定位单元包括：第一判断单元和第二判断单元，其中，

所述第一判断单元，用于判断当前节点的上级节点是否为空或者其上级节点是否为主容器；

所述第二判断单元，用于当所述当前节点的上级节点为空或者为主容器时，判断当前节点的高度是否为固定值；

所述第一定位单元，具体用于当所述当前节点高度不是固定值时，如果上级节点为空，将当前节点定位为主容器；如果所述当前节点的上级节点为主容器，当所述当前节点的宽度大于等于根节点宽度的50%，且大于等于其上级节点宽度的90%，将所述当前节点定位为主容器。

9.根据权利要求8所述的装置，其特征在于，所述第二定位单元包括：第三判断单元，其中，

所述第三判断单元，用于判断所述当前节点的上级节点是否为主容器；

所述第二定位单元，具体用于当所述当前节点的上级节点为主容器时，如果所述当前节点的宽度为其上级节点宽度的20%到80%，将所述当前节点定位为次容器。

10.根据权利要求7所述的装置，其特征在于，所述第一调整单元包括：第一计算单元、第一比较单元和缩放单元，其中，

所述第一计算单元，用于计算每个所述次容器的面积，并得到所有次容器面积的平均值；

所述第一比较单元，用于比较所述第一计算单元计算得到的每个所述次容器的面积与所述平均值的大小；

所述缩放单元，用于若所述次容器的面积大于所述平均值，将所述次容器按预设比例系数k进行放大，其中，所述k大于1；同时，将其他次容器进行相应缩小，以保持次容器的总宽度不变。

11.根据权利要求7至10中任一权项所述装置，其特征在于，所述装置还包括：接收单元、生成单元和第二调整单元，其中，

所述接收单元，用于接收切换命令；

所述生成单元，用于生成所述目标次容器的缩放比例系数u；

所述第二调整单元，用于当所述生成单元生成缩放比例系数u后，将所述目标次容器的面积进行u倍调整，并对应调整其他次容器的面积，以保持次容器的总宽度不变；

所述绘制单元，还用于绘制所述第二调整单元调整后的次容器，将所述次容器的元素在屏幕上进行显示。

12.根据权利要求11所述的装置，其特征在于，所述生成单元包括：第二比较单元、第二计算单元和确定单元，其中，

所述第二比较单元，用于比较所述屏幕的宽度与所述主容器的宽度，取二者之中的最小值；

所述第二计算单元，具体用于将所述最小值与所述预设比例系数k作乘法计算，乘法计算的结果除以所述目标次容器的宽度，得到第一缩放系数u1；将所述主容器的高度值除以所述目标次容器的高度值，得到第二缩放系数u2；

所述确定单元，用于将所述第二计算单元计算得到的u1和u2中的最小值确定为所述缩放比例系数u。

Images