[发明专利]一种在窄屏幕设备上显示宽网页的智能布局方法

说明书

技术领域

本发明涉及一种屏幕显示的布局方法，特别是一种为方便浏览者在窄屏幕设备上浏览宽网页，将宽网页的显示内容进行重新布局的方法，属于互联网应用技术领域。

背景技术

随着网络技术和应用的快速发展，目前互联网日益普及，已经从传统的电脑扩展到了包括手机、电视机、机顶盒、卫星接收机、手持式游戏机、便携式媒体播放器等多种设备上。在不远的将来，使用这些非电脑设备上网的用户数量甚至有可能超过使用电脑上网的用户数量。

用户能够访问的互联网网站主要分为两类：web网站以及wap网站。其中的wap网站主要是针对手机这一类小屏幕设备而设计的，其功能、表现力、网站和网页的数量也远远比不上web网站。Web网站是互联网的最主要的组成部分，也是未来互联网发展的趋势，web网站的网页(以后简称web网页)是互联网内容的最主要的存储形式。

但是，目前的web网页大部分是针对电脑设计的，在手机等屏幕比较窄的设备上来看这些网页会产生问题：手机屏幕的宽度比web网页的宽度窄，那么在手机上浏览这些网页时就需要反复的左右移动屏幕上的内容才能看到所有的内容，这会给用户的阅读造成很大的不方便。如附图1所示，要想阅读网页中的文字，必须多次左右移动内容才能够看清楚，文字越多，这种不方便性就越突出。

针对这个问题，有一些浏览器采用了一种比较简单的解决办法：就是将网页的所有内容都按照屏幕的宽度进行重新布局，这样子用户不需要左右移动就可以阅读所有的文字内容。但是，这种简单的解决办法在解决文字阅读方便性的同时，却引来了另外一个问题，那就是有可能造成图片显示的混乱。目前，许多网站为了加速网页的加载速度，往往将一幅大的图片分割成多幅小的图片，也就是说看起来好像是一幅图，实际上是多幅图拼凑出来的，但是各个图片之间的相对位置关系必须严格按照网页设计者的本意才能正确显示，否则显示出来的图片就可能完全无法表达网页设计者的本意。在采用了按照屏幕宽度进行布局的算法后，图片也需要重新进行布局，这样就可能导致图片之间的相对位置与网页设计者的本意不一致，造成页面的混乱，无法正确表达网页作者的本意。如附图2所示，按照屏幕宽度布局之后，阅读文字不需要左右移动了，但是两幅图片的显示已经错位，看不出原来图片的原貌了，如果有更多幅图片，这种失真效果就更加突出。

针对上面这些问题，本发明设计了一种在窄屏幕设备上显示宽网页的智能布局方法。

发明内容

本发明的目的在于解决现有技术中存在的不足，提供一种在窄屏幕设备上显示宽网页的智能布局方法，以方便浏览者在窄屏幕设备上浏览宽网页。

本发明的发明目的是通过下述技术方案予以实现的：

一种在窄屏幕设备上显示宽网页的智能布局方法，其特征在于：具体包括如下步骤：

(1)显示设备将所接收的网页数据解析为节点树形结构；

(2)显示设备根据所解析的网页数据节点树形结构，自根节点起依次对各个节点进行处理；

(3)显示设备判断所处理的节点类型；如果该节点为文本节点，则采用视口宽度显示算法处理；如果该节点为非文本节点，则采用网页布局宽度显示算法处理；

(4)当所述网页数据的各个节点均被处理完成后，该布局方法结束。

所述视口宽度显示算法具体包括如下步骤：

(11)所述显示设备获取所述文本节点样式限制宽度及视口宽度；

(12)显示设备获取文本节点的尚未被布局的文本内容；

(13)显示设备根据步骤(11)所得到的样式限制宽度和视口宽度，计算得出当前行的样式剩余宽度和视口剩余宽度，并以其中的较小值，作为该文本内容在当前行的布局实际允许宽度；

(14)显示设备根据所述布局实际允许宽度，计算当前行所能够容纳的文字数目，并判断是否能够容纳步骤(12)中所获得的尚未被布局的文本内容；如果能够全部容纳，则布局所有文本内容在当前行，并结束对本节点的布局处理；如果不能够全部容纳，则执行步骤(15)；

(15)显示设备在能够被容纳于当前行的文字中，从后向前查找分行点；如果查找到分行点，则将查到的第一个分行点以前的内容布局在当前行，并移动布局起点到下一行，然后返回步骤(12)；如果未查到分行点，则执行步骤(16)；