CN105718228A - 动态内容显示的方法和装置 - Google Patents

Abstract

一种动态内容显示的方法，所述方法包括：通过应用界面获取显示指令，所述应用界面是按照屏幕宽度与第一预设值的比值进行缩放显示的；根据所述显示指令，加载动态内容；获取所述第一预设值与所述动态内容的宽度的比值作为动态内容的第一缩放比例，按照所述第一缩放比例对所述动态内容进行缩放；将缩放后的动态内容进行显示。采用本方法，能够使得动态内容显示的宽度与终端屏幕宽度一致，有效改善动态内容显示效果。此外还提供一种动态内容显示的装置。

Description

动态内容显示的方法和装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种动态内容显示的方法和装置。

背景技术

近年来随着智能终端的发展，通过应用程序在屏幕上对Web(网页)页面进行缩放以及动态调整已知的内容已成为智能终端常见的功能。但是对于智能终端上安装的复杂的应用***，例如ERP(EnterpriseResourcePlanning，企业资源计划)***，提供了报表开发工具、能够让技术人员进行二次开发的工具或者让业务用户进行自定义内容的工具，在智能终端上展示利用该应用***得到的动态内容，如，表格、图表和图片等形式的内容，是嵌入到该应用***中的，而不是以页面的形式单独存在。如果对这些动态内容不做任何处理，直接在智能终端上进行显示，那么就会出现如图1所示的情形：图1-1中动态内容宽度比智能终端的屏幕宽度小，会在屏幕上出现空白区域，图1-2动态内容宽度比屏幕宽度大，则动态内容不能完整显示，会产生横向滚动条。导致动态内容显示的宽度与智能终端的屏幕宽度不一致，给用户造成不便。

发明内容

基于此，有必要针对上述技术问题，提供一种能够有效改善动态内容显示效果，使得动态内容显示的宽度与终端屏幕宽度一致的动态内容显示的方法和装置。

一种动态内容显示的方法，所述方法包括：

通过应用界面获取显示指令，所述应用界面是按照屏幕宽度与第一预设值的比值进行缩放显示的；

根据所述显示指令，加载动态内容；

获取所述第一预设值与所述动态内容的宽度的比值作为动态内容的第一缩放比例，按照所述第一缩放比例对所述动态内容进行缩放；

将缩放后的动态内容进行显示。

在其中一个实施例中，所述通过应用界面获取显示指令的步骤之前，还包括：

对所述应用界面进行初始化；

分别获取所述屏幕宽度和所述第一预设值；

计算所述屏幕宽度与所述第一预设值的比值，作为所述应用界面的第一缩放比例；

按照所述应用界面的第一缩放比例对所述应用界面进行缩放。

在其中一个实施例中，所述获取所述第一预设值与所述动态内容的宽度的比值作为动态内容的第一缩放比例，按照所述第一缩放比例对所述动态内容进行缩放的步骤包括：

获取所述动态内容的宽度；

计算所述第一预设值与所述动态内容的宽度的比值。

在其中一个实施例中，所述根据所述第一预设值与所述动态内容的宽度的比值，对所述动态内容进行缩放的步骤包括：

获取所述动态内容对应的容器；

根据所述第一预设值与所述动态内容的宽度的比值，对所述容器配置对应的属性；

根据配置后的属性，对所述动态内容进行缩放调整。

在其中一个实施例中，所述将缩放后的动态内容在屏幕上进行显示的步骤之后，还包括：

捕捉所述屏幕转向事件；

获取转向后的屏幕宽度与第二预设值；

根据所述转向后的屏幕宽度与所述第二预设值的比值和所述第二预设值与所述动态内容的宽度的比值，对所述动态内容在转向后进行缩放；

将在转向后进行缩放得到的动态内容进行显示。

在其中一个实施例中，所述根据所述转向后的屏幕宽度与所述第二预设值的比值和所述第二预设值与所述动态内容的宽度的比值，对所述动态内容在转向后进行缩放的步骤包括：

计算所述转向后的屏幕宽度与所述第二预设值的比值，作为所述应用界面的第二缩放比例；

按照所述应用界面的第二缩放比例对所述应用界面进行缩放；

计算所述第二预设值与所述动态内容的宽度的比值作为所述动态内容的第二缩放比例；

按照所述动态内容的第二缩放比例对所述动态内容进行缩放。

一种动态内容显示的装置，所述装置包括：

第一获取模块，用于通过应用界面获取显示指令，所述应用界面是按照屏幕宽度与第一预设值的比值进行缩放显示的；

加载模块，用于根据所述显示指令，加载动态内容；

第一缩放模块，用于获取所述第一预设值与所述动态内容的宽度的比值作为动态内容的第一缩放比例，按照所述第一缩放比例对所述动态内容进行缩放；

显示模块，用于将缩放后的动态内容进行显示。

在其中一个实施例中，所述装置还包括：

初始化模块，用于对所述应用界面进行初始化；

第二获取模块，用于分别获取所述屏幕宽度和所述第一预设值；

计算模块，用于计算所述屏幕宽度与所述第一预设值的比值，作为所述应用界面的第一缩放比例；

第二缩放模块，用于按照所述应用界面的第一缩放比例对所述应用界面进行缩放。

在其中一个实施例中，所述第一缩放模块包括：

容器获取单元，用于获取所述动态内容对应的容器；

属性配置单元，用于根据所述第一预设值与所述动态内容的宽度的比值，对所述容器配置对应的属性；

调整单元，用于根据配置后的属性，对所述动态内容进行缩放调整。

在其中一个实施例中，所述装置还包括：

捕捉模块，用于捕捉所述屏幕转向事件；

所述第二获取模块还用于获取转向后的屏幕宽度与第二预设值；所述第一缩放模块还用于根据所述转向后的屏幕宽度与所述第二预设值的比值和所述第二预设值与所述动态内容的宽度的比值，对所述动态内容在转向后进行缩放；所述显示模块还用于将在转向后进行缩放得到的动态内容进行显示。

在其中一个实施例中，所述计算模块还用于计算所述转向后的屏幕宽度与所述第二预设值的比值，作为所述应用界面的第二缩放比例；所述第二缩放模块还用于按照所述应用界面的第二缩放比例对所述应用界面进行缩放；所述计算模块还用于计算所述第二预设值与所述动态内容的宽度的比值作为所述动态内容的第二缩放比例；所述第一缩放模块还用于按照所述动态内容的第二缩放比例对所述动态内容进行缩放。

上述动态内容显示的方法和装置，通过应用界面获取显示指令，应用界面是按照屏幕宽度与第一预设值的比值进行缩放显示的；根据显示指令，加载动态内容；获取第一预设值与动态内容的宽度的比值作为动态内容的第一缩放比例，按照第一缩放比例对动态内容进行缩放；将缩放后的动态内容进行显示。由于在获取显示指令之前，已将应用界面根据屏幕宽度与第一预设值的比值进行缩放，使屏幕上显示的视图宽度固定在一个确定的值。进而根据第一预设值与动态内容的宽度的比值作为动态内容的第一缩放比例，对动态内容进行缩放，从而使得动态内容显示的宽度与屏幕宽度一致，有效改善了动态内容的显示效果。

附图说明

图1-1为动态内容的宽度小于屏幕宽度时显示的效果图；

图1-2为动态内容的宽度大于屏幕宽度时显示的效果图；

图2为一个实施例中动态内容显示方法的流程图；

图3-1为一个实施例中动态内容的宽度小于屏幕宽度时缩放后的效果图；

图3-2为一个实施例中动态内容的宽度大于屏幕宽度时缩放后的效果图；

图4为一个实施例中动态内容显示装置的结构示意图；

图5为又一个实施例中动态内容显示装置的结构示意图；

图6为一个实施例中第一缩放模块的结构示意图；

图7为再一个实施例中动态内容显示装置的结构示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

在一个实施例中，如图2所示，提供了一种动态内容显示的方法，具体包括：

步骤202，通过应用界面获取显示指令，应用界面是按照屏幕宽度与第一预设值的比值进行缩放显示的。

应用界面指的是安装在终端上的应用的操作界面。应用是指能够提供二次开发或者能够进行自定义动态内容的软件***，如ERP***。在iOS(苹果移动设备操作***)或Android(安卓)操作***中，应用包括但不限于基于HTML的轻应用、iOS或Android操作***原生应用等。终端包括但不限于能够安装应用的智能手机、平板电脑、个人数字助理等。屏幕是指终端上显示应用界面的屏幕。屏幕宽度可以是终端竖着时屏幕的宽度，也可以终端横着时屏幕的宽度，宽度是指通过API(ApplicationProgrammingInterface，应用程序编程接口)接口获得的像素点，与屏幕物理点以及视网膜屏等无关。第一预设值是个常量并且为正数。为了避免应用界面的过度缩放，该常量采用与屏幕宽度相同的数量级。可以是根据iPhone(苹果公司的智能手机)开发工具习惯上使用的值，如320。屏幕宽度与第一预设值的比值也就是应用界面的缩放比例，即应用界面的第一缩放比例＝屏幕宽度/第一预设值。根据屏幕宽度与第一预设值的比值缩放应用界面，从而使得在屏幕上显示的视图固定在一个确定的宽度值。

步骤204，根据显示指令，加载动态内容。

动态内容是指通过应用得到的内容，可以是利用终端上的应用生成的内容，也可以利用该应用通过网络获取到的具有该应用支持格式的内容。动态内容包括但不限于报表、图表和图片等。

动态内容加载时，不同的动态内容可对应不同的容器，如，报表对应的容器可以是HTML((HyperTextMark-upLanguage，超文本标记语言)页面，具体的可采用HTML5(HTML的第五次修改版本)页面。

步骤206，获取第一预设值与动态内容的宽度的比值作为动态内容的第一缩放比例，按照第一缩放比例对动态内容进行缩放。

动态内容的宽度由内容提供者来提供。具体的，可以是内容提供者利用该应用生成动态文件时，根据该应用默认格式确定的动态内容的宽度，或根据该应用自定义格式确定的动态内容的宽度。也可以是内容提供者利用其它软件或***预先生成动态内容时确定的宽度。动态内容的宽度可以是动态内容对应的容器的宽度。第一预设值可以是在屏幕上所显示的视图的宽度。在加载动态内容时，可通过API接口获取动态内容的宽度。第一预设值与动态内容的宽度的比值也就是动态内容的缩放比例，即动态内容的第一缩放比例为＝第一预设值/动态内容的宽度，在基于应用界面的第一缩放比例＝屏幕宽度/第一预设值的基础上，第一预设值即为动态内容的显示宽度。

步骤208，将缩放后的动态内容进行显示。

将缩放后的动态内容在屏幕上进行显示，如果动态内容较多，则会在屏幕的最右侧出现纵向滚动条。如图3所示，为动态内容在屏幕上显示的效果图。其中图3-1中，动态内容的宽度为320，屏幕宽度为480，动态内容的宽度小于屏幕宽度，经过应用界面的缩放与动态内容的缩放之后，在屏幕上显示出的视图宽度与屏幕宽度相当。既不存在空白区域，也未形成横向滚动条。图3-2中，动态内容的宽度为400，屏幕宽度为320，动态内容的宽度大于屏幕宽度，经过应用界面的缩放与动态内容的缩放之后，在屏幕上显示出的视图宽度与屏幕宽度一致，既不存在空白区域，也未形成横向滚动条。

本实施例中，通过应用界面获取显示指令，应用界面是按照屏幕宽度与第一预设值的比值进行缩放显示的；根据显示指令，加载动态内容；获取第一预设值与动态内容的宽度的比值作为动态内容的第一缩放比例，按照第一缩放比例对动态内容进行缩放；将缩放后的动态内容进行显示。由于在获取显示指令之前，已将应用界面根据屏幕宽度与第一预设值的比值进行缩放，使屏幕上显示的视图宽度固定在一个确定的值。进而根据第一预设值与动态内容的宽度的比值作为动态内容的第一缩放比例，对动态内容进行缩放，从而使得动态内容显示的宽度与屏幕宽度一致，有效改善了动态内容的显示效果。

在一个实施例中，通过应用界面获取显示指令的步骤之前，还包括：对应用界面进行初始化；分别获取屏幕宽度和第一预设值；计算屏幕宽度与第一预设值的比值，作为应用界面的第一缩放比例；按照应用界面的第一缩放比例对应用界面进行缩放。

本实施例中，在启动应用时，首先对应用界面进行初始化。以应用对应的容器为HTML页面为例进行说明。通过Javascript(脚本语言)代码动态设置<meta>(meta-information，元信息)标签viewport(窗口)属性，来实现应用界面初始化。通过API接口获得屏幕宽度。屏幕宽度根据终端的不同而不同。具体的，可通过Javascript的API接口，获得widows.screen.width所对应的数据，由此得到屏幕宽度。假设屏幕宽度为480，第一预设值为320，那么就可以得到应用界面对应的缩放比例为：480/320＝1.5。根据该缩放比例，从而可以确定<metaname＝“viewport”content＝“width＝device-width,target-densitydpi＝device-dpi,user-scalable＝no,initial-scale＝1.5”>。

在一个实施例中，获取第一预设值与动态内容的宽度的比值作为动态内容的第一缩放比例，按照第一缩放比例对动态内容进行缩放的步骤包括：获取动态内容对应的容器；根据第一预设值与动态内容的宽度的比值，对容器配置对应的属性；根据配置后的属性，对动态内容进行缩放调整。

本实施例中，动态内容可以采用不同的加载方式，在动态内容加载过程中通过API可获得该动态内容对应的容器。可根据上述实施例中提及的方式计算的动态内容的第一缩放比例，也就是第一预设值与动态内容的宽度的比值，根据动态内容的第一缩放比例对容器配置对应的属性。以报表对应的容器是HTML页面为例，容器对应的属性为CSS(CascadingStyleSheets，层叠样式表)属性。报表可通过ajax(一种网页开发技术)进行加载，在加载过程中可获知其对应的容器即HTML页面dom(DocumentObjectModel，文件对象模型)结构中的一个节点。假设，第一预设值为320，报表的宽度为400，则动态内容即报表的第一缩放比例为320/400＝0.8。对该比例求倒数即得到400/320＝1.25。设置容器的CSS3属性：

对于iOS或Android操作***源生应用的动态内容也可采用同样的方式进行缩放。例如，可采用同样的方式将Android操作***中不同尺寸的绘图绘制到画布上进行显示。

在一个实施例中，将缩放后的动态内容在屏幕上进行显示的步骤之后，还包括：捕捉屏幕转向事件；获取转向后的屏幕宽度与第二预设值；根据转向后的屏幕宽度与第二预设值的比值和第二预设值与动态内容的宽度的比值，对动态内容在转向后进行缩放；将在转向后进行缩放得到的动态内容进行显示。

本实施例中，终端的屏幕可以进行旋转。也就是终端可以是竖着也可以是横着。如果终端竖着放，并且动态内容的宽度大于屏幕宽度时，动态内容显示的字体变小，使得用户看着不舒服。

在终端旋转之后，屏幕宽度随即发生变化。通过重力感应的方式来判断屏幕是否发生转向，通过捕捉屏幕转向时间，获取转向后的屏幕宽度。第二预设值与第一预设值类似，也是个常量并且为正数，该常量采用与屏幕宽度相同的数量级，如480。在一个实施例中，根据转向后的屏幕宽度与第二预设值的比值和第二预设值与动态内容的宽度的比值，对动态内容在转向后进行缩放的步骤包括：计算转向后的屏幕宽度与第二预设值的比值，作为应用界面的第二缩放比例；按照应用界面的第二缩放比例对应用界面进行缩放；计算第二预设值与动态内容的宽度的比值作为动态内容的第二缩放比例；按照动态内容的第二缩放比例对动态内容进行缩放。具体的，根据应用界面的第二缩放比例＝屏幕宽度/第二预设值，动态内容的第二缩放比例＝第二预设值/动态内容的宽度，对动态内容进行转向后的缩放，将缩放后的动态内容进行显示，并使得屏幕上显示的视图宽度与屏幕宽度再次保持一致。从而为用户提供了不同的显示比例，方便了用户选择。

在一个实施例中，如图4所示，提供了一种动态内容显示的装置，该装置包括：第一获取模块402、加载模块404、第一缩放模块406和显示模块408，其中：

第一获取模块402，用于通过应用界面获取显示指令，应用界面是按照屏幕宽度与第一预设值的比值进行缩放显示的。

加载模块404，用于根据显示指令，加载动态内容。

第一缩放模块406，用于获取第一预设值与动态内容的宽度的比值作为动态内容的第一缩放比例，按照第一缩放比例对动态内容进行缩放。

显示模块408，用于将缩放后的动态内容进行显示。

在一个实施例中，如图5所示，该装置还包括：初始化模块410、第二获取模块412、计算模块414和第二缩放模块416，其中：

初始化模块410，用于对应用界面进行初始化。

第二获取模块412，用于分别获取屏幕宽度和第一预设值。

计算模块414，用于计算屏幕宽度与第一预设值的比值，作为应用界面的第一缩放比例。

第二缩放模块416，用于按照应用界面的第一缩放比例对应用界面进行缩放。

在一个实施例中，如图6所示，第一缩放模块406包括：容器获取单元406a、属性配置单元406b和调整单元406c，其中：

容器获取单元406a，用于获取所述动态内容对应的容器；

属性配置单元406b，用于根据所述第一预设值与所述动态内容的宽度的比值，对所述容器配置对应的属性；

调整单元406c，用于根据配置后的属性，对所述动态内容进行缩放调整。

在一个实施例中，如图7所示，装置还包括：捕捉模块418，用于捕捉屏幕转向事件。

第二获取模块412还用于获取转向后的屏幕宽度与第二预设值；第一缩放模块406还用于根据转向后的屏幕宽度与第二预设值的比值和第二预设值与动态内容的宽度的比值，对动态内容在转向后进行缩放；显示模块408还用于将在转向后进行缩放得到的动态内容进行显示。

在一个实施例中，计算模块414还用于计算转向后的屏幕宽度与第二预设值的比值，作为应用界面的第二缩放比例；第二缩放模块416还用于按照应用界面的第二缩放比例述应用界面进行缩放；计算模块414还用于计算第二预设值与动态内容的宽度的比值作为动态内容的第二缩放比例；第一缩放模块406还用于按照动态内容的第二缩放比例对动态内容进行缩放。

以上实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种动态内容显示的方法，所述方法包括：

通过应用界面获取显示指令，所述应用界面是按照屏幕宽度与第一预设值的比值进行缩放显示的；

根据所述显示指令，加载动态内容；

获取所述第一预设值与所述动态内容的宽度的比值作为动态内容的第一缩放比例，按照所述第一缩放比例对所述动态内容进行缩放；

将缩放后的动态内容进行显示。

2.根据权利要求1所述的方法，其特征在于，所述通过应用界面获取显示指令的步骤之前，还包括：

对所述应用界面进行初始化；

分别获取所述屏幕宽度和所述第一预设值；

计算所述屏幕宽度与所述第一预设值的比值，作为所述应用界面的第一缩放比例；

按照所述应用界面的第一缩放比例对所述应用界面进行缩放。

3.根据权利要求2所述的方法，其特征在于，所述获取所述第一预设值与所述动态内容的宽度的比值作为动态内容的第一缩放比例，按照所述第一缩放比例对所述动态内容进行缩放的步骤包括：

获取所述动态内容对应的容器；

根据所述第一预设值与所述动态内容的宽度的比值，对所述容器配置对应的属性；

根据配置后的属性，对所述动态内容进行缩放调整。

4.根据权利要求3所述的方法，其特征在于，所述将缩放后的动态内容在屏幕上进行显示的步骤之后，还包括：

捕捉所述屏幕转向事件；

获取转向后的屏幕宽度与第二预设值；

根据所述转向后的屏幕宽度与所述第二预设值的比值和所述第二预设值与所述动态内容的宽度的比值，对所述动态内容在转向后进行缩放；

将在转向后进行缩放得到的动态内容进行显示。

5.根据权利要求4所述的方法，其特征在于，所述根据所述转向后的屏幕宽度与所述第二预设值的比值和所述第二预设值与所述动态内容的宽度的比值，对所述动态内容在转向后进行缩放的步骤包括：

计算所述转向后的屏幕宽度与所述第二预设值的比值，作为所述应用界面的第二缩放比例；

按照所述应用界面的第二缩放比例对所述应用界面进行缩放；

计算所述第二预设值与所述动态内容的宽度的比值作为所述动态内容的第二缩放比例；

按照所述动态内容的第二缩放比例对所述动态内容进行缩放。

6.一种动态内容显示的装置，其特征在于，所述装置包括：

第一获取模块，用于通过应用界面获取显示指令，所述应用界面是按照屏幕宽度与第一预设值的比值进行缩放显示的；

加载模块，用于根据所述显示指令，加载动态内容；

第一缩放模块，用于获取所述第一预设值与所述动态内容的宽度的比值作为动态内容的第一缩放比例，按照所述第一缩放比例对所述动态内容进行缩放；

显示模块，用于将缩放后的动态内容进行显示。

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

初始化模块，用于对所述应用界面进行初始化；

第二获取模块，用于分别获取所述屏幕宽度和所述第一预设值；

计算模块，用于计算所述屏幕宽度与所述第一预设值的比值，作为所述应用界面的第一缩放比例；

第二缩放模块，用于按照所述应用界面的第一缩放比例对所述应用界面进行缩放。

8.根据权利要求7所述的装置，其特征在于，所述第一缩放模块包括：

容器获取单元，用于获取所述动态内容对应的容器；

属性配置单元，用于根据所述第一预设值与所述动态内容的宽度的比值，对所述容器配置对应的属性；

调整单元，用于根据配置后的属性，对所述动态内容进行缩放调整。

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

捕捉模块，用于捕捉所述屏幕转向事件；

所述第二获取模块还用于获取转向后的屏幕宽度与第二预设值；所述第一缩放模块还用于根据所述转向后的屏幕宽度与所述第二预设值的比值和所述第二预设值与所述动态内容的宽度的比值，对所述动态内容在转向后进行缩放；所述显示模块还用于将在转向后进行缩放得到的动态内容进行显示。

10.根据权利要求9所述的装置，其特征在于，所述计算模块还用于计算所述转向后的屏幕宽度与所述第二预设值的比值，作为所述应用界面的第二缩放比例；所述第二缩放模块还用于按照所述应用界面的第二缩放比例对所述应用界面进行缩放；所述计算模块还用于计算所述第二预设值与所述动态内容的宽度的比值作为所述动态内容的第二缩放比例；所述第一缩放模块还用于按照所述动态内容的第二缩放比例对所述动态内容进行缩放。