用于显示网页的方法和系统

发明名称

用于显示网页的方法和系统

摘要

本发明公开了一种用于显示网页的方法，包括：接收显示设备的分辨率信息以确定显示设备的分辨率；接收网页内显示小部件元素的分辨率阈值；判断显示设备的分辨率是否小于显示小部件元素的分辨率阈值；如果显示设备的分辨率不小于显示小部件元素的分辨率阈值，则显示对应的小部件元素；如果显示设备的分辨率小于显示小部件元素的分辨率阈值，则不显示对应的小部件元素。使用本公开提出的方法，能创建出根据实际分辨率自动裁剪页面内容的web页面。这种方法既可以解决在不同分辨率下如何显示web页面的问题，也能减少开发web页面的时间和工作量。

权利要求

1.一种用于显示网页的方法，包括: 接收显示设备的分辨率信息以确定显示设备的分辨率； 接收网页内显示小部件元素的分辨率阈值，其中显示小部件元素的分辨率阈值对应于是否显示所述小部件元素的分辨率阈值； 判断显示设备的分辨率是否小于显示小部件元素的分辨率阈值； 如果显示设备的分辨率不小于显示小部件元素的分辨率阈值，则显示对应的小部件元素； 如果显示设备的分辨率小于显示小部件元素的分辨率阈值，则不显示对应的小部件元素。

2.根据权利要求1的方法，进一步包括: 接收网页内显示小部件的分辨率阈值，其中显示小部件的分辨率阈值对应于是否显示所述小部件的分辨率阈值； 判断显示设备的分辨率是否小于显示小部件的分辨率阈值； 如果显示设备的分辨率不小于显示小部件的分辨率阈值，则显示对应的小部件； 如果显示设备的分辨率小于显示小部件的分辨率阈值，则不显示对应的小部件。

3.根据权利要求2的方法，进一步包括: 判断显示小部件元素的分辨率阈值与显示小部件的分辨率阈值是否匹配； 如果显示小部件元素的分辨率阈值与显示小部件的分辨率阈值不匹配，接收显示小部件元素的分辨率阈值与显示小部件的分辨率阈值之间的映射； 利用映射判断是否显示小部件元素。

4.根据权利要求2的方法，其中显示设备的分辨率信息包括显示设备当前使用的分辨率。

5.一种用于显示网页的系统，包括: 接收部件，配置为: 接收显示设备的分辨率信息以确定显示设备的分辨率； 接收网页内显示小部件元素的分辨率阈值； 小部件适配器，配置为: 判断显示设备的分辨率是否小于显示小部件元素的分辨率阈值，其中显示小部件元素的分辨率阈值对应于是否显示所述小部件元素的分辨率阈值； 如果显示设备的分辨率不小于显示小部件元素的分辨率阈值，则显示对应的小部件元素； 如果显示设备的分辨率小于显示小部件元素的分辨率阈值，则不显示对应的小部件元素。

6.根据权利要求5的系统，其中: 接收部件进一步被配置为: 接收网页内显示小部件的分辨率阈值，其中显示小部件的分辨率阈值对应于是否显示所述小部件的分辨率阈值； 小部件适配器进一步被配置为: 判断显示设备的分辨率是否小于显示小部件的分辨率阈值；如果显示设备的分辨率不小于显示小部件的分辨率阈值，则显示对应的小部件； 如果显示设备的分辨率小于显示小部件的分辨率阈值，则不显示对应的小部件。

7.根据权利要求6的系统，其中: 接收部件进一步被配置为: 判断显示小部件元素的分辨率阈值与显示小部件的分辨率阈值是否匹配； 如果显示小部件元素的分辨率阈值与显示小部件的分辨率阈值不匹配，接收显示小部件元素的分辨率阈值与显示小部件的分辨率阈值之间的映射； 小部件适配器进一步被配置为: 利用映射判断是否显示小部件元素。

8.根据权利要求7的系统，其中显示设备的分辨率信息包括显示设备当前使用的分辨率。

技术领域

[0001] 本发明涉及互联网。更确切的，本发明涉及用于显示网页的方法和系统

背景技术

[0002] 如今，Web页面已经成为最重要的用户界面之一。用户能够方便的通过台式电脑、移动设备或者嵌入式设备上的浏览器访问和浏览Web页面。但是不同的显示设备有不同的分辨率，这就需要Web页面足够灵活以便支持具有不同分辨率的设备。

[0003] 现有的几种方法能够使web页面自适应不同的分辨率。第一种方法是使Web页面变为可缩放伸展的。这种方法的缺点是缩放具有明显的局限性。一个在台式机上显示良好的web页面可能在移动设备上被压缩成一团乱麻。第二种方法是为不同分辨率的设备准备不同的web页面。这种方法可以和第一种方法共用，以便提高它的适应性和减少页面开发的工作量。但它很难覆盖所有的分辨率，并且这种方法会显著的增加页面开发的工作和时间。第三种方法是放大或者缩小页面，这种方法的缺点显而易见，web页面的可读性会比较差。

发明内容

[0004]目前，没有合适的方法来解决在不同分辨率下web页面显示的问题。本公开的说明性实施例认识到现有技术中的上述缺点，提供了用于在不同分辨率下显示网页的方法和系统。

[0005] 根据本公开的一个方面，提供了一种用于显示网页的方法，包括:接收显示设备的分辨率信息以确定显示设备的分辨率；接收网页内显示小部件元素的分辨率阈值；判断显示设备的分辨率是否小于显示小部件元素的分辨率阈值；如果显示设备的分辨率不小于显示小部件元素的分辨率阈值，则显示对应的小部件元素；如果显示设备的分辨率小于显示小部件元素的分辨率阈值，则不显示对应的小部件元素。

[0006] 本公开的另一方面，用于显示网页的方法进一步包括:接收网页内显示小部件的分辨率阈值；判断显示设备的分辨率是否小于显示小部件的分辨率阈值；如果显示设备的分辨率不小于显示小部件的分辨率阈值，则显示对应的小部件；如果显示设备的分辨率小于显示小部件的分辨率阈值，则不显示对应的小部件。

[0007] 根据本公开的又一方面，提供了一种用于显示网页的系统，包括:接收部件，配置为:接收显示设备的分辨率信息以确定显示设备的分辨率；接收网页内显示小部件元素的分辨率阈值；小部件适配器，配置为:判断显示设备的分辨率是否小于显示小部件元素的分辨率阈值；如果显示设备的分辨率不小于显示小部件元素的分辨率阈值，则显示对应的小部件元素；如果显示设备的分辨率小于显示小部件元素的分辨率阈值，则不显示对应的小部件元素。

[0008] 根据本公开的另一方面，其中接收部件进一步被配置为:接收网页内显示小部件的分辨率阈值；小部件适配器进一步被配置为:判断显示设备的分辨率是否小于显示小部件的分辨率阈值；如果显示设备的分辨率不小于显示小部件的分辨率阈值，则显示对应的小部件；如果显示设备的分辨率小于显示小部件的分辨率阈值，则不显示对应的小部件。

[0009] 使用本公开提出的方法，能创建出根据实际分辨率自动裁剪页面内容的web页面。这种方法既可以解决在不同分辨率下如何显示web页面的问题，也能减少开发web页面的时间和工作量。

附图说明

[0010] 本公开可以通过参考下文中结合附图所给出的描述而得到更好的理解，其中在所有附图中使用了相同或相似的附图标记来表示相同或者相似的部件。所述附图连同下面的详细说明一起包含在本说明书中并且形成本说明书的一部分，而且用来进一步举例说明本公开的优选实施例和解释本公开的原理和优点。在附图中:

[0011] 图1显示了小部件100的一个示例；

[0012] 图2显示了根据本公开一个实施例的用于显示网页的方法200 ；

[0013] 图3显示了根据本公开另一实施例的用于显示网页的系统300。

具体实施方式

[0014] 在下文中将结合附图对本公开的示范性实施例进行描述。为了清楚和简明起见，在说明书中并未描述实际实施方式的所有特征。然而，应该了解，在开发任何这种实际实施例的过程中必须做出很多特定于该实际实施方式的决定，以便实现开发人员的具体目标，例如，符合与系统及业务相关的那些限制条件，并且这些限制条件可能会随着实施方式的不同而有所改变。此外，还应该了解，虽然开发工作有可能是非常复杂和费时的，但对得益于本公开公开内容的本领域技术人员来说，这种开发工作仅仅是例行的任务。

[0015] 在此，还需要说明的一点是，为了避免因不必要的细节而模糊了本公开，在附图中仅仅示出了与根据本公开的方案密切相关的装置结构和/或处理步骤，而省略了与本公开关系不大的其他细节。

[0016] 在对本公开进行详细说明之前，先简要介绍一下小部件的含义。小部件(widget)是构建图形用户界面(GUI)的可视化单元，每个部件高度可复用，用于封装特定的数据并提供展示和灵活的交互操控。小部件具有特有的生命周期(包括从创建到销毁)，并在遵循页面整体布局的前提下进行自我管理。小部件通常包括多个具有共同特性的页面元素，构成小部件的这些页面元素称为小部件元素。小部件之间还可以自由协作以实现更复杂的功倉泛。

[0017] 图1显示了小部件100的一个示例，该小部件100是文本编辑器小部件。图1中的小部件100包括4个元素，即汇总说明部分102、提示部分104、文本编辑部分106以及状态栏部分108。

[0018] 下面结合图2详细描述根据本公开的一个实施例的用于显示网页的方法100。

[0019] 现在参看图2，根据本公开的一个实施例的用于显示网页的方法200从步骤202开始。虚线框中的部分是可选步骤，所以这里先不做说明。将在后续的说明中对其进行详细说明。

[0020] 接下来，在步骤212，其中接收显示设备的分辨率信息以确定显示设备的分辨率。不同类型的显示设备支持的分辨率不同。例如，台式电脑和笔记本型电脑一般会支持较高的分辨率，例如1024*768、1200*1024或者更高。移动设备由于显示屏幕的限制，一般只能支持较低的分辨率，例如640*480、320*240甚至更低。显示设备的分辨率信息包含了显示设备当前使用的分辨率的信息。

[0021] 之后，方法进入步骤214，其中接收网页内显示小部件元素的分辨率阈值。以图1的小部件100为例，显示小部件元素的分辨率阈值对应于是否显示各个小部件元素(即汇总说明部分102、提不部分104、文本编辑部分106以及状态栏部分108)的分辨率阈值。该分辨率阈值的作用在于:如果显示设备的分辨率不小于显示某一小部件元素的分辨率阈值，那么该小部件元素就会被显示；如果显示设备的分辨率小于显示某一小部件元素的分辨率阈值，那么该小部件元素就不会被显示。表1给出了对应于图1的小部件100的显示小部件元素的分辨率阈值的一个例子。

[0022]



[0023] 表1小部件100的显示小部件元素的分辨率阈值。

[0024] 以表1为例，显示汇总说明部分的分辨率阈值为640*480，这说明:如果显示设备的分辨率小于640*480，汇总说明部分就不会被显示；如果显示设备的分辨率不小于640*480，汇总说明部分就会被显示。其中显示文本编辑部分的分辨率阈值为“0”，这说明无论显示设备的分辨率是多少该小部件元素都会被显示。如果一个网页中存在多个小部件，那么，对于每个小部件都存在如表1所示的对应的显示小部件元素的分辨率阈值。

[0025] 接下来，方法进入步骤216，其中判断显示设备的分辨率是否小于显示小部件元素的分辨率阈值。如果显示设备的分辨率不小于显示小部件元素的分辨率阈值，根据本公开的用于显示网页的方法进入步骤218，其中显示对应的小部件元素。如果显示设备的分辨率小于显示小部件元素的分辨率阈值，根据本公开的用于显示网页的方法进入步骤220，其中不显示对应的小部件元素。

[0026]



[0027] 表2网页的显示小部件的分辨率阈值

[0028] 如果一个网页中存在多个小部件，对于每个小部件都存在显示小部件的分辨率阈值。参见以上表2的例子。

[0029] 表2给出了当一个网页中存在多个小部件时对应的显示小部件的分辨率阈值的一个例子，该例中网页中存在4个小部件，即欢迎信息、文本编辑器、提交按钮和导航栏。类似的，显示小部件的分辨率阈值的作用在于:如果显示设备的分辨率不小于显示某一小部件的分辨率阈值，那么该小部件就会被显示；如果显示设备的分辨率小于显示某一小部件的分辨率阈值，那么该小部件就不会被显示。以表2为例，显示欢迎信息的分辨率阈值为800*600,这说明:如果显示设备的分辨率小于800*600,欢迎信息就不会被显示；如果显示设备的分辨率不小于800*600，欢迎信息就会被显示。其中显示文本编辑器和显示提交按钮的分辨率阈值为“0”，这说明无论显示设备的分辨率是多少该小部件都会被显示。以分辨率阈值800*600为例，分辨率小于分辨率阈值可以是例如横向解析度小于800，或者纵向解析度小于600，或者横向和纵向分别小于800和600，或者总的像素数小于800*600

[0030] 可选地，根据本公开另一实施例用于显示网页的方法还包括虚线框中的步骤，其中:在步骤204，其中接收网页内显示小部件的分辨率阈值。如前所述，显示小部件的分辨率阈值的作用在于:如果显示设备的分辨率不小于显示某一小部件的分辨率阈值，那么该小部件就会被显示；如果显示设备的分辨率小于显示某一小部件的分辨率阈值，那么该小部件就不会被显示。

[0031] 接着，方法进入步骤206，其中判断显示设备的分辨率是否小于显示小部件的分辨率阈值。如果显示设备的分辨率不小于显示小部件的分辨率阈值，方法进入步骤208，其中显示对应的小部件。如果显示设备的分辨率小于显示小部件的分辨率阈值，方法进入步骤210，其中不显示对应的小部件。

[0032] 这里虽然以先执行虚线框中的部分，即步骤202到步骤210，再执行步骤212到步骤220为例进行的说明，但根据本公开的实施例不限于此种方式，还可以是先执行步骤212到步骤220，再执行虚线框中的部分，即步骤202到步骤210的方式。

[0033] 如表1和表2所示，显示小部件元素的分辨率阈值和显示小部件的分辨率阈值之间有可能不匹配，即分辨率阈值的值不相同。当显示小部件元素的分辨率阈值和显示小部件的分辨率阈值之间不匹配时，根据本公开另一实施例用于显示网页的方法还包括接收显示小部件元素的分辨率阈值与显示小部件的分辨率阈值之间的映射，进而利用该映射判断是否显示小部件元素。该映射可以由用户事先设定，也可以由系统自动设定。以表1和表2为例,例如可以设定如表3所示的映射。

[0034]



[0035] 表3显示小部件的分辨率阈值和显示小部件元素的分辨率阈值的映射

[0036] 以接收到表3的映射为例，利用该映射可以得到小部件显示的分辨率阈值320*240映射于小部件元素显示的分辨率阈值是640*480，即当显示设备的分辨率小于320*240时，对于所有显示的分辨率阈值为640*480的小部件元素都不会被显示。

[0037] 以上结合图2详细描述了根据本公开一个实施例的用于显示网页的方法。下面将结合图3详细描述根据本公开另一实施例的用于显示网页的系统300。

[0038] 如图3所示，根据本公开的另一实施例，用于显示网页的系统300包括:接收部件302，配置为:接收显示设备的分辨率信息已确定显示设备的分辨率；接收网页内显示小部件元素的分辨率阈值。小部件适配器304，配置为:判断显示设备的分辨率是否小于显示小部件元素的分辨率阈值；如果显示设备的分辨率不小于显示小部件元素的分辨率阈值，则显示对应的小部件元素；如果显示设备的分辨率小于显示小部件元素的分辨率阈值，则不显示对应的小部件元素。

[0039] 可选地，根据本公开的另一实施例，接收部件302进一步被配置为:接收网页内显示小部件的分辨率阈值。小部件适配器304进一步被配置为:判断显示设备的分辨率是否小于显示小部件的分辨率阈值；如果显示设备的分辨率不小于显示小部件的分辨率阈值，则显示对应的小部件；如果显示设备的分辨率小于显示小部件的分辨率阈值，则不显示对应的小部件。

[0040] 接收部件302进一步被配置为:判断显示小部件元素的分辨率阈值与显示小部件的分辨率阈值是否匹配，如果显示小部件元素的分辨率阈值与显示小部件的分辨率阈值不匹配，接收显示小部件元素的分辨率阈值与显示小部件的分辨率阈值之间的映射。小部件适配器304进一步配置为利用该映射判断是否显示小部件元素。

[0041] 以上结合具体实施例描述了本公开的基本原理，但是，需要指出的是，对本领域的普通技术人员而言，能够理解本公开的方法和装置的全部或者任何步骤或者部件，可以在任何计算装置(包括处理器、存储介质等)或者计算装置的网络中，以硬件、固件、软件或者它们的组合加以实现，这是本领域普通技术人员在阅读了本公开的说明的情况下运用他们的基本编程技能就能实现的。

[0042] 因此，本公开的目的还可以通过在任何计算装置上运行一个程序或者一组程序来实现。所述计算装置可以是公知的通用装置。因此，本公开的目的也可以仅仅通过提供包含实现所述方法或者装置的程序代码的程序产品来实现。也就是说，这样的程序产品也构成本公开，并且存储有这样的程序产品的存储介质也构成本公开。显然，所述存储介质可以是任何公知的存储介质或者将来所开发出来的任何存储介质。

[0043] 还需要指出的是，在本公开的装置和方法中，显然，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。并且，执行上述系列处理的步骤可以自然地按照说明的顺序按时间顺序执行，但是并不需要一定按照时间顺序执行。某些步骤可以并行或彼此独立地执行。

[0044] 虽然已经详细说明了本公开及其优点，但是应当理解在不脱离由所附的权利要求所限定的本公开的精神和范围的情况下可以进行各种改变、替代和变换。而且，本申请的术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，

由语句“包括一个......”限定的要素，并不排除在包括所述要素的过程、方法、物品或者装置中还存在另外的相同要素。

说明书附图