CN101833586A - 一种html小屏幕自适应排版方法及排版服务器 - Google Patents

Abstract

本发明实施例提供了一种HTML小屏幕自适应排版方法，包括：获取客户端发出的网页资源获取请求，所述网页数据获取请求包括目标网页地址和客户端的分辨率信息；根据网页数据获取请求中的目标网页地址从目标网络服务器获取网页资源；根据所述客户端的分辨率信息对网页资源进行排版，包括对网页资源中的HTML元素进行过滤和转换以及根据所述客户端的分辨率信息设置网页资源的网页排版宽度；将经过排版的网页资源发送给客户端。相应地本发明实施例还提供了一种排版服务器。实施本发明，可以在最大限度保留原页面除布局之外的资源样式和充分利用客户端显示资源的前提下，使得网页资源适合小屏幕显示。

Description

一种HTML小屏幕自适应排版方法及排版服务器

技术领域

本发明涉及通信领域，尤其涉及一种HTML小屏幕自适应排版方法及排版服务器。

背景技术

目前解决在小屏幕嵌入式设备上浏览Web网页的方法有如下三种：

第一种方法，依据客户端浏览器类型，将超文本标记语言(Hyper TextMark-up Language，HTML)文件转换成无线标记语言(Wireless MarkupLanguage，WML)或者基于web2.0的可扩展超文本标记语言(eXtensible HyperText Mark-up Language Mobile Profile，XHTML-MP)。该方法通常是对HTML元素按照对应关系转换成WAP标记语言元素，然后通过浏览器引擎排版以适应嵌入式设备的小屏幕。该方法的缺点是在HTML到WML或XHTML-MP的转换过程中无法准确有效地对HTML中样式单信息进行转换，通常的处理方式是过滤掉这些样式信息。这样出来的视觉效果丝毫没有保留原有页面的视觉效果，如背景图片和颜色，字体颜色等，表现得单调乏味。

第二种方法，使用缩放功能来在设备上的小屏幕显示HTML页面。这种方法首先将整个页面缩小至屏幕尺寸大小，当用户选择某一区域时，将该区域放大至充满整个屏幕以显示页面细节。缩放可能是一种查看复杂网页全貌同时也能放大网页某些部分的方法。该方法的缺点是当网页缩小时，其内容可能完全不可识别。此外，当具有固定宽度的文本必要显示的屏幕更宽时，为浏览信息，必须使用滚动条来水平滚动。

第三种方法，依据网页类型对其进行分类。对相同类型的网页采用同一种模板进行匹配转换。经过这样转换后的网页，通常能基本保留原有网页的视觉效果，也能适应嵌入式设备的小屏幕。该方法的缺点是对各种网络服务器网页的分类工作基本上是由人工完成，这样的统计工作非常繁琐，任务量大。而且无法实时对网络服务器网页样式的改变做出更新。

发明内容

有鉴于此，本发明提供了一种HTML小屏幕自适应排版方法及排版服务器，实现在最大限度保留原页面除布局之外的资源样式和充分利用屏幕空间的前提下，自适应的依据客户端分辨率大小来重新排版HTML页面元素，使得用户在浏览网页的时候操作方便、页面美观大方。

本发明实施例提供了一种HTML小屏幕自适应排版方法，该方法包括：

获取客户端发出的网页资源获取请求，所述网页数据获取请求包括目标网页地址和客户端的分辨率信息；

根据网页数据获取请求中的目标网页地址从目标网络服务器获取网页资源；

根据所述客户端的分辨率信息对网页资源进行排版，包括对网页资源中的HTML元素进行过滤和转换以及根据所述客户端的分辨率信息设置网页资源的网页排版宽度；

将经过排版的网页资源发送给客户端。

相应地本发明实施例提供了一种排版服务器，该排版服务器包括：

网页请求获取单元，用于获取客户端发出的网页资源获取请求，所述网页数据获取请求包括目标网页地址和客户端的分辨率信息；

网页资源获取单元，用于根据网页数据获取请求中的目标网页地址从目标网络服务器获取网页资源；

自适应排版单元，用于根据所述客户端的分辨率信息对网页资源进行排版，包括对网页资源中的HTML元素进行过滤和转换以及根据所述客户端的分辨率信息设置网页资源的网页排版宽度；

发送单元，用于将经过排版的网页资源发送给客户端。

本发明实施例通过排版服务器获取客户端的分辨率信息，对从网络服务器获取到的网页资源进行自适应排版，将经过自适应排版后的网页资源发送给客户端，从而实现了在最大限度保留原页面除布局之外的资源样式(如字体大小、字体颜色、背景图片和颜色等)和充分利用客户端显示资源的前提下，使得网页资源适合小屏幕显示。

附图说明

图1为本发明实施例中的排版系统的组成结构示意图；

图2为本发明实施例中的排版服务器的组成结构示意图；

图3为本发明实施例中一种HTML小屏幕自适应排版方法的流程示意图。

具体实施方式

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

图1为本发明实施例中的排版系统的组成结构示意图，该排版系统包括网络服务器10、排版服务器20以及客户端30，其中：

该客户端为小屏幕客户端，例如可以为手机、个人助理(Personal DigitalAssistant，PDA)等移动终端。客户端用于向代理服务器发送网页资源获取请求，该请求可以为超文本传输协议(Hyper Text Transfer Protocol，HTTP)的get请求。所述网页资源获取请求可以包括目标网页地址和客户端自身的分辨率信息，所述分辨率信息可以为客户端的显示区域大小或显示分辨率信息，可以在该网页资源获取请求的头部(head)信息中携带所述分辨率信息，例如(240*400)或(320*480)即表示该客户端240×400像素或320×480像素的分辨率。

排版服务器20获取到客户端30发出的网页资源获取请求后，根据其中包含的目标网页地址从网络服务器10获取网页资源，并根据客户端30的分辨率信息对获取到的网页资源进行自适应排版，将排版后得到的网页资源发送至客户端30。

图2为本发明实施例中的排版服务器的组成结构示意图，该排版服务器可以包括：网页请求获取单元210、网页资源获取单元220、自适应排版单元230以及发送单元240，其中：

网页请求获取单元210用于获取客户端发出的网页资源获取请求，所述网页数据获取请求包括目标网页地址和客户端的分辨率信息；具体地，所述分辨率信息可以为客户端的显示分辨率信息或显示区域大小，可以在该网页资源获取请求的头部(head)信息中携带所述分辨率信息，例如(240*320)或(128*160)即表示该客户端为240×320像素或128×160像素的分辨率。进一步地，所述网页数据获取请求还可以包括客户端的分页要求信息，该分页要求信息可以为客户端对下载的网页资源的分页大小的设置。

网页资源获取单元220用于根据网页请求获取单元210获取到的网页数据获取请求中的目标网页地址从目标网络服务器获取网页资源；

自适应排版单元230用于根据所述客户端的分辨率信息以及显示分页大小对网页资源进行排版，包括对网页资源中的HTML元素进行过滤和转换以及根据所述客户端的分辨率信息设置网页资源的网页排版宽度；

进一步地所述自适应排版单元230可以包括：

换行符过滤模块，用于过滤所述网页资源中的换行符；页面中的换行符BR，通常被用来将HTML(Hyper Text Mark-up Language，超文本标记语言)元素纵向分开，这在宽屏幕终端上可能会带来较好的显示效果，但是在小屏幕设备上，它会增加页面纵向空间。换行符过滤模块可以将网页资源获取单元220获取到的网页资源中的所有换行符进行过滤。

元素转换模块，用于将所述网页资源中所有的ul和ol元素转换成dl元素以及将所有的li元素转换成dt元素，以及将所述网页资源中的table元素转换成span元素；在一般的网页资源中，开发者习惯使用带有前置数字或符号标记的列表，也就是使用ul，ol以及li元素，每个列表项内容前面将会有一段空间用来存放数字或符号标记，这在宽屏幕的桌面电脑上效果不错，但是对于嵌入式小屏幕设备而言，显得结构不统一，参差不齐，空间利用率也不高，因而元素转换模块可以将页面中所有的ul和ol元素转换成dl元素以及将所有的li元素转换成dt元素，这样就消除看用来存放数字或符号标记的空间，使得列表项的内容从屏幕的最左边像素处开始显示，而且要保留原页面横向或纵向的排列方式。另一方面，网页开发者经常使用table表格来格式化页面的布局，比如将页面的一部分格式化成两列或多列，被这样格式化的网页资源通常是为电脑桌面而设计，其一行会包含多列内容，使得该行总宽度适合电脑桌面，但是往往会超过小屏幕宽度，元素转换模块可以将table元素转换成span元素，就可以将网页资源中的表格布局转换成线性流式布局，使得超过屏幕宽度的表格单元自动换行，这样就可以解决用户必须要横向滚动来浏览网页内容的问题。

匹配信息转换模块，用于根据元素转换模块对所述HTML元素的转换，在层叠式样式单选择器中对所述HTML元素的匹配信息进行转换。层叠式样式单(Cascading Style Sheets)用来指定如何显示HTML元素，元素转换模块将网页资源中的一些HTML元素进行了转换，这样会让原网页资源中的层叠式样式单选择器对该元素的匹配失效，因而原网页资源中与该元素对应的样式信息会丢失。为了解决这个问题，匹配信息转换模块可以在元素转换模块完成元素转换后，也在层叠式样式单选择器中做出了对应的转换。原网页资源中的层叠式样式单选择器语句为：

LI{DISPLAY:inline；FLOAT:left；COLOR:#000}

由于元素转换模块将网页资源中的li元素转换成了dt元素，为了保持原有的DISPLAY、FLOAT和COLOR样式信息，匹配信息转换模块可以将层叠式样式单选择器中的语句做出相应转换：

DT{DISPLAY:inline；FLOAT:left；COLOR:#000}

这样在页面中，该列表显示效果仍保持了字体颜色为黑色，内联显示以及横向排列的原有效果。

属性过滤模块，用于过滤所述网页资源中所有HTML元素的width和marginwidth属性；网页资源中的一些HTML元素属性会指定该元素的矩形区域，例如width和marginwidth属性会影响到浏览器的横向排版宽度。有些网页开发者习惯使用绝对width值来指定该元素所占矩形区域的宽度，而这个宽度是为适合电脑桌面显示而设计的，往往会超过嵌入式设备小屏幕宽度，影响自适应布局。属性过滤模块可以除掉页面中所有width和marginwidth属性，让浏览器引擎根据HTML元素内容实际值自适应的计算出宽度，这样会让整个布局紧凑，空间利用率高。

样式单元素过滤模块，用于过滤网页资源中不适用的层叠式样式单元素，所述不适用的层叠式样式单元素包括外边距元素、内边距元素、边框元素、矩形高度元素、矩形宽度元素以及定位元素；网页资源中有的层叠样式单元素是用来描述HTML元素的矩形区域，这类元素包括：外边距(margin)元素、内边距(padding)元素、边框(border)元素、矩形高度(height)元素、矩形宽度(width)元素以及定位元素，定位元素如position、left、top、right、bottom等，网页开发者习惯使用这些层叠式样式单元素来制定HTML元素的矩形区域，然而这些层叠式样式单元素的值通常是为桌面电脑而设计的，对于小屏幕嵌入式设备往往不能适用。比如其中的矩形宽度值有可能会超过嵌入式设备的屏宽。还有其中的内、外边距和边框元素会造成布局空间的浪费，影响整个小屏幕自适应布局的紧凑感，对于定位元素，会指定该元素在屏幕区域的起始位置，往往会超出小屏幕屏宽。样式单元素过滤模块可以将网页资源中的这些层叠式样式单元素进行过滤。

对齐转换模块，用于将层叠式样式单元素中的所有文本对齐元素都转换为左对齐；网页资源中的层叠式样式单元素中的文本对齐元素的值有left(左对齐)、right(右对齐)或者center(居中)等，当各HTML元素的文本对齐元素取值不统一时会让小屏幕网页资源的显示整体布局显得不够统一、参差不齐。对齐转换模块可以将网页资源中的所有文本对齐元素的值都转换为left。

浮动设置模块，用于设置样式单浮动元素只对HTML列表元素生效。网页资源中的样式单浮动元素float可以令HTML元素向左或向右浮动。当它作用于HTML列表元素时，会让HTML元素横向排列，从而可以节约嵌入式设备宝贵的纵向空间。但是当它作用于HTML块元素时，则会使小屏幕自适应排版整个布局显得凌乱，不够整齐。因此浮动设备模块可以将网页资源中的样式单浮动元素只对HTML列表元素生效，而对其它元素则不生效。

宽度设置模块，用于根据所述客户端的分辨率信息设置网页资源的网页排版宽度。例如网页请求获取单元210获取到的网页资源获取请求中的客户端的分辨率信息为240*320，则客户端的显示宽度为240个像素，则宽度设置模块就将网页资源的网页排版宽度设置为240像素或略小于240像素。

进一步地，自适应排版单元230还可以包括：

Flash和视频过滤模块，用于过滤网页资源中的Flash和视频；

图片缩小模块，用于将网页资源中图片自身的尺寸，尤其是图片宽度大于客户端显示区域宽度的图片进行缩小处理，使得其能在小屏幕上得以完全显示。

发送单元240用于将经过自适应排版单元230排版的网页资源发送给客户端。

进一步地，该排版服务器还可以包括分页单元250，用于根据所述分页要求信息对经过所述排版单元排版的网页资源进行分页处理，并为每一页产生相应的分页链接地址。具体地，所述网页请求获取单元210获取到的网页资源获取请求还包括客户端的所述分页要求信息，该分页要求信息可以为客户端对下载的网页资源的分页大小的设置，例如设置每次仅下载50K流量的网页资源，则分页单元250可以将经过所述排版单元排版的网页资源进行分页处理，每一个分页网页资源不超过50K流量，并为每一页产生相应的分页链接地址。所述发送单元240可以将经过分页处理单元250分页处理后的分页网页资源发送给客户端，可以仅发送一个分页，即仅发送当前页，待用户请求再发送下一分页网页资源，也可以将经过分页的网页资源自动依次全部发送给客户端，不需用户端每看完一个分页网页资源后再向排版服务器请求获取下一分页网页资源。

进一步地，该排版服务器还可以包括打包单元260，用于将欲发送给客户端的网页资源进行二进制打包处理，将经过打包处理的网页资源交与发送单元发送给客户端。

图3为本发明实施例中一种HTML小屏幕自适应排版方法第一实施例的流程示意图，该方法包括：

S301，获取客户端发出的网页资源获取请求，所述网页数据获取请求包括目标网页地址和客户端的分辨率信息；具体地，所述分辨率信息可以为客户端的显示分辨率信息或显示区域大小，可以在该网页资源获取请求的头部(head)信息中携带所述分辨率信息，例如(240*400)或(320*480)即表示该客户端240×400像素或320×480像素的分辨率。进一步地，所述网页数据获取请求还可以包括客户端的分页要求信息，该分页要求信息可以为客户端浏览器对下载的网页资源的分页大小的设置。

S302，根据网页数据获取请求中的目标网页地址从目标网络服务器获取网页资源；

S303，根据所述客户端的分辨率信息对网页资源进行排版，包括对网页资源中的HTML元素进行过滤和转换以及根据所述客户端的分辨率信息设置网页资源的网页排版宽度。例如获取到的网页资源获取请求中的客户端的分辨率信息为240*320，则客户端的显示宽度为240个像素，排版服务器就可以将网页资源的网页排版宽度设置为240像素或略小于240像素。进一步地，所述对网页资源中的HTML元素进行过滤和转换可以包括以下处理的任一种或多种：

a.过滤所述网页资源中的换行符；

b.将所述网页资源中所有的ul和ol元素转换成dl元素以及将所有的li元素转换成dt元素；

c.将所述网页资源中的table元素转换成span元素；

d.根据b或c中对所述HTML元素的转换，在层叠式样式单选择器中对所述HTML元素的匹配信息进行转换；

e.过滤所述网页资源中所有HTML元素的width和marginwidth属性；

f.过滤网页资源中不适用的层叠式样式单元素，所述不适用的层叠式样式单元素包括外边距元素、内边距元素、边框元素、矩形高度元素、矩形宽度元素以及定位元素；

g.将层叠式样式单元素中的所有为右对齐的对齐元素都转换为左对齐；

h.设置样式单浮动元素只对HTML列表元素生效。

进一步还可以包括：

i.过滤网页资源中的Flash和视频；

j.将网页资源中图片自身的尺寸，尤其是图片宽度大于客户端显示区域宽度的图片进行缩小处理，使得其能在小屏幕上得以完全显示。

S304，将经过排版的网页资源发送给客户端。客户端接收到经过排版后的网页资源后可以直接进行显示。

进一步地步骤S303与S304之间还可以包括：

根据所述分页要求信息对经过步骤S303排版的网页资源进行分页处理，并为每一页产生相应的分页链接地址。具体地，所述网页资源获取请求包括客户端的所述分页要求信息，该分页要求信息可以为客户端对下载的网页资源的分页大小的设置，例如设置每次仅下载50K流量的网页资源，则排版服务器可以将经过步骤S303排版的网页资源进行分页处理，每一个分页网页资源不超过50K流量，并为每一页产生相应的分页链接地址。在步骤S304中可以将经过分页处理后的分页网页资源发送给客户端，可以仅发送一个分页，即仅发送当前页，待用户请求再发送下一分页网页资源，也可以将经过分页的多个分页网页资源自动依次全部发送给客户端提供客户端自行查看，不需用户端每看完一个分页网页资源后再向排版服务器请求获取下一分页网页资源。

进一步地在S304将经过排版的网页资源发送给客户端之前还可以包括：将欲发送给客户端的网页资源进行二进制打包处理，将经过打包处理的网页资源交与发送单元发送给客户端。

本发明实施例通过排版服务器获取客户端的分辨率信息，对从网络服务器获取到的网页资源进行自适应排版，将经过自适应排版后的网页资源发送给客户端。从而实现了最大限度保留原页面除布局之外的资源样式(如字体大小、字体颜色、背景图片和颜色等)和充分利用客户端显示资源的前提下，使得网页资源适合小屏幕显示。

以上所揭露的仅为本发明一种较佳实施例而已，当然不能以此来限定本发明之权利范围，本领域普通技术人员可以理解实现上述实施例的全部或部分流程，并依本发明权利要求所作的等同变化，仍属于发明所涵盖的范围。

Claims (10)

1.一种HTML小屏幕自适应排版方法，其特征在于，所述方法包括：

获取客户端发出的网页资源获取请求，所述网页数据获取请求包括目标网页地址和客户端的分辨率信息；

根据网页数据获取请求中的目标网页地址从目标网络服务器获取网页资源；

根据所述客户端的分辨率信息对网页资源进行排版，包括对网页资源中的HTML元素进行过滤和转换以及根据所述客户端的分辨率信息设置网页资源的网页排版宽度；

将经过排版的网页资源发送给客户端。

2.如权利要求1所述的HTML小屏幕自适应排版方法，其特征在于，所述对网页资源中的HTML元素进行过滤和转换包括以下处理的任一种或多种：

a.过滤所述网页资源中的换行符；

b.将所述网页资源中所有的ul和ol元素转换成dl元素以及将所有的li元素转换成dt元素；

c.将所述网页资源中的table元素转换成span元素；

d.根据b或c中对所述HTML元素的转换，在层叠式样式单选择器中对所述HTML元素的匹配信息进行转换；

e.过滤所述网页资源中所有HTML元素的width和marginwidth属性；

f.过滤网页资源中不适用的层叠式样式单元素，所述不适用的层叠式样式单元素包括外边距元素、内边距元素、边框元素、矩形高度元素、矩形宽度元素以及定位元素；

g.将层叠式样式单元素中的所有为右对齐的对齐元素都转换为左对齐；

h.设置样式单浮动元素只对HTML列表元素生效。

3.如权利要求2所述的HTML小屏幕自适应排版方法，其特征在于，所述网页数据获取请求还包括客户端的分页要求信息；

所述将经过排版的网页资源发送给客户端之前还包括：

根据所述分页要求信息对经过排版的网页资源进行分页处理，并为每一页产生相应的分页链接地址。

4.如权利要求3所述的HTML小屏幕自适应排版方法，其特征在于，所述将经过排版的网页资源发送给客户端为：

将经过分页处理的网页资源中当前页的网页资源发送给客户端。

5.如权利要求1-4中任一项所述的HTML小屏幕自适应排版方法，其特征在于，所述将经过排版的网页资源发送给客户端之前还包括：

将欲发送给客户端的网页资源进行二进制打包处理，将经过打包处理后的网页资源发送给客户端。

6.一种排版服务器，其特征在于，所述排版服务器包括：

网页请求获取单元，用于获取客户端发出的网页资源获取请求，所述网页数据获取请求包括目标网页地址和客户端的分辨率信息；

网页资源获取单元，用于根据网页数据获取请求中的目标网页地址从目标网络服务器获取网页资源；

自适应排版单元，用于根据所述客户端的分辨率信息对网页资源进行排版，包括对网页资源中的HTML元素进行过滤和转换以及根据所述客户端的分辨率信息设置网页资源的网页排版宽度；

发送单元，用于将经过排版的网页资源发送给客户端。

7.如权利要求6所述的排版服务器，其特征在于，所述自适应排版单元包括：

换行符过滤模块，用于过滤所述网页资源中的换行符；

元素转换模块，用于将所述网页资源中所有的ul和ol元素转换成dl元素以及将所有的li元素转换成dt元素，以及将所述网页资源中的table元素转换成span元素；

匹配信息转换模块，用于根据元素转换模块对所述HTML元素的转换，在层叠式样式单选择器中对所述HTML元素的匹配信息进行转换；

属性过滤模块，用于过滤所述网页资源中所有HTML元素的width和marginwidth属性；

样式单元素过滤模块，用于过滤网页资源中不适用的层叠式样式单元素，所述不适用的层叠式样式单元素包括外边距元素、内边距元素、边框元素、矩形高度元素、矩形宽度元素以及定位元素；

对齐转换模块，用于将层叠式样式单元素中的所有为右对齐的对齐元素都转换为左对齐；

浮动设置模块，用于设置样式单浮动元素只对HTML列表元素生效；

宽度设置模块，用于根据所述客户端的分辨率信息设置网页资源的网页排版宽度。

8.如权利要求7所述的排版服务器，其特征在于，所述网页请求获取单元获取到的所示网页数据获取请求还包括客户端的分页要求信息；

所述排版服务器还包括：

分页单元，用于根据所述分页要求信息对经过所述排版单元排版的网页资源进行分页处理，并为每一页产生相应的分页链接地址。

9.如权利要求8所述的排版服务器，其特征在于，所述发送单元用于将经过分页单元进行分页处理的网页资源中当前页的网页资源发送给客户端。

10.如权利要求6-9中任一项所述的排版服务器，其特征在于，所述排版服务器还包括：

打包单元，用于将欲发送给客户端的网页资源进行二进制打包处理，将经过打包处理的网页资源交与发送单元发送给客户端。

Images