CN104050947A - 显示控制方法和电子设备 - Google Patents

Abstract

本发明提供一种显示控制方法和电子设备。该显示控制方法应用于包括显示单元的电子设备中，该方法包括：接收用于构建第一图形界面的第一数据；解析所述第一数据中包括的配置文件，以获取用于构建所述第一图形界面的第一参数值；获取所述显示单元的宽度和高度的数据；根据获取的第一参数值以及获取的所述显示单元的宽度和高度的数据，确定在所述显示单元上显示的第二图形界面的宽度和高度；根据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元显示所述第二图形界面，所述第二图形界面与所述显示单元的显示区域匹配。

Description

显示控制方法和电子设备

技术领域

本发明涉及电子设备的领域，更具体地，本发明涉及一种显示控制方法和电子设备。

背景技术

目前，已经出现具有各种尺寸的所述显示单元的电子设备，其能够显示各种内容，如电视机、平板电脑、智能手机等等。由于各个电子设备的所述显示单元的显示屏幕尺寸不同，并且分辨率也不同，导致相同的图形界面在不同分辨率的电子设备上的显示也不同。

例如，如图1所示，在具有400*800的分辨率的显示单元上显示良好的图形界面在具有800*800的分辨率的显示单元上显示时，显示内容的布局偏向左边，这样显示的图形界面的显示效果不好。因此，当在用户的电子设备上显示不适当的图形界面时，用户的使用体验很差。

为此，期望提供一种电子设备和电子设备，其能够根据用户的电子设备的显示单元的尺寸和/或分辨率自适应地调整图形界面的大小，从而显示适当的图形界面。

发明内容

根据本发明一个实施例，提供了一种显示控制方法，应用于包括显示单元的电子设备中，该方法包括：

接收用于构建第一图形界面的第一数据；

解析所述第一数据中包括的配置文件，以获取用于构建所述第一图形界面的第一参数值；

获取所述显示单元的宽度和高度的数据；

根据获取的第一参数值以及获取的所述显示单元的宽度和高度的数据，确定在所述显示单元上显示的第二图形界面的宽度和高度；

根据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元显示所述第二图形界面，所述第二图形界面与所述显示单元的显示区域匹配。

优选地，所述第一参数包括：

指示所述第一图形界面的宽度与所述显示单元的宽度的宽度百分比以及所述第一图形界面的高度与所述显示单元的高度的高度百分比。

优选地，根据获取的第一参数值以及获取的所述显示单元的宽度和高度的数据，确定所述第二图形界面的宽度和高度包括：

将获取的所述显示单元的宽度乘以获取的宽度百分比以得到所述第二图形界面的宽度；以及

将获取的所述显示单元的高度乘以获取的高度百分比以得到所述第二图形界面的高度。

优选地，所述第一参数包括：

指示所述第一图形界面的宽度要缩放的比例的宽度缩放比以及所述第一图形界面的高度要缩放的比例的高度缩放比。

优选地，根据获取的第一参数值以及获取的所述显示单元的宽度和高度的数据，确定所述第二图形界面的宽度和高度包括：

将获取的所述显示单元的宽度乘以获取的宽度缩放比以得到所述第二图形界面的宽度；以及

将获取的所述显示单元的高度乘以获取的高度缩放比以得到所述第二图形界面的高度。

优选地，所述显示控制方法还包括：

在确定所述第二图形界面的宽度和高度之后，将所述第二图形界面的宽度和高度保存在所述电子设备的数据库中；

当重新接收所述第一数据时，读取数据库中保存的所述第二图形界面的宽度和高度；

根据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元上显示所述第二图形界面。

根据本发明另一个实施例，提供了一种电子设备，包括：

显示单元，用于显示图形界面；

接收单元，用于接收用于构建第一图形界面的第一数据；

解析单元，用于解析所述第一数据中包括的配置文件，以获取用于构建所述第一图形界面的第一参数值；

获取单元，用于获取所述显示单元的宽度和高度的数据；

确定单元，用于根据获取的第一参数值以及获取的所述显示单元的宽度和高度的数据，确定在所述显示单元上显示的第二图形界面的宽度和高度；

图形界面构建单元，用于根据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元显示所述第二图形界面，所述第二图形界面与所述显示单元的显示区域匹配。

优选地，所述第一参数包括：

指示所述第一图形界面的宽度与所述显示单元的宽度的宽度百分比以及所述第一图形界面的高度与所述显示单元的高度的高度百分比。

优选地，所述确定单元进一步用于：

将获取的所述显示单元的宽度乘以获取的宽度百分比以得到所述第二图形界面的宽度；以及

将获取的所述显示单元的高度乘以获取的高度百分比以得到所述第二图形界面的高度。

优选地，所述第一参数包括：

指示所述第一图形界面的宽度要缩放的比例的宽度缩放比以及所述第一图形界面的高度要缩放的比例的高度缩放比。

优选地，所述确定单元进一步用于：

将获取的所述显示单元的宽度乘以获取的宽度缩放比以得到所述第二图形界面的宽度；以及

将获取的所述显示单元的高度乘以获取的高度缩放比以得到所述第二图形界面的高度。

优选地，所述电子设备还包括：

数据库，用于存储所述第二图形界面的宽度和高度；

读取单元，用于当所述接收单元重新接收所述第一数据时，读取数据库中保存的所述第二图形界面的宽度和高度；

其中，所述图形构建单元根据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元上显示所述第二图形界面。

因此，根据本发明实施例的显示控制方法和电子设备，能够根据用户的电子设备的显示单元的尺寸和/或分辨率自适应地调整图形界面的大小，从而显示适当的图形界面。

附图说明

图1是描述现有技术的显示控制方法的说明图；

图2是描述图形界面的显示过程的图；

图3是描述根据本发明第一实施例的显示控制方法的流程图；

图4是根据本发明第一实施例的显示控制方法的效果图；以及

图5是描述根据本发明第二实施例的电子设备的功能框图。

具体实施方式

下面，将参考附图详细描述根据本发明的实施例。根据本发明第一实施例的显示控制方法可应用于各种电子设备。这样的电子设备的示例例如包括平板电脑、台式机、智能手机、个人数字助理等等，只要该电子设备具有显示单元。

在描述本发明的实施例之前，先参考图2描述图形界面的显示过程。如图2所示，当用户使用电子设备浏览网页页面时，浏览器首先从服务器接收网页页面数据。该网页页面数据例如包括HTML页面内容数据、层叠样式表单（Cascading Style Sheet，CSS）文件、JavaScript脚本程序等等。该HTML页面内容数据例如包括要显示的各种图片、文字、视频、动画等内容。该CSS文件是定义HTML网页内容数据中各个元素的大小、布局、背景、间距等参数的配置信息文件。

在接收网页页面数据之后，浏览器开始解析接收的网页页面数据。例如，解析CSS文件以获取HTML页面内容数据的布局等参数。然后，通过获取的布局参数等信息对HTML页面内容进行布局以确定要显示的图形界面。然后，对确定要显示的图形界面进行渲染，并且在显示单元上进行显示。

下面，将参考图3描述根据本发明第一实施例的显示控制方法100。

根据本发明第一实施例的显示控制方法100包括：

步骤S101：接收用于构建第一图形界面的第一数据；

步骤S102：解析所述第一数据中包括的配置文件，以获取用于构建所述第一图形界面的第一参数值；

步骤S103：获取所述显示单元的宽度和高度的数据；

步骤S104：根据获取的第一参数值以及获取的所述显示单元的宽度和高度的数据，确定在所述显示单元上显示的第二图形界面的宽度和高度；

步骤S105：根据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元显示所述第二图形界面，所述第二图形界面与所述显示单元的显示区域匹配。

具体来说，在步骤S101中，根据用户的操作输入，接收用于构建第一图形界面的第一数据。例如，当用户准备浏览网页内容时，根据用户的操作输入，通过浏览器接收用户期望浏览的网页的页面数据。如前面描述的，该网页页面数据例如包括HTML页面内容数据、CSS文件、JavaScript脚本程序等等。另外，该网页页面数据在设计时具有默认的第一图形界面。例如，该第一图形界面例如默认适合于具有400*800分辨率的显示屏，即，该第一图形界面例如具有400px*800px的大小。

在步骤S102中，通过浏览器中的解析模块解析已经接收的网页页面数据中包括的CSS文件，以获取用于构建所述第一图形界面的第一参数值。例如，该第一参数值可以包括页面的长度、页面的高度、页面中各个内容的间距、大小、背景等等。目前，HTML所提供的长度单位包括px（像素）、cm、mm、pt、pc、ex、em等等，这些都是基于长度为单位的。

在一个实施例中，所述第一参数可以包括指示所述第一图形界面的宽度与所述显示单元的宽度的宽度百分比以及所述第一图形界面的高度与所述显示单元的高度的高度百分比。也就是说，在HTML5的运行环境中定义新的度量单位“百分比”，以长度或者宽度的百分比来布局图形界面。该百分比的取值范围使用(0---1000)用来表示从0.1%---100.0%。用户可以使用“百分比”来进行HTML中内容的布局。

在另一个实施例中，所述第一参数可以包括指示所述第一图形界面的宽度要缩放的比例的宽度缩放比以及所述第一图形界面的高度要缩放的比例的高度缩放比。在HTML5的运行环境中，还可以定义新的度量单位“缩放”。缩放的取值范围从0.01---100。在不同的平台上，开发者可以选择不同的缩放值。

在步骤S103中，获取所述显示单元的宽度和高度的数据。即，获取用户的电子设备的显示单元的分辨率。例如，当用户的电子设备的显示单元是具有800*800分辨率的显示屏时，获取显示单元的宽度数据是800px，高度数据是800px。

在步骤S104中，根据获取的第一参数值以及获取的所述显示单元的宽度和高度的数据，确定在所述显示单元上显示的第二图形界面的宽度和高度。也就是说，在该步骤S104中，如果接收的网页页面数据中的CSS文件中默认的第一图形界面不适合用户的电子设备的显示单元，则需要根据CSS文件中的第一参数值和获取的所述显示单元的宽度和高度的数据，确定适合在所述显示单元上显示的第二图形界面的宽度和高度。

在步骤S105中，根据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元显示所述第二图形界面，所述第二图形界面与所述显示单元的显示区域匹配。

具体来说，根据已经确定的第二图形界面的宽度和高度以及之前接收的页面内容数据，构建要在显示单元上显示的第二图形界面。例如，调整页面内容数据的字体大小、字间距、位置等等，使得在显示单元上显示第二图形界面时，显示的第二图形界面与显示单元的显示区域匹配。

具体来说，当所述第一参数是指示所述第一图形界面的宽度与所述显示单元的宽度的宽度百分比以及所述第一图形界面的高度与所述显示单元的高度的高度百分比时，可以将获取的所述显示单元的宽度乘以获取的宽度百分比以得到所述第二图形界面的宽度，并且将获取的所述显示单元的高度乘以获取的高度百分比以得到所述第二图形界面的高度。

例如，当用户在CSS文件中定义图形界面的宽度和长度与显示单元的宽度和长度的比例为90%时，可以确定第二图形界面的宽度为800px*90%=720px，高度为800px*90%=720px。也就是说，当把使用该度量单位开发的应用运行到不同电子设备时，浏览器会帮助用户根据屏幕尺寸按照设定的百分比计算出用户所需的真正px值。

例如，如图4所示，与图1所示的现有技术的显示效果相比，当在800*800的显示屏上显示时，第二图形界面显示在屏幕中间，并且字体、字间距等都相应地根据显示屏的大小自适应地进行了调整，从而获得更好的显示效果。

在另一个实施例中，当所述第一参数是指示所述第一图形界面的宽度要缩放的比例的宽度缩放比以及所述第一图形界面的高度要缩放的比例的高度缩放比时，可以将获取的所述显示单元的宽度乘以获取的宽度缩放比以得到所述第二图形界面的宽度，并且将获取的所述显示单元的高度乘以获取的高度缩放比以得到所述第二图形界面的高度。

例如，当用户在CSS文件中定义图形界面的宽度和长度的缩放比是90时，可以确定第二图形界面的宽度为800px*0.9=720px，高度为800px*0.9=720px。也就是说，当把使用该度量单位开发的应用运行到不同电子设备时，浏览器会帮助用户根据预定的缩放比计算出用户所需的真正px值。需要注意的是，通过该缩放比计算的图形界面的宽度和长度有可能与实际的显示屏的分辨率不符。

此外，在确定所述第二图形界面的宽度和高度之后，可以将所述第二图形界面的宽度和高度保存在所述电子设备的数据库中。例如，可以保存在浏览器的缓存中，或者存储在电子设备的存储单元中。

然后，当重新接收所述第一数据时，读取数据库中保存的所述第二图形界面的宽度和高度，并且根据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元上显示所述第二图形界面。

例如，当用户对当前页面执行刷新操作时，可以不需要执行额外的第二图形界面的宽度和高度的计算，只需要读取浏览器缓存中已保存的第二图形界面的宽度和高度，将更新的网页内容数据进行布局、渲染和显示，从而能够更快地执行网页内容的显示。

因此，根据本发明实施例的显示控制方法，能够根据用户的电子设备的显示单元的尺寸和/或分辨率自适应地调整图形界面的大小，从而显示适当的图形界面。

<第二实施例>

下面，将参考图5描述根据本发明第二实施例的电子设备200。该电子设备200包括：

显示单元201，用于显示图形界面；

接收单元202，用于接收用于构建第一图形界面的第一数据；

解析单元203，用于解析所述第一数据中包括的配置文件，以获取用于构建所述第一图形界面的第一参数值；

获取单元204，用于获取所述显示单元的宽度和高度的数据；

确定单元205，用于根据获取的第一参数值以及获取的所述显示单元201的宽度和高度的数据，确定在所述显示单元201上显示的第二图形界面的宽度和高度；

图形界面构建单元206，用于根据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元201显示所述第二图形界面，所述第二图形界面与所述显示单元201的显示区域匹配。

所示显示单元201例如可以由液晶显示器（LCD）、阴极射线管显示器、发光二级管显示器（LED）、有机电致发光显示器（OLED）等构成。优选地，所述第一参数包括：

指示所述第一图形界面的宽度与所述显示单元的宽度的宽度百分比以及所述第一图形界面的高度与所述显示单元的高度的高度百分比。

优选地，所述确定单元205进一步用于：

将获取的所述显示单元的宽度乘以获取的宽度百分比以得到所述第二图形界面的宽度；以及

将获取的所述显示单元的高度乘以获取的高度百分比以得到所述第二图形界面的高度。

优选地，所述第一参数包括：

指示所述第一图形界面的宽度要缩放的比例的宽度缩放比以及所述第一图形界面的高度要缩放的比例的高度缩放比。

优选地，所述确定单元205进一步用于：

将获取的所述显示单元的宽度乘以获取的宽度缩放比以得到所述第二图形界面的宽度；以及

将获取的所述显示单元的高度乘以获取的高度缩放比以得到所述第二图形界面的高度。

优选地，所述电子设备200还包括：

数据库207，用于存储所述第二图形界面的宽度和高度；

读取单元208，用于当所述接收单元重新接收所述第一数据时，读取数据库中保存的所述第二图形界面的宽度和高度；

其中，所述图形构建单元根206据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元上显示所述第二图形界面。

此外，接收单元202、解析单元203、获取单元204、确定单元205、图形界面构建单元206和读取单元208可以由CPU实现。该CPU通过执行存储单元中存储的各种程序实现各个功能单元的功能。

因此，根据本发明实施例的电子设备，能够根据用户的电子设备的显示单元的尺寸和/或分辨率自适应地调整图形界面的大小，从而显示适当的图形界面。

需要说明的是，在本说明书中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

最后，还需要说明的是，上述一系列处理不仅包括以这里所述的顺序按时间序列执行的处理，而且包括并行或分别地、而不是按时间顺序执行的处理。

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

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

Claims (12)

1.一种显示控制方法，应用于包括显示单元的电子设备中，该方法包括：

接收用于构建第一图形界面的第一数据；

解析所述第一数据中包括的配置文件，以获取用于构建所述第一图形界面的第一参数值；

获取所述显示单元的宽度和高度的数据；

根据获取的第一参数值以及获取的所述显示单元的宽度和高度的数据，确定在所述显示单元上显示的第二图形界面的宽度和高度；

根据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元显示所述第二图形界面，所述第二图形界面与所述显示单元的显示区域匹配。

2.如权利要求1所述的显示控制方法，其中，所述第一参数包括：

指示所述第一图形界面的宽度与所述显示单元的宽度的宽度百分比以及所述第一图形界面的高度与所述显示单元的高度的高度百分比。

3.如权利要求2所述的显示控制方法，其中，根据获取的第一参数值以及获取的所述显示单元的宽度和高度的数据，确定所述第二图形界面的宽度和高度包括：

将获取的所述显示单元的宽度乘以获取的宽度百分比以得到所述第二图形界面的宽度；以及

将获取的所述显示单元的高度乘以获取的高度百分比以得到所述第二图形界面的高度。

4.如权利要求1所述的显示控制方法，其中，所述第一参数包括：

指示所述第一图形界面的宽度要缩放的比例的宽度缩放比以及所述第一图形界面的高度要缩放的比例的高度缩放比。

5.如权利要求4所述的显示控制方法，其中，根据获取的第一参数值以及获取的所述显示单元的宽度和高度的数据，确定所述第二图形界面的宽度和高度包括：

将获取的所述显示单元的宽度乘以获取的宽度缩放比以得到所述第二图形界面的宽度；以及

将获取的所述显示单元的高度乘以获取的高度缩放比以得到所述第二图形界面的高度。

6.如权利要求1所述的显示控制方法，还包括：

在确定所述第二图形界面的宽度和高度之后，将所述第二图形界面的宽度和高度保存在所述电子设备的数据库中；

当重新接收所述第一数据时，读取数据库中保存的所述第二图形界面的宽度和高度；

根据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元上显示所述第二图形界面。

7.一种电子设备，包括：

显示单元，用于显示图形界面；

接收单元，用于接收用于构建第一图形界面的第一数据；

解析单元，用于解析所述第一数据中包括的配置文件，以获取用于构建所述第一图形界面的第一参数值；

获取单元，用于获取所述显示单元的宽度和高度的数据；

确定单元，用于根据获取的第一参数值以及获取的所述显示单元的宽度和高度的数据，确定在所述显示单元上显示的第二图形界面的宽度和高度；

图形界面构建单元，用于根据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元显示所述第二图形界面，所述第二图形界面与所述显示单元的显示区域匹配。

8.如权利要求7所述的电子设备，其中，所述第一参数包括：

指示所述第一图形界面的宽度与所述显示单元的宽度的宽度百分比以及所述第一图形界面的高度与所述显示单元的高度的高度百分比。

9.如权利要求8所述的电子设备，其中，所述确定单元进一步用于：

将获取的所述显示单元的宽度乘以获取的宽度百分比以得到所述第二图形界面的宽度；以及

将获取的所述显示单元的高度乘以获取的高度百分比以得到所述第二图形界面的高度。

10.如权利要求7所述的电子设备，其中，所述第一参数包括：

指示所述第一图形界面的宽度要缩放的比例的宽度缩放比以及所述第一图形界面的高度要缩放的比例的高度缩放比。

11.如权利要求10所述的电子设备，其中，所述确定单元进一步用于：

将获取的所述显示单元的宽度乘以获取的宽度缩放比以得到所述第二图形界面的宽度；以及

将获取的所述显示单元的高度乘以获取的高度缩放比以得到所述第二图形界面的高度。

12.如权利要求7所述的电子设备，还包括：

数据库，用于存储所述第二图形界面的宽度和高度；

读取单元，用于当所述接收单元重新接收所述第一数据时，读取数据库中保存的所述第二图形界面的宽度和高度；

其中，所述图形构建单元根据所述第二图形界面的宽度和高度以及所述第一数据中的内容数据构建所述第二图形界面，并且使得所述显示单元上显示所述第二图形界面。