CN102663126B - 一种在移动终端中显示网页的方法及装置 - Google Patents

Abstract

本发明公开了一种在移动终端中显示网页的方法及装置，其中，所述方法包括，接收到通过移动终端访问网页的请求，根据所述请求向网页服务器获取所述网页对应的资源；对所述网页资源中包含的页面元素进行解析，解析过程中判断当前页面元素对应的标签是否影响排版，如果存在影响排版的标签，则对所述影响排版的标签进行处理；根据处理后的标签构造渲染树的节点，判断是否存在影响排版的层叠样式表CSS属性，如果存在影响排版的层叠样式表CSS属性，则去除影响排版的CSS属性，之后按照构造的渲染树对网页内容进行绘制并显示。通过本发明，能够从一定程度上保留一些应有的画面效果，保证网页显示的生动性。

Description

一种在移动终端中显示网页的方法及装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种在移动终端中显示网页的方法及装置。

背景技术

随着科技飞速发展，移动终端(如手机等)已经拥有了强大的处理能力，移动终端正在从简单的通话工具变为一个综合信息处理平台，尤其是利用移动终端浏览网页，已经成为人们获取信息的重要途径。

最初，为了能够在移动终端上浏览网页，使用了专门的协议-WAP(Wireless Application Protocol，无线应用协议)，网页制作者需要按照该协议制作专用于在移动终端上浏览的网页(这种网页一般是使用WML(Wireless Markup Language)语言来制作的，因此，一般可以简称为WML网页)。但是，随着用户需求的不断提升以及技术的发展，目前也能够在移动终端上浏览普通的HTML(Hypertext Markup Language，超文本标记语言)网页，也即因特网中普遍使用的基于HTML语言制作的网页。然而，这种HTML网页一般都是针对传统的具有较大显示屏的设备(例如台式电脑、笔记本电脑等)而设计的，而对于移动终端(如手机等)而言，由于其显示屏的尺寸比较小，因此，要想在移动终端中正常显示HTML网页，一般还需要预先对HTML网页进行处理，将其转换为类似WML网页的格式。在将HTML网页转换为WML网页的过程中，首先需要对页面元素进行窄排适配处理，也即，需要按照移动终端的屏幕宽度重新对HTML网页中的页面元素进行排版，使得每一行中显示的页面元素数目变少，从而使得在较小的显示屏中显示时，字体不会太小，同时，避免出现水平方向上的滚动条的现象，便于用户的浏览。然而现有技术在对页面进行窄排的过程中，为了避免出现内容溢出手机屏幕或者屏幕留白、重叠显示等现象，一般会将HTML网页中原有的为一些页面元素设计的CSS样式去掉。但是这样就会造成网页显示不生动，一些应有的画面效果消失。

发明内容

本发明提供了一种在移动终端中显示网页的方法与装置，能够从一定程度上保留一些应有的画面效果，保证网页显示的生动性。

本发明提供了如下方案：

一种在移动终端中显示网页的方法，包括：

接收到通过移动终端访问网页的请求，根据所述请求向网页服务器获取所述网页对应的资源；

对所述网页资源中包含的页面元素进行解析，解析过程中判断当前页面元素对应的标签是否影响排版，如果存在影响排版的标签，则对所述影响排版的标签进行处理；

根据处理后的标签构造渲染树的节点，判断是否存在影响排版的层叠样式表CSS属性，如果存在影响排版的层叠样式表CSS属性，则去除影响排版的CSS属性，之后按照构造的渲染树对网页内容进行绘制并显示。

其中，所述对所述影响排版的标签进行处理包括：

将影响排版的标签去掉，以便在根据处理后的标签构造渲染树的节点时，将该标签对应的页面元素作为普通文本处理。

其中，所述将影响排版的标签去掉包括：

如果所述当前正在解析的页面元素为普通卷动元素、下标元素或上标元素，则将这种页面元素的标签去掉。

其中，所述对所述影响排版的标签进行处理包括：

将当前页面元素去掉，以便在根据处理后的标签构造渲染树的节点时，不再生成该页面元素对应的节点。

其中，所述将当前页面元素去掉包括：

如果所述当前正在解析的页面元素为普通卷动元素、包含对象的元素、嵌入页面的元素、下标元素或上标元素，则将这种页面元素去掉。

其中，所述对所述影响排版的标签进行处理包括：

将影响排版的标签中定义的CSS属性值进行修改；

所述根据处理后的标签构造渲染树的节点包括：

利用修改后的CSS属性值为渲染树中该页面元素对应的节点的CSS属性进行赋值。

其中，所述将影响排版的标签中定义的CSS属性值进行修改包括：

当所述当前正在解析的页面元素为表格元素时，对表格元素及表格元素的内联元素的CSS值进行修改，以便所述表格元素能够自动换行；

或者，

当所述当前正在解析的页面元素为表单输入控件、下拉菜单/列表、文本域或内联框架元素，并且存在表示其宽度的绝对数值时，将所述绝对数值修改为相对数值；

或者，

当所述当前正在解析的页面元素为图像元素时，比较该图像元素的width值与移动终端的屏幕宽度值，如果所述width值大于移动终端的屏幕宽度值，则按照所述width值与移动终端的屏幕宽度之间的比例，等比例缩小所述width值；如果所述width值小于移动终端的屏幕宽度值，但大于移动终端的屏幕宽度值的二分之一，则将该图像元素的位置属性值修改为居中显示；

或者，

如果所述当前正在解析的页面元素为超链接元素，并且所述超链接元素中包含img标签以及文本，则为所述img标签加入边界属性值；

或者，

如果所述当前正在解析的页面元素为分区元素，则为所述分区元素加入边界属性值。

其中，所述将渲染树节点中包含的影响排版的CSS属性去掉包括：

将所述当前正在解析的页面元素包含的宽度高度的绝对属性、定位属性、背景图属性和/或与文本显示相关的属性去掉；

和/或，

将元素盒模型中的边框与填充属性去掉。

其中，如果将所述当前正在解析的页面元素的背景图去掉，则还包括：

修改所述页面元素中包含的文本的颜色属性值，以保证在去掉背景图之后所述文本的辨识度。

其中，所述修改所述页面元素中包含的文本的颜色属性值，包括：

如果页面元素内文本颜色是白色，则设置所述文本颜色为网页文本默认颜色；

或者，

如果网页元素内文本颜色不是白色，并且所述元素背景色不透明，则设置文本颜色为所述元素背景色具有预置色差值的颜色；

或者，

如果网页元素内文本颜色不是白色，并且所述元素背景色透明，则设置文本颜色为与此网页的主体元素的背景色具有预置色差值的颜色。

一种在移动终端中显示网页的装置，包括：

资源获取单元，用于接收到通过移动终端访问网页的请求，根据所述请求向网页服务器获取所述网页对应的资源；

标签处理单元，用于对所述网页资源中包含的页面元素进行解析，解析过程中，判断当前页面元素对应的标签是否影响排版，如果存在影响排版的标签，则对所述影响排版的标签进行处理；

渲染树构造单元，用于根据处理后的标签构造渲染树的节点，判断是否存在影响排版的层叠样式表CSS属性，如果存在影响排版的层叠样式表CSS属性，则去除影响排版的CSS属性，之后按照构造的渲染树对网页内容进行绘制并显示。

其中，所述标签处理单元包括：

标签去掉子单元，用于将影响排版的标签去掉，以便在根据处理后的标签构造渲染树的节点时，将该标签对应的页面元素作为普通文本处理。

其中，所述标签去掉子单元具体用于：如果所述当前正在解析的页面元素为普通卷动元素、下标元素或上标元素，则将这种页面元素的标签去掉。

其中，所述标签处理单元包括：

元素去掉子单元，用于将当前页面元素去掉，以便在根据处理后的标签构造渲染树的节点时，不再生成该页面元素对应的节点。

其中，所述元素去掉子单元具体用于：如果所述当前正在解析的页面元素为普通卷动元素、包含对象的元素、嵌入页面的元素、下标元素或上标元素，则将这种页面元素去掉。

其中，所述标签处理单元包括：

属性值修改子单元，用于将影响排版的标签中定义的CSS属性值进行修改；

所述渲染树构造单元还用于：

利用修改后的CSS属性值为渲染树中该页面元素对应的节点的CSS属性进行赋值。

其中，所述属性值修改子单元包括：

第一修改子单元，用于当所述当前正在解析的页面元素为表格元素时，对表格元素及表格元素的内联元素的CSS值进行修改，以便所述表格元素能够自动换行；

或者，

第二修改子单元，用于当所述当前正在解析的页面元素为表单输入控件、下拉菜单/列表、文本域或内联框架元素，并且存在表示其宽度的绝对数值时，将所述绝对数值修改为相对数值；

或者，

第三修改子单元，用于当所述当前正在解析的页面元素为图像元素时，比较该图像元素的width值与移动终端的屏幕宽度值，如果所述width值大于移动终端的屏幕宽度值，则按照所述width值与移动终端的屏幕宽度之间的比例，等比例缩小所述width值；如果所述width值小于移动终端的屏幕宽度值，但大于移动终端的屏幕宽度值的二分之一，则将该图像元素的位置属性值修改为居中显示；

或者，

第四修改子单元，用于如果所述当前正在解析的页面元素为超链接元素，并且所述超链接元素中包含img标签以及文本，则为所述img标签加入边界属性值；

或者，

第五修改子单元，用于如果所述当前正在解析的页面元素为分区元素，则为所述分区元素加入边界属性值。

其中，所述渲染树构造单元包括：

第一属性去掉子单元，用于将所述当前正在解析的页面元素包含的宽度高度的绝对属性、定位属性、背景图属性和/或与文本显示相关的属性去掉；

和/或，

第二属性去掉子单元，用于将元素盒模型中的边框与填充属性去掉。

其中，还包括：

文本颜色修改单元，用于如果将所述当前正在解析的页面元素的背景图去掉，修改所述页面元素中包含的文本的颜色属性值，以保证在去掉背景图之后所述文本的辨识度。

其中，所述文本颜色修改单元包括：

第一颜色修改子单元，用于如果页面元素内文本颜色是白色，则设置所述文本颜色为网页文本默认颜色；

或者，

第二颜色修改子单元，用于如果网页元素内文本颜色不是白色，并且所述元素背景色不透明，则设置文本颜色为所述元素背景色具有预置色差值的颜色；

或者，

第三颜色修改子单元，用于如果网页元素内文本颜色不是白色，并且所述元素背景色透明，则设置文本颜色为与此网页的主体元素的背景色具有预置色差值的颜色。

根据本发明提供的具体实施例，本发明达到了以下技术效果：如果当前页面元素对应的标签影响排版，则对影响排版的标签进行处理，以消除所述标签对排版的影响，通过对标签的处理可以避免标签对应的页面元素对排版的影响；根据处理后的标签构造渲染树的节点，并且，如果存在影响排版的层叠样式表CSS属性，则将所述影响排版的CSS属性去掉，以便按照构造的渲染树在移动终端中对网页内容进行绘制并显示，将影响排版的CSS属性去掉，可以避免CSS属性的设置而使得页面元素的显示效果影响排版。其中对标签的处理包括对标签对应的CSS属性的修改，例如将其宽度的绝对属性修改为相对属性，因此使得网页排版可以根据客户端屏幕大小来适配不同的客户端。同时，本发明实施例中只是将影响排版的标签CSS属性进行处理，以及去掉影响排版的CSS属性，而不用将为页面元素所设计的所有CSS样式去掉，因此，可以从一定程度上保留一些应有的画面效果，保证网页显示的生动性。

附图说明

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

图1是本发明实施例提供的方法的流程图；

图2是本发明实施例提供的第一装置的示意图；

图3是本发明实施例提供的第二装置的示意图；

图4是本发明实施例提供的第三装置的示意图；

图5是本发明实施例提供的第四装置的示意图。

具体实施方式

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

S101：接收到通过移动终端访问网页的请求，根据所述请求向网页服务器获取所述网页对应的资源；

首先需要说明的是，当前的网页浏览器大概分成两种类型：客户端直接嵌入浏览器和C/S(客户端/代理服务器)架构浏览器。其中，前者是直接通过浏览器访问网页，也即，浏览器在接收到用户访问某网页的请求之后，直接将该请求发送到网页服务器，获取网页服务器返回的网页数据后，在本地进行解析和渲染，最终进行显示；后者是将浏览器分为客户端和服务端两部分，其中客户端在用户终端上运行，服务端在远程服务器上运行，客户端在接收到用户访问网页的请求之后，首先将请求发送给自己的服务端，然后由服务端访问网页服务器，在获取到网页服务器返回的网页数据后，在服务端进行解析和渲染计算，然后通过私有协议将计算的结果发送给客户端，由客户端根据计算结果显示在用户终端上，相当于所有的交互都是在服务端的协助下完成的。本发明实施例可以适用于上述任何一种情况。

网页服务器在接受到移动终端，如手机，PAD(Personal DigitalAssistant，个人助理)等，发送的访问网页的http请求时，会返回所述的网页资源，但是现有的网页排版和显示大多数都是针对传统的PC(personalcomputer，个人电脑)显示屏，因此，通过移动终端访问网页时，需要对所述的网页内容进行窄排适配，否则会使得网页内容在移动终端中显示时出现文本内容溢出屏幕或者其它不适配的情况。移动终端在发送访问网页请求时，请求信息中可以包含其分辨率信息，因此，可以通过解析请求信息，根据移动终端的分辨率信息进行相应的窄排适配。另外，对于手机浏览器来说，也可以是服务器端预先保存各型号手机的分辨率信息，此时，只需获取手机的型号，根据各型号手机对应的分辨率信息进行相应的窄排适配。

S102：在对所述网页资源中包含的页面元素进行解析，并生成对应的渲染树节点的解析过程中，判断当前页面元素对应的标签是否影响排版，如果存在影响排版的标签，则对所述影响排版的标签进行处理，以消除所述标签对排版的影响；

为了便于理解此步骤，先简单介绍一下CSS(Cascading Style Sheet，层叠样式表单)。CSS是一种用来表现HTML(Hypertext Markup Language，超文本标记语言)或XML等文件式样的计算机语言，可以用来进行网页风格的设计。例如想要使链接字未点击时是蓝色的，当鼠标移动上去后变成红色且有下划线，这就是一种风格。此种风格的实现可以通过对相应元素的CSS属性的设置来实现。

目前利用CSS来控制HTML页面的显示效果有以下几种方式：

1)行内方式，可以直接对HTML标签适用style＝″″来实现。

2)内嵌方式，就是将CSS代码写在<head></head>之间，并用<style></style>进行申明。

3)链接方式，只需在<head></head>之间加上一个链接，将该链接的herf属性值设置为外部CSS文件名。这种方式实现了HTML文件和CSS文件的彻底分离，使得前期制作和后期维护都十分方便。如果要保持页面风格统一，只要把这些公共的CSS文件单独保存成一个文件，其它的页面就可以分别调用需要的CSS文件，如需要改变网页风格，只需要修改公共的CSS文件就可以实现。

4)导入方式，导入方式和链接样式比较相似，采用improt方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分。

由于通过链接方式来实现CSS对HTML页面显示效果的控制，操作方便，同时也便于管理和维护，因此，目前多数网站都使用链接方式来控制页面显示效果。

另外，为了便于理解，再简单介绍一下渲染引擎的基本工作流程。渲染引擎的基本工作流程为：构建Dom树、构建Render树、布局Render树、绘制Render树。渲染引擎获取到HTML页面资源后，开始解析HTML页面内容，并将其中的标签转化为Dom树节点，并构建Dom树。接着它开始解析CSS文件及style标签中的样式信息，这些获取到的样式信息和HTML页面中的可见性指令将被用来构建Render树。Render树是对Dom树的更进一步的描述，由元素显示序列中的可见元素组成，它是文档的可视化表示，构建这棵树是为了以正确的顺序绘制文档内容。渲染对象和Dom元素相对应，但这种对应关系不一定是一对一的，不可见的Dom元素不会被插入渲染树，例如head元素。另外，display属性为none的元素也不会在渲染树中出现。处理html和body标签将构建渲染树的根，这个根渲染对象对应被css规范称为containing block的元素——包含了其他所有块元素的顶级块元素。它的大小就是viewport——浏览器窗口的显示区域，Firefox称它为viewPortFrame，webkit称为RenderView，这个就是文档所指向的渲染对象，树中其他的部分都将作为一个插入的Dom节点被创建。

在渲染树中，每个节点(渲染对象)都有其对应的样式，因此创建渲染树需要计算出每个渲染对象的可视属性，这可以通过计算每个元素的样式属性得到。样式包括各种来源的样式表，行内样式元素及html中的可视化属性(例如bgcolor)，可视化属性转化为css样式属性。样式表来源于浏览器默认样式表，及页面作者和用户提供的样式表——有些样式是浏览器用户提供的(浏览器允许用户定义喜欢的样式，例如，在Firefox中，可以通过在FirefoxProfile目录下放置样式表实现。

本发明实施例就是在渲染引擎生成渲染树阶段，通过修改页面元素的CSS属性，实现了计算出的页面元素的样式可以适配在不同尺寸的移动终端屏幕上的效果。具体修改页面元素的属性是针对webkit中的类RenderStyle来进行的。因为此类中各成员即对应CSS的各种样式。下面进行详细说明。

在浏览器渲染引擎构建渲染树阶段，将会获取页面元素的CSS样式信息。但是，此时获取的CSS样式信息并不能直接套用到移动终端，因为现有的网页主要是针对PC显示屏，因此其中的一些页面元素的CSS样式并不适合移动终端显示，所以，在获取到页面元素的CSS样式信息后，如果当前页面元素对应的标签影响排版，则需要对影响排版的标签进行处理，以消除所述标签对排版的影响。其中，所述的影响排版的标签包括表格及相关的子标签(包括表格头、表格体、表格行)、表单输入控件、下拉菜单/列表、文本域、图像、超链接、分区，普通卷动、包含对象、嵌入元素、下标、上标，内联框架等等。具体在对这些标签进行处理时，可以针对不同的情况进行不同的处理，例如，其中一种处理方式可以是：针对一些特殊的标签，在对影响排版的标签进行处理时，还可以采用直接将这种影响排版的标签去掉的方式，也就是说，保留当前的页面元素，但是将原来为该元素设定的标签去掉，使得该元素不再显示成原来的标签所设定的样式。具体去掉的方式可以是，将该标签的disply属性设置为none。例如：

(1)普通卷动(marquee)

Marquee标签是用来控制字体滚动的。因为部分手机客户端不支持marquee的滚动功能，或者支持的效果不太好，为了不影响排版效果，可以通过处理该标签的显示属性，去掉该标签。去掉标签之后，标签内的内容在网页中显示时将不再有滚动的效果。

(2)下标(sub)、上标(sup)

Sub用来定义下标文本，包含在标签内的文本在基线以下按正常文本高度的一半来显示。sup用来定义上标文本，包含在标签内的文本在基线以上按正常文本高度的一半来显示。这两个角标元素会造成整体排版不整齐，元素布局混乱，所以如果页面中存在以上标签，可以将标签去掉。去掉标签后，角标标签内的内容可以按照普通文本的样式显示，即与普通文本处于同一基线，字体信息一致。

另外，对影响排版的标签进行处理还可以是将标签对应的当前页面元素去掉。例如，如果当前正在解析的页面元素为前述普通卷动元素、下标元素或上标元素，则直接将这种页面元素去掉。也就是说，在渲染树中不再存在该页面元素对应的节点，进而在网页中也就不会再绘制并显示该页面元素，显然，也就可以消除该页面元素对排版的影响。

当然，具体实现时，除了上述普通卷动元素、下标元素或上标元素可以直接去掉之外，包含对象(object)、嵌入(embed)的页面元素也可以直接去掉。其中，object和embed嵌入元素都是用来向页面中添加多媒体文件，如音频、视频、flash等。object标签是用于windows平台的IE浏览器的，而embed是用于windows和Macintosh平台下的Netscape Navigator浏览器以及Macintosh平台下的IE浏览器。一般为了确保大多数浏览器能正常显示flash，需要把embed标签嵌套放在object标签内。支持Activex控件的浏览器将会忽略object标签内的embed标签。Netscape和使用插件的IE浏览器将只读取embed标签而不会识别object标签。例如，<objectclassid＝″clsid：F08DF954-8592-11D1-B16A-00C0F0283628″id＝″Slider1″width＝″100″height＝″50″></object>，其中，classid用于定义嵌入网页中的类的ID值，此属性可用来指定浏览器中包含的对象的位置，通常是一个Java类。但是目前大多数的手机浏览器不支持flash动画，如果页面中包含上述的两个元素，为了不影响排版效果，则可以去掉这种页面元素。将这种页面元素去掉后，网页内将不再显示具体的视频、音频、flash等元素。

另外，对标签的处理还可以是将影响排版的标签中定义的CSS属性值进行修改，也就是说，保留当前的页面元素及其标签，但需要对标签中为该元素定义的属性值进行修改，以使得该标签不再影响排版。例如，具体实现时可以针对以下各类元素的标签分别进行属性值的修改：

(1)表格(table)及相应的内联元素(th、td、tr)

网页设计者经常会使用表格来使得页面格局整齐有序，一个表格内通常会有多列多行，而行宽通常是适应PC显示屏幕的，因此对于移动终端显示屏幕来说，就会出现表格行宽大于屏幕宽度的情况，由于表格单元无法自动换行，进而使得部分表格内容溢出屏幕。因此，如果当前正在解析的页面元素为表格元素时，可以通过CSS选择器对表格元素及表格元素的内联元素的层叠样式表属性进行相应的修改，使得表格内容可以自动换行，从而适应不同尺寸大小的屏幕。

(2)表单输入控件(input)、下拉菜单/列表(select)、文本域(textarea)或内联框架(iframe)

表单输入控件(Input)表示Form表单的一种输入对象，其又随Type类型的不同而分为文本输入框，密码输入框，单选/复选框，提交/重置按钮等。下拉菜单/列表(Select)元素可创建单选或多选菜单。文本域(textarea)是定义多行的文本输入控件，文本区中可容纳无限数量的文本。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

如果当前正在解析的页面元素为以上所述的任一或多个元素，并且元素的宽度属性为绝对数值时，则将宽度修改为相对宽度，其属性值为100％，使得其内容可以占满手机屏幕宽度。因为绝对值宽度可能会带来屏幕留白或者折行问题，给排版造成影响。例如，在默认的情况下，iframe的宽度是300px，当移动终端屏幕宽度大于300px的时候，就会出现屏幕右侧大幅空白，因此，可以将iframe的宽度属性修改为相对宽度，属性值为100％。此时iframe内文本内容可以始终占满屏幕。

(3)图像(img)

Img元素用来在网页中插入一幅图片，该元素的width属性，是用于指定图片插入网页后显示的宽度，该宽度可能会影响到排版，因此，如果当前正在解析的页面元素为图像元素时也需要进行修改。具体的，可以首先获取到图像元素的width值，将其与移动终端的屏幕宽度值做对比，当width值大于移动终端的屏幕宽度时，将width值进行与屏幕大小等比例的缩放，具体操作可以为setstyle(Length(Auto))，使其能根据屏幕大小正常显示。如果图片宽度没有超出屏幕宽度，但是超过屏幕宽度的二分之一，可以将其位置属性值修改为居中显示，使其能在移动终端屏幕上居中显示。

(4)超链接(a)

在a标签中，可以插入img标签，此时img标签中插入的图片就成为图像超链接，点击图片的任何一部分都可以打开该超链接。为了避免该图片与标签对应的其他文本在显示时相重叠，为所述img标签加入边界属性值(margin)，同时为了避免两个相邻的超链接连接到一起，可以为a标签设置边界属性。margin这个简写属性可以设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

(5)分区(div)

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。如果当前正在解析的页面元素为分区元素，为了避免父子和兄弟分区之间的边框重叠，可以为每一个div元素设置margin属性。

需要说明的是，对于移动终端所要访问的网页来说，不一定会包含全部上述所说的影响排版的标签，有可能只包含其中的一个或多个。因此，在具体实施的过程中，可以根据不同页面的实际情况，对页面内出现的一个或多个上述影响排版的标签进行处理。

S103：根据处理后的标签构造渲染树的节点，并且，如果判断是否存在影响排版的层叠样式表CSS属性，如果存在影响排版的层叠样式表CSS属性，则去除将所述影响排版的CSS属性去掉，以便之后按照构造的渲染树在移动终端中对网页内容进行绘制并显示。

渲染引擎在生成渲染树时，对于每个节点都需要计算其对应的样式，也即需要将获取的CSS样式属性值应用到对应的节点。由于有些页面元素的CSS属性也会影响到排版，因此在此计算样式的过程中，需要将这些相应的属性去掉，不将其应用到对应的节点上，以消除该属性对排版的影响。其中，这些影响排版的属性可以包括：宽高的绝对值属性、元素盒模型中的边框与填充属性、设置背景图的属性、与文本显示相关的属性。在本实施例中对这些属性的处理具体为：

(1)宽高的绝对属性

对于绝对值给定的宽高属性(width、min-width、max-width、height、min-height、max-height、size)，会使页面内容在适配手机屏幕时出现不成比例或者是溢出手机屏幕的现象。例如，原网页中某些元素的CSS属性中宽度值为给定的绝对值，假设其宽度属性值为width：320px，由于其给定的是绝对值，因此，对于任何浏览器在解析后都将其理解为宽度是320px，那么对于屏幕宽度小于320px的显示器来说，就会出现内容溢出屏幕的现象。因此为了不影响排版，需将以上所述的宽高相关的绝对值属性过滤掉。

(2)元素盒模型中的边界(margin)与填充(padding)属性

CSS会将所有的网页元素都看做是一个矩形框，这些框由元素的内容、填充、边框(border)和边界组成。填充是元素的内容与边框之间的空间。边界是一个元素与另一个元素之间的间隔。元素的边界和填充属性会造成网页中文本内容折行和屏幕遗留空白的问题，因此需要将这些属性过滤掉。

(3)定位属性

与元素的位置相关的属性(position，center，align，left，right，bottom，top，text-align)，会使得页面元素在与手机屏幕相适配的过程出现位置显示不恰当或者溢出手机屏幕的现象，给排版造成很大问题，因此需要将这些属性过滤掉。

(4)背景图属性

背景图(background-image)属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

在对手机屏幕适配的过程中，由于无法处理大背景图的切割和小背景图的重复，因此将background-image属性过滤掉。由于去掉了背景图，因此会造成颜色与背景色相同的文本无法显示，所以还可以重新设置文本的颜色属性值，以保证在去掉背景图之后所述文本的辨识度。具体实施时可以是：如果页面元素内文本颜色是白色，则设置文本颜色为网页文本默认颜色；如果网页元素内文本颜色不是白色，并且元素背景色不透明，则设置文本颜色为与元素背景色具有一定色差值的颜色；如果网页元素内文本颜色不是白色，并且元素的背景色透明，则设置文本颜色为与此网页的主体元素(body元素)的背景色具有一定色差值的颜色。其中，具体的色差值可以是根据经验值等预先设置的。

(5)与文本显示相关的属性

文本自动换行(word-wrap)属性用来控制当前行超过指定容器的边界时是否断开转行，默认值为允许内容顶开指定的容器边界，如果选择属性值为break-word，则内容将在边界内换行。text-indent属性用来控制文本块中首行文字缩进。这些与文本显示相关的属性都会造成网页中文字的折行和遗留空白的问题，因此需要过滤掉这些属性。

具体在去掉影响排版的属性时，可以如下进行：对当前页面元素的所有属性进行轮询，轮询到某个需要去掉的属性时，直接进行回车操作，而不再为该属性赋予任何的属性值，这样就相当于去掉了该属性。

经过对页面元素对应的标签进行处理后，由于去掉了影响排版的标签及页面元素或者重新设置了标签的CSS属性，同时对页面元素的影响排版的CSS属性进行了过滤，因此渲染及布局之后，移动终端所请求的网页内容就可以正常显示在其屏幕上，而不会出现不适配的情况。

另外，为了使得html页面能够在手机上正常显示，现有技术还有如下实现方式：通过WAP转码服务器将HTML页面转换为WAP格式，由具备完整WAP解析能力的手机客户端完成排版和屏幕绘制，但是这样做使得原页面的JAVASCRIPT被过滤，原页面上依赖浏览器引擎解析JAVASCRIPT后才能支持的功能缺失。而本发明实施例中是对原HTML页面中的元素属性进行相应的适配处理，无需对原HTML页面进行精简。因此，原网页的JAVASCRIPT可以全部保留，无需做过滤处理，从而可以保证JAVASCRIPT的所有效果都可以在移动终端屏幕显示。

与本发明实施例提供的在移动终端中显示网页的方法相对应，本发明实施例还提供了一种在移动终端中显示网页的装置，参见图2，该装置可以包括：

资源获取单元201，用于接收到通过移动终端访问网页的请求，根据所述请求向网页服务器获取所述网页对应的资源；

标签处理单元202，用于在对所述网页资源中包含的页面元素进行解析，解析过程中，判断当前页面元素对应的标签是否影响排版，如果存在影响排版的标签，则对所述影响排版的标签进行处理，以消除所述标签对排版的影响；

渲染树构造单元203，用于根据处理后的标签构造渲染树的节点，判断是否存在影响排版的层叠样式表CSS属性，如果存在影响排版的层叠样式表CSS属性，则去除影响排版的CSS属性，之后按照构造的渲染树在移动终端中对网页内容进行绘制并显示。

具体实现时，针对一些特殊的标签，参见图3，标签处理单元202可以包括：

标签去掉子单元2021，用于将影响排版的标签去掉，以便在根据处理后的标签构造渲染树的节点时，将该标签对应的页面元素作为普通文本处理。

其中，标签去掉子单元具体用于：如果所述当前正在解析的页面元素为普通卷动元素、下标元素或上标元素，则将这种页面元素的标签去掉。

或者，参见图4，标签处理单元202也可以包括：

元素去掉子单元2022，用于将当前页面元素去掉，以便在根据处理后的标签构造渲染树的节点时，不再生成该页面元素对应的节点。

其中，元素去掉子单元具体可以用于：如果所述当前正在解析的页面元素为普通卷动元素、包含对象的元素、嵌入页面的元素、下标元素或上标元素，则将这种页面元素去掉。

再者，参见图5，标签处理单元202还可以包括：

属性值修改子单元2023，用于将影响排版的标签中定义的CSS属性值进行修改；

相应的，渲染树构造单元203还可以用于：

利用修改后的CSS属性值为渲染树中该页面元素对应的节点的CSS属性进行赋值。

其中，所述属性值修改子单元具体可以包括：

第一修改子单元，用于当所述当前正在解析的页面元素为表格元素时，对表格元素及表格元素的内联元素的CSS值进行修改，以便所述表格元素能够自动换行；

或者，

第二修改子单元，用于当所述当前正在解析的页面元素为表单输入控件、下拉菜单/列表、文本域或内联框架元素，并且存在表示其宽度的绝对数值时，将所述绝对数值修改为相对数值；

或者，

第三修改子单元，用于当所述当前正在解析的页面元素为图像元素时，比较该图像元素的width值与移动终端的屏幕宽度值，如果所述width值大于移动终端的屏幕宽度值，则按照所述wid th值与移动终端的屏幕宽度之间的比例，等比例缩小所述width值；如果所述width值小于移动终端的屏幕宽度值，但大于移动终端的屏幕宽度值的二分之一，则将该图像元素的位置属性值修改为居中显示；

或者，

第四修改子单元，用于如果所述当前正在解析的页面元素为超链接元素，并且所述超链接元素中包含img标签以及文本，则为所述img标签加入边界属性值；

或者，

第五修改子单元，用于如果所述当前正在解析的页面元素为分区元素，则为所述分区元素加入边界属性值。

在实际应用中，渲染树构造单元203可以包括：

第一属性去掉子单元，用于将所述当前正在解析的页面元素包含的宽度高度的绝对属性、定位属性、背景图属性和/或与文本显示相关的属性去掉；

和/或，

第二属性去掉子单元，用于将元素盒模型中的边框与填充属性去掉。

其中，为了保证文本的可辨识度，该装置还可以包括：

文本颜色修改单元，用于如果将所述当前正在解析的页面元素的背景图去掉，修改所述页面元素中包含的文本的颜色属性值，以保证在去掉背景图之后所述文本的辨识度。

其中，文本颜色修改单元具体可以包括：

第一颜色修改子单元，用于如果页面元素内文本颜色是白色，则设置所述文本颜色为网页文本默认颜色；

或者，

第二颜色修改子单元，用于如果网页元素内文本颜色不是白色，并且所述元素背景色不透明，则设置文本颜色为所述元素背景色具有预置色差值的颜色；

或者，

第三颜色修改子单元，用于如果网页元素内文本颜色不是白色，并且所述元素背景色透明，则设置文本颜色为与此网页的主体元素的背景色具有预置色差值的颜色。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的装置及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上对本发明所提供的在移动终端中显示网页的方法及装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本发明的限制。

Claims (18)

1.一种在移动终端中显示网页的方法，其特征在于，包括：

接收到通过移动终端访问网页的请求，根据所述请求向网页服务器获取所述网页对应的资源；

对所述网页资源中包含的页面元素进行解析，在解析并生成对应的渲染树节点的过程中判断当前页面元素对应的标签是否影响排版，如果存在影响排版的标签，则对所述影响排版的标签进行处理；其中，将影响排版的标签中定义的CSS属性值进行修改；

根据处理后的标签构造渲染树的节点，判断是否存在影响排版的层叠样式表CSS属性，如果存在影响排版的层叠样式表CSS属性，则去除影响排版的CSS属性，之后按照构造的渲染树对网页内容进行绘制并显示，其中，根据处理后的标签构造渲染树的节点包括：利用修改后的CSS属性值为渲染树中该页面元素对应的节点的CSS属性进行赋值。

2.根据权利要求1所述的方法，其特征在于，所述对所述影响排版的标签进行处理包括：

将影响排版的标签去掉，以便在根据处理后的标签构造渲染树的节点时，将该标签对应的页面元素作为普通文本处理。

3.根据权利要求2所述的方法，其特征在于，所述将影响排版的标签去掉包括：

如果当前正在解析的页面元素为普通卷动元素、下标元素或上标元素，则将这种页面元素的标签去掉。

4.根据权利要求1所述的方法，其特征在于，所述对所述影响排版的标签进行处理包括：

将当前页面元素去掉，以便在根据处理后的标签构造渲染树的节点时，不再生成该页面元素对应的节点。

5.根据权利要求4所述的方法，其特征在于，所述将当前页面元素去掉包括：

如果当前正在解析的页面元素为普通卷动元素、包含对象的元素、嵌入页面的元素、下标元素或上标元素，则将这种页面元素去掉。

6.根据权利要求1所述的方法，其特征在于，所述将影响排版的标签中定义的CSS属性值进行修改包括：

当当前正在解析的页面元素为表格元素时，对表格元素及表格元素的内联元素的CSS值进行修改，以便所述表格元素能够自动换行；

或者，

当当前正在解析的页面元素为表单输入控件、下拉菜单/列表、文本域或内联框架元素，并且存在表示其宽度的绝对数值时，将所述绝对数值修改为相对数值；

或者，

当当前正在解析的页面元素为图像元素时，比较该图像元素的width值与移动终端的屏幕宽度值，如果所述width值大于移动终端的屏幕宽度值，则按照所述width值与移动终端的屏幕宽度之间的比例，等比例缩小所述width值；如果所述width值小于移动终端的屏幕宽度值，但大于移动终端的屏幕宽度值的二分之一，则将该图像元素的位置属性值修改为居中显示；

或者，

如果当前正在解析的页面元素为超链接元素，并且所述超链接元素中包含img标签以及文本，则为所述img标签加入边界属性值；

或者，

如果当前正在解析的页面元素为分区元素，则为所述分区元素加入边界属性值。

7.根据权利要求1所述的方法，所述去除影响排版的CSS属性包括：

将当前正在解析的页面元素包含的宽度高度的绝对属性、定位属性、背景图属性和/或与文本显示相关的属性去掉；

和/或，

将元素盒模型中的边框与填充属性去掉。

8.根据权利要求7所述的方法，其特征在于，如果将当前正在解析的页面元素的背景图去掉，则还包括：

修改所述页面元素中包含的文本的颜色属性值，以保证在去掉背景图之后所述文本的辨识度。

9.根据权利要求8所述的方法，其特征在于，所述修改所述页面元素中包含的文本的颜色属性值，包括：

如果页面元素内文本颜色是白色,则设置所述文本颜色为网页文本默认颜色；

或者，

如果网页元素内文本颜色不是白色，并且所述元素背景色不透明，则设置文本颜色为所述元素背景色具有预置色差值的颜色；

或者，

如果网页元素内文本颜色不是白色，并且所述元素背景色透明，则设置文本颜色为与此网页的主体元素的背景色具有预置色差值的颜色。

10.一种在移动终端中显示网页的装置，其特征在于，包括：

资源获取单元，用于接收到通过移动终端访问网页的请求，根据所述请求向网页服务器获取所述网页对应的资源；

标签处理单元，用于对所述网页资源中包含的页面元素进行解析，在解析并生成对应的渲染树节点的过程中，判断当前页面元素对应的标签是否影响排版，如果存在影响排版的标签，则对所述影响排版的标签进行处理；其中，标签处理单元包括属性值修改子单元，用于将影响排版的标签中定义的CSS属性值进行修改；

渲染树构造单元，用于根据处理后的标签构造渲染树的节点，判断是否存在影响排版的层叠样式表CSS属性，如果存在影响排版的层叠样式表CSS属性，则去除影响排版的CSS属性，之后按照构造的渲染树对网页内容进行绘制并显示，其中，渲染树构造单元具体用于：利用修改后的CSS属性值为渲染树中该页面元素对应的节点的CSS属性进行赋值。

11.根据权利要求10所述的装置，其特征在于，所述标签处理单元包括：

标签去掉子单元，用于将影响排版的标签去掉，以便在根据处理后的标签构造渲染树的节点时，将该标签对应的页面元素作为普通文本处理。

12.根据权利要求11所述的装置，其特征在于，所述标签去掉子单元具体用于：如果当前正在解析的页面元素为普通卷动元素、下标元素或上标元素，则将这种页面元素的标签去掉。

13.根据权利要求10所述的装置，其特征在于，所述标签处理单元包括：

元素去掉子单元，用于将当前页面元素去掉，以便在根据处理后的标签构造渲染树的节点时，不再生成该页面元素对应的节点。

14.根据权利要求13所述的装置，其特征在于，所述元素去掉子单元具体用于：如果当前正在解析的页面元素为普通卷动元素、包含对象的元素、嵌入页面的元素、下标元素或上标元素，则将这种页面元素去掉。

15.根据权利要求10所述的装置，其特征在于，所述属性值修改子单元包括：

第一修改子单元，用于当当前正在解析的页面元素为表格元素时，对表格元素及表格元素的内联元素的CSS值进行修改，以便所述表格元素能够自动换行；

或者，

第二修改子单元，用于当当前正在解析的页面元素为表单输入控件、下拉菜单/列表、文本域或内联框架元素，并且存在表示其宽度的绝对数值时，将所述绝对数值修改为相对数值；

或者，

第三修改子单元，用于当当前正在解析的页面元素为图像元素时，比较该图像元素的width值与移动终端的屏幕宽度值，如果所述width值大于移动终端的屏幕宽度值，则按照所述width值与移动终端的屏幕宽度之间的比例，等比例缩小所述width值；如果所述width值小于移动终端的屏幕宽度值，但大于移动终端的屏幕宽度值的二分之一，则将该图像元素的位置属性值修改为居中显示；

或者，

第四修改子单元，用于如果当前正在解析的页面元素为超链接元素，并且所述超链接元素中包含img标签以及文本，则为所述img标签加入边界属性值；

或者，

第五修改子单元，用于如果当前正在解析的页面元素为分区元素，则为所述分区元素加入边界属性值。

16.根据权利要求10所述的装置，所述渲染树构造单元包括：

第一属性去掉子单元，用于将当前正在解析的页面元素包含的宽度高度的绝对属性、定位属性、背景图属性和/或与文本显示相关的属性去掉；

和/或，

第二属性去掉子单元，用于将元素盒模型中的边框与填充属性去掉。

17.根据权利要求16所述的装置，其特征在于，还包括：

文本颜色修改单元，用于如果将当前正在解析的页面元素的背景图去掉，修改所述页面元素中包含的文本的颜色属性值，以保证在去掉背景图之后所述文本的辨识度。

18.根据权利要求17所述的装置，其特征在于，所述文本颜色修改单元包括：

第一颜色修改子单元，用于如果页面元素内文本颜色是白色,则设置所述文本颜色为网页文本默认颜色；

或者，

第二颜色修改子单元，用于如果网页元素内文本颜色不是白色，并且所述元素背景色不透明，则设置文本颜色为所述元素背景色具有预置色差值的颜色；

或者，

第三颜色修改子单元，用于如果网页元素内文本颜色不是白色，并且所述元素背景色透明，则设置文本颜色为与此网页的主体元素的背景色具有预置色差值的颜色。