CN105975576A - 终端内容适配显示方法、装置和终端 - Google Patents

Abstract

本发明公开一种终端内容适配显示方法、装置和终端。该方法包括：将接收的待显示页面数据嵌套到容器中，其中，所述容器设置有CSS自适应扩充属性，使得所述容器的宽度等于所述待显示页面的宽度；根据所述容器宽度和所述终端的屏幕宽度确定所述容器的缩放比例；通过脚本语言为所述容器动态设置缩放属性，其中所述容器的缩放比例为所述缩放属性的参数；根据所述缩放比例对所述容器中的待显示页面进行等比例缩放后显示在所述终端。本发明通过为要适配的待显示页面数据增加一个容器，对容器进行整体缩放，由此可以在不需要二次处理数据的情况下无损地把各种待显示页面数据完整地展示到移动端。

Description

终端内容适配显示方法、装置和终端

技术领域

本发明涉及终端页面显示领域，特别涉及一种终端内容适配显示方法、装置和终端。

背景技术

现在几乎所有的网站都有PC端和移动端，很多情况下移动端的部分页面会采用PC端直接下发过来的数据。如图1A-图1C所示，因为终端2为移动端，待显示页面1的数据为PC端数据，PC端数据都是基于PC端的，所以待显示页面1的大于终端2的屏幕，所以下发到终端2的待显示页面1的数据就会出现适配问题。

现有技术通常采用以下几种方式处理下发数据在移动端的适配问题。第一种，通过前台处理，获取移动端的设备大小，然后把页面的所有元素强制设置成移动端的设备大小，其中前台与后台相对应，主要负责浏览器页面或APP页面的展示。第二种，在后台对下发过来的PC端数据进行二次处理，针对不同移动设备生成适合移动端的数据。第三种，不使用PC端数据，针对所有的PC端数据再去添加一次移动版。

但是现有的移动端数据适配显示方法都存在各自的缺陷。

第一种前台强制对待显示页面每一元素分别进行大小、位置的更改，对于移动端本来性能要求比较高，所以大量地操作页面节点十分消耗性能，其中节点指的是web页面中每一个图片文字的小容器，一个页面有大量的节点。每一个节点都有自己的宽度大小。此外，强制去更改原有数据的属性，会导致页面虽然适配了移动端，但是页面会乱掉，打乱了原来数据的页面结构出现大量的混乱页面。

第二种后台对下发过来的PC端数据进行二次处理的方法，比较耗费性能，也比较容易出现问题，且耗费时间。

第三种方法对于商品销售平台等用户而言，由于PC端页面繁多，如果每一个商品页面都去人为添加一个移动端页面，太消耗时间；而且对有些商家而言，添加移动端页面技术难度太高。

发明内容

鉴于以上技术问题，本发明提供了一种终端内容适配显示方法、装置和终端，可以在不需要二次处理数据的情况下无损地把各种待显示页面数据完整地展示到移动端。

根据本发明的一个方面，提供一种终端内容适配显示方法，包括：

将接收的待显示页面数据嵌套到容器中，其中，容器设置有CSS自适应扩充属性，使得容器宽度等于待显示页面的宽度；

根据容器宽度和终端的屏幕宽度确定容器的缩放比例；

通过脚本语言为容器动态设置缩放属性，其中容器的缩放比例为缩放属性的参数；

根据缩放比例对容器中的待显示页面进行等比例缩放后显示在该终端。

在本发明的一个实施例中，根据容器宽度和终端的屏幕宽度确定容器的缩放比例包括：确定容器的缩放比例为终端的屏幕宽度除以容器宽度的商。

在本发明的一个实施例中，将接收的待显示页面数据嵌套到容器中包括：通过div标签嵌套待显示页面数据。

在本发明的一个实施例中，CSS自适应扩充属性为display:table()属性。

在本发明的一个实施例中，终端内容适配显示方法还包括：

通过javascript的document.documentelement.clientwidth方法获取终端的屏幕宽度；

通过javascript的offsetwidth方法获取容器宽度。

在本发明的一个实施例中，终端内容适配显示方法还包括：

对容器添加限制标签，其中，限制标签的宽度就是屏幕宽度，限制标签的高度就是容器缩放以后的高度；

为限制标签设置隐藏属性，以隐藏容器缩放后超出限制标签的留白部分。

在本发明的一个实施例中，限制标签的宽、高通过javascript动态设置；隐藏属性为overflow:hidden()属性。

在本发明的一个实施例中，根据缩放比例对容器中的待显示页面进行等比例缩放包括：

对待显示页面内的所有子元素同步进行等比例缩放，其中，容器中的待显示页面进行等比例缩放的缩放中心点为容器左上端点。

在本发明的一个实施例中，容器有多个，多个待显示页面通过多个容器在终端显示。

根据本发明的另一方面，提供一种终端内容适配显示装置，包括数据嵌套模块、缩放比确定模块、缩放属性设置模块、缩放模块和显示模块，其中：

数据嵌套模块，用于将接收的待显示页面数据嵌套到容器中，其中，容器设置有CSS自适应扩充属性，使得容器的宽度等于待显示页面的宽度；

缩放比确定模块，用于根据容器宽度和终端的屏幕宽度确定容器的缩放比例；

缩放属性设置模块，用于通过脚本语言为容器动态设置缩放属性，其中容器的缩放比例为缩放属性的参数；

缩放模块，用于根据缩放比例对容器中的待显示页面进行等比例缩放；

显示模块，用于将等比例缩放后的待显示页面显示在终端。

在本发明的一个实施例中，缩放比确定模块用于确定终端的屏幕宽度除以容器宽度的商为容器的缩放比例。

在本发明的一个实施例中，数据嵌套模块用于通过div标签嵌套待显示页面数据。

在本发明的一个实施例中，CSS自适应扩充属性为display:table()属性。

在本发明的一个实施例中，终端内容适配显示装置还包括屏幕宽度获取模块和容器宽度获取模块，其中：

屏幕宽度获取模块，用于通过javascript的document.documentelement.clientwidth方法获取终端的屏幕宽度；

容器宽度获取模块，用于通过javascript的offsetwidth方法获取容器宽度。

在本发明的一个实施例中，终端内容适配显示装置还包括限制标签添加模块和隐藏属性设置模块，其中：

限制标签添加模块，用于对容器添加限制标签，其中，限制标签的宽度就是屏幕宽度，限制标签的高度就是容器缩放以后的高度；

隐藏属性设置模块，用于为限制标签设置隐藏属性，以隐藏容器缩放后超出限制标签的留白部分。

在本发明的一个实施例中，限制标签的宽、高通过javascript动态设置；隐藏属性为overflow:hidden()属性。

在本发明的一个实施例中，缩放模块用于对待显示页面内的所有子元素同步进行等比例缩放，其中，容器中的待显示页面进行等比例缩放的缩放中心点为容器左上端点。

在本发明的一个实施例中，容器有多个，多个待显示页面通过多个容器在终端显示。

根据本发明的另一方面，提供一种终端内容适配显示装置，包括存储器和处理器，其中：

存储器，用于存储指令；

处理器，用于执行存储器存储的指令，使得该装置执行实现上述任一实施例的方法的操作。

根据本发明的另一方面，提供一种终端，包括如上述任一实施例的终端内容适配显示装置。

本发明通过为要适配的待显示页面数据增加一个容器，对容器进行整体缩放，由此可以在不需要二次处理数据的情况下无损地把各种待显示页面数据完整地展示到移动端。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1A-图1C为现有技术中终端无法适配显示待显示页面的示意图。

图2为本发明终端内容适配显示方法一个实施例的示意图。

图3为本发明一个实施例中对待显示页面进行适配显示的示意图。

图4为本发明另一实施例中对待显示页面进行适配显示的示意图。

图5为本发明终端内容适配显示方法另一实施例的示意图。

图6为本发明一个实施例中容器等比例缩放后留白的示意图。

图7为本发明一个实施例中终端页面同时适配显示两个容器内待显示页面的示意图。

图8为本发明终端内容适配显示装置一个实施例的示意图。

图9为本发明终端内容适配显示装置另一实施例的示意图。

图10为本发明终端内容适配显示装置又一实施例的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为授权说明书的一部分。在这里示出和讨论的所有示例中，任何具体值应被解释为仅仅是示例性的，而不是作为限制。因此，示例性实施例的其它示例可以具有不同的值。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

图2为本发明终端内容适配显示方法一个实施例的示意图。优选的，本实施例可由本发明终端内容适配显示装置执行。该终端可以是手机、平板电脑等移动终端，也可以是PC等终端。该方法包括以下步骤：

步骤21，接收服务器下发的待显示页面数据，将接收的待显示页面数据嵌套到容器中，其中，待显示页面数据可以是移动端数据(即适合移动端显示的数据)或者PC端数据(即适合PC端显示的数据)。容器设置有CSS(Cascading Style Sheets，层叠样式表，也简称为CSS3)自适应扩充属性，使得容器宽度等于待显示页面的宽度。

CSS是一种用来为结构化文档(如HTML(HyperText MarkupLanguage，超级文本标记语言)文档或XML(Extensible MarkupLanguage，可扩展标记语言)应用)添加样式(例如字体、间距和颜色等)的计算机语言，由W3C(World Wide Web Consortium，万维网联盟)定义和维护。目前CSS最新版本是CSS2.1，为W3C的推荐标准。

在本发明的一个具体实施例中，步骤21可以包括：

步骤211，通过div标签嵌套待显示页面数据，构成一个最基本的容器，其中div标签是HTML语言中最的一个基本的单位，div是层叠样式表中的定位技术，全称DIVision，即为划分，div标签定义HTML文档中的分隔(DIVision)或部分(section)，div标签通常是成对出现的，比如<div>和</div>。

容器嵌套待显示页面数据的具体形式如下：

<div>待显示页面数据</div>

步骤212，为该div标签添加CSS自适应扩充属性，例如CSS自适应扩充属性具体可以为display:table属性，使得容器具有能被内部元素撑开的能力，待显示页面数据的最大宽度是多少，容器的最大宽度就是多少，其中为div标签添加display:table属性后，标签会作为块级表格来显示(类似<table>)。

在本发明的一个具体实施例中，为该div标签添加CSS自适应扩充display:table属性的具体形式如下：

此时，容器的宽度是待显示页面数据的最大宽度。

例如，当容器用来存放如图1所示的待显示页面1的数据时，容器会被撑大成为一个PC端容器，此时容器的宽度是待显示页面1的宽度，容器的高度是待显示页面1的高度。这样PC端的页面就可以完整无损的存在这个容器里面，PC下发什么样的待显示页面数据，容器就存储什么样的待显示页面数据，不会去强制更改待显示页面数据里的任何属性和节点属性，这样就保证了待显示页面的完整性和百分百的还原度。

步骤22，根据容器宽度和终端的屏幕宽度确定容器的缩放比例。

在本发明的一个具体实施例中，步骤22可以包括：

1、通过javascript的document.documentelement.clientwidth方法获取终端的屏幕宽度。其中javascript为直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型；javascript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(HyperText Markup Language，超级文本标记语言)网页上使用，用来给HTML网页增加动态功能。

2、通过javascript的offsetwidth方法获取容器宽度(因为容器有display:table属性，所以容器宽度可以被撑开超出屏幕手机宽度)。

3、根据公式(1)确定容器的缩放比例

缩放比例＝终端的屏幕宽度/容器宽度 (1)

其中，终端的屏幕宽度指的是终端的页面可见宽度，例如：手机终端横屏浏览时页面可见宽度指的是屏幕的长，手机终端竖屏浏览时页面可见宽度指的是屏幕的宽。

在本发明的另一具体实施例中，本发明还可以根据公式(2)确定容器的缩放比例。

缩放比例＝目标显示宽度/容器宽度 (2)

其中，目标显示宽度小于等于终端的屏幕宽度，目标显示宽度可以由用户根据需求进行设定。

步骤23，通过脚本语言javascript为容器动态设置缩放属性transform:scale(缩放比例，缩放比例)，其中，容器的缩放比例为缩放属性的参数。transform:scale属性是为CCS的新增属性，此属性可以把标签放大或者缩小。缩放属性transform:scale(X，Y)对标签内的所有元素同时进行缩放，其中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，Y是一个可选参数。若Y没有设置的话，则表示X，Y两个方向的缩放倍数是一样的，并以X为准。若设置X＝Y＝缩放比例，则按照缩放属性transform:scale(缩放比例，缩放比例)进行缩放，即为根据缩放比例对容器中的待显示页面进行等比例缩放。

步骤24，根据缩放比例对容器以及容器中的待显示页面1进行等比例缩放；之后如图3或图4所示，将容器嵌入终端页面中，使得等比例缩放后的待显示页面1显示在该终端2中。

根据缩放比例对容器中的待显示页面进行等比例缩放的过程具体可以包括：按照缩放属性transform:scale(缩放比例，缩放比例)，对待显示页面1内的字体、图片、文字、链接等所有子元素同步进行等比例缩放，其中，对容器中的待显示页面1进行等比例缩放的缩放中心点为容器左上端点。

在本发明的一个具体示例中，等比例缩放的过程如下：

<div style＝“transform:scale(0.5,0.5)”>待显示页面数据</div>

上述具体示例中容器和容器内的待显示页面数据，按照缩放属性transform:scale等比例缩小百分之五十。

对于采用公式(1)获取缩放比例的情况而言，在按照图2实施例的步骤24对如图1所示的待显示页面1进行等比例缩放后，容器宽度等于终端的屏幕宽度，待显示页面1在终端2的显示，如图3所示。

对于采用公式(2)获取缩放比例的情况而言，在按照图2实施例的步骤24对如图1所示的待显示页面1进行等比例缩放后，容器宽度等于目标显示宽度，目标显示宽度小于终端的屏幕宽度，待显示页面1在终端2的显示，如图4所示。由此，使得待显示页面1可以根据用户需求而设定的大小在终端页面中进行显示。例如将容器中的待显示页面1进行居中显示，宽度方向两边留一定距离，例如可以留给边线、滚动条等使用。

基于本发明上述实施例提供的终端内容适配显示方法，改变了以往在数据上去适配的思想，不用后台二次处理数据。而是为要适配的待显示页面数据增加一个容器，对容器进行整体缩放，而不是单个元素处理，这种整体缩放不会破坏原有页面数据结构。

本发明上述实施例无需大量节点操作，性能高，速度快；无需后台去做二次数据处理，减少了程序工作量；无论PC端数据还是移动端数据都能完美适配显示；不会破坏原有页面结构，可以将待显示页面原模原样地展示到移动端；适用范围广，可以适用于所有类型的浏览器和所有内嵌APP的页面；本发明上述实施例兼容性很好，可以支持安卓和IOS等系统，可以支持除极少数低版本设备外的大部分终端设备。

本发明上述实施例特别适用于商品详细页面在移动端的显示。经过大量的测试和用户反馈，已经十分高效地解决了现有技术中一直困扰用户的移动端适配问题，很好地解决了移动端商品详细页面混乱不适配的问题。

图5为本发明终端内容适配显示方法另一实施例的示意图。优选的，本实施例可由本发明终端内容适配显示装置执行。该方法包括以下步骤：

步骤51，接收服务器下发的待显示页面数据，将接收的待显示页面数据嵌套到容器中。图5实施例中的步骤51与图2实施例中的步骤21相同或类似，这里不再详述。

步骤52，根据容器宽度和终端的屏幕宽度确定容器的缩放比例。图5实施例中的步骤52与图2实施例中的步骤22相同或类似，这里不再详述。

步骤53，判断容器的缩放比例是否等于1。若容器的缩放比例等于1，则执行步骤54；否则，若容器的缩放比例不等于1，则执行步骤58。

步骤54，通过脚本语言javascript为容器动态设置缩放属性transform:scale(缩放比例，缩放比例)。图5实施例中的步骤54与图2实施例中的步骤23相同或类似，这里不再详述。

步骤55，按照缩放属性transform:scale(缩放比例，缩放比例)对容器进行缩放，即，根据缩放比例对容器中的待显示页面进行等比例缩放根据缩放比例对容器中的待显示页面进行等比例缩放。

在步骤55的缩放过程中，因为transform:scale属性有如下特征：虽然标签被放大或者缩小了，但是标签还是占有的未被缩放时候的位置大小(如图6所示)。这样待显示页面1就会出现缩放过后的留白3，此时需要把通过步骤56和步骤57将留白位置给隐藏掉。

步骤56，对容器添加限制标签，其中，对于采用公式(1)计算的缩放比进行缩放后的容器而言，限制标签的宽度就是屏幕宽度，限制标签的高度就是容器缩放以后的高度；对于采用公式(2)计算的缩放比进行缩放后的容器而言，限制标签的宽度就是目标显示宽度，限制标签的高度就是容器缩放以后的高度。

例如：在下述具体实施例中，标签"scale-cont"为子标签，即用于嵌套待显示页面数据的容器；标签"scale-parent"为父标签，即限制容器高、宽的限制标签。

<div id＝“scale-parent”>

<div id＝“scale-cont”>待显示页面数据</div>

</div>

在本发明的一个实施例中，限制标签的宽、高可以通过javascript动态设置。

在本发明的一个实施例中，若容器缩放以后的高度小于终端屏幕高度，则只用页面的一部分即可显示该容器，如图3和图4所示，只需将容器嵌入终端页面，就能实现待显示页面1的显示。

在本发明的另一实施例中，若容器缩放以后的高度大于终端屏幕高度，则可以自动添加滚动条，来滚动显示整个容器的高度内容，以实现待显示页面1的显示。

步骤57，给限制标签设置CSS隐藏属性，以隐藏容器缩放后超出限制标签的留白部分3。

在本发明的一个实施例中，CSS隐藏属性为overflow:hidden()属性，overflow:hidden的作用在于若子标签或者内容超出了父标签的高宽会被隐藏掉，隐藏留白3后的最终结果如图3所示，从而解决了留白问题。

步骤58，将容器嵌入终端页面中，使得等比例缩放后的待显示页面显示在该终端中。

上述实施例中，容器可以有多个，多个待显示页面通过多个容器嵌入终端页面中，使得等比例缩放后的待显示页面显示在该终端中。如图7所示，是一个终端2中通过两个容器同时显示两个待显示页面1-1、1-2的示意图。

本发明上述实施例中，等比例缩放针对可以不同待显示页面的宽度，进行不同比例的缩放或决定是否进行缩放。例如：对于采用公式(1)确定的缩放比例进行等比例缩放的情况，若终端的屏幕宽度为750，则对于宽度750的待显示页面不缩放，对于宽度850的待显示页面则将其缩小到750，对于宽度250的待显示页面则将其放大到750。

本发明上述实施例中可以实现把想缩放的待显示页面缩放、不缩放的待显示页面原样显示。本发明上述实施例可以适用于一个移动端页面本来不需要缩放时，内部嵌入了一个需要缩放的内容的场景。

本发明上述实施例首次为要适配的待显示页面数据增加一个容器，之后对容器进行整体缩放，而不是单个处理；这种整体缩放不会破坏原有页面数据结构，无需后台二次处理数据；无需强制更改页面所有的元素；无需判断待显示页面数据是移动端数据还是PC端数据，由此可以完整无损地、原样地展示各种待显示页面数据而不会破坏待显示页面数据结构。

本发明上述实施例可以将大于移动端的页面无需二次处理数据完整无损地嵌入到移动端，无论待显示页面多大、多小，都能完整展示在移动web端和APP内嵌端。

图8为本发明终端内容适配显示装置一个实施例的示意图。如图8所示的终端内容适配显示装置包括数据嵌套模块81、缩放比确定模块82、缩放属性设置模块83、缩放模块84和显示模块85，其中：

数据嵌套模块81，用于通过div标签将接收的待显示页面数据嵌套到容器中，其中，容器设置有CSS自适应扩充属性，使得容器的宽度等于待显示页面的宽度。例如，CSS自适应扩充属性可以采用display:table()属性。

缩放比确定模块82，用于根据容器宽度和终端的屏幕宽度确定容器的缩放比例。其中，缩放比确定模块82具体可以利用根据公式(1)或公式(2)确定容器的缩放比例。

缩放属性设置模块83，用于通过脚本语言为容器动态设置缩放属性，其中容器的缩放比例为缩放属性的参数；缩放属性具体可以是transform:scale属性。

缩放模块84，用于根据缩放比例对容器中的待显示页面进行等比例缩放，其中，缩放模块84可以用于对待显示页面内的所有子元素同步进行等比例缩放；容器中的待显示页面进行等比例缩放的缩放中心点为容器左上端点。

显示模块85，用于将缩放模块84进行等比例缩放后的待显示页面显示在终端。其中，如图7所示，显示模块85还可以用于同时将多个待显示页面通过多个容器在终端进行显示。

基于本发明上述实施例提供的终端内容适配显示装置，改变了以往在数据上去适配的思想，不用后台二次处理数据。而是为要适配的待显示页面数据增加一个容器，对容器进行整体缩放，而不是单个元素处理，这种整体缩放不会破坏原有页面数据结构。

本发明上述实施例无需大量节点操作，性能高，速度快；无需后台去做二次数据处理，减少了程序工作量；无论PC端数据还是移动端数据都能完美适配显示；不会破坏原有页面结构，可以将待显示页面原模原样地展示到移动端；适用范围广，可以适用于所有类型的浏览器和所有内嵌APP的页面；本发明兼容性很好，可以支持安卓和IOS等系统，可以支持除极少数低版本设备外的大部分终端设备。

图9为本发明终端内容适配显示装置另一实施例的示意图。与图8所示实施例相比，在图9所示实施例的终端内容适配显示装置还可以包括屏幕宽度获取模块86和容器宽度获取模块87，其中：

屏幕宽度获取模块86，用于通过javascript的document.documentelement.clientwidth方法获取终端的屏幕宽度。

容器宽度获取模块87，用于通过javascript的offsetwidth方法获取通过数据嵌套模块81嵌套待显示页面数据后的容器宽度。

本发明上述实施例可以通过屏幕宽度获取模块获取终端屏幕宽度，通过容器宽度获取模块获取容器宽度，由此可以方便缩放比确定模块根据容器宽度和终端的屏幕宽度确定容器的缩放比例。

在本发明的一个实施例中，如图9所示，终端内容适配显示装置还可以包括限制标签添加模块88和隐藏属性设置模块89，其中：

限制标签添加模块88，用于对容器添加限制标签，其中，限制标签的宽、高通过javascript动态设置。例如，对于采用公式(1)计算的缩放比进行缩放后的容器而言，限制标签的宽度就是屏幕宽度，限制标签的高度就是容器缩放以后的高度。

隐藏属性设置模块89，用于为限制标签设置隐藏属性，以隐藏容器缩放后超出限制标签的留白部分，其中隐藏属性为overflow:hidden()属性。

本发明上述实施例解决了图8实施例中利用transform:scale属性对容器进行缩放过后造成的如图6所示的留白问题。

图10为本发明终端内容适配显示装置又一实施例的示意图。如图10所示，所述终端内容适配显示装置10包括存储器101、处理器102、视频适配器103、通信接口105、输入/输出设备106和便携式存储器107，其中：

存储器101、处理器102、视频适配器103、通信接口105、输入/输出设备106和便携式存储器107通过总线108连接。总线108表示若干类型的总线结构中的任何一种总线结构的一个或多个，包括存储器总线或存储器控制器、外围总线、加速图形端口，以及处理器或使用各种总线体系结构中的任何一种的局部总线。

如图10所示的终端内容适配显示装置10包括存储设备。存储设备可包括存储器101和/或便携式存储器12。存储器101可包括RAM、ROM、闪存、硬盘、或其他众所周知的存储装置。可移动存储器12可包括闪存或在GSM通信系统中公知的用户身份模块(SIM)卡，或者其他诸如“智能卡”之类的公知存储装置。存储设备可用于存储数据和/或用于运行操作系统1011和应用程序1012的代码。示例数据可包括经由一个或多个有线或无线网络发送给和/或接收来自一个或多个网络服务器或其他设备的待显示网页数据、文本、图像、声音文件、视频数据、或其他数据集。存储器101可用于存储诸如国际移动订户身份(IMSI)等订户标识符，以及诸如国际移动设备标识符(IMEI)等设备标识符。可将此类标识符传送给网络服务器以标识用户和设备。

多个程序模块可被储存在存储器101和/或便携式存储器12中。这些程序包括操作系统1011、一个或多个应用程序1012、其他程序模块1013以及程序数据1014。这种应用程序或程序模块的示例可包括例如由于实现终端内容适配显示装置的一个或多个组件、或图2、图5的流程图中的一个或多个步骤和/或本文中所描述的其它实施例的计算机程序逻辑(例如计算机程序代码或指令)。

如图10所示的终端内容适配显示装置10还包括处理器102，用于执行存储设备存储的指令或程序，使得该装置执行实现上述任一实施例的方法(例如图2或图5实施例所示方法)的操作。

如图10所示的终端内容适配显示装置10还可以包括输入/输出设备106。输入/输出设备106可以包括诸如触摸屏、话筒、相机、物理键盘、和/或跟踪球的一个或多个输入设备，以及诸如扬声器的一个或多个输出设备。

其它可能的输出设备可包括压电或其他触觉输出设备。一些设备可服务一个以上的输入/输出功能。例如，触摸屏和显示屏104可被组合在单个输入/输出设备中。

如图10所示的终端内容适配显示装置10还可以包括显示屏104。显示屏104可以通过诸如视频适配器103之类的接口连接到总线108。显示屏104可在终端内容适配显示装置10外部或纳入其中。显示屏104可显示信息(例如最终显示经过容器整体缩放后的待显示页面)，以及作为用于接收用户命令和/或其它信息(例如，通过触摸、手指姿势、虚拟键盘等等)的用户界面。

如图10所示的终端内容适配显示装置10还可以通信接口105，通信接口105可以通过无线或有线连接方式与服务器11进行通信，例如可以获取服务器11下发的待显示页面数据。通信接口105支持处理器与外部设备(例如服务器11)间的双向通信。通信接口105可以包括用于与移动通信网络进行通信的蜂窝调制解调器、和/或其它基于无线电的调制解调器(例如，蓝牙和/或Wi-Fi)。

根据本发明的另一方面，提供一种终端，包括如上述任一实施例(例如图8-图10中任一实施例)所述的终端内容适配显示装置。本发明上述实施例的终端可以是手机、平板电脑等移动终端，也可以是PC等终端。

本发明上述实施例的终端还可包括电源、诸如全球定位系统(GPS)接收机之类的卫星导航系统接收机、加速计、和/或物理连接器，该物理连接器可以是USB端口、IEEE 1394端口、和/或RS-232端口。所示的组件并非是必需或者涵盖全部的，因为如本领域技术人员所理解地，任何组件可不存在且附加地其它组件可存在。

基于本发明上述实施例提供的终端，通过终端内容适配显示装置，改变了以往在数据上去适配的思想，不用后台二次处理数据。而是为要适配的待显示页面数据增加一个容器，对容器进行整体缩放，而不是单个元素处理，这种整体缩放不会破坏原有页面数据结构。

本发明上述实施例无需大量节点操作，性能高，速度快；无需后台去做二次数据处理，减少了程序工作量；无论PC端数据还是移动端数据都能完美适配显示；不会破坏原有页面结构，可以将待显示页面原模原样地展示到移动端；适用范围广，可以适用于所有类型的浏览器和所有内嵌APP的页面；本发明兼容性很好，可以支持安卓和IOS等系统，可以支持除极少数低版本设备外的大部分终端设备。

在上面所描述的数据嵌套模块81、缩放比确定模块82、缩放属性设置模块83、缩放模块84、屏幕宽度获取模块86、容器宽度获取模块87、限制标签添加模块88、隐藏属性设置模块89等功能单元可以实现为用于执行本申请所描述功能的通用处理器、可编程逻辑控制器(PLC)、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件或者其任意适当组合。

至此，已经详细描述了本发明。为了避免遮蔽本发明的构思，没有描述本领域所公知的一些细节。本领域技术人员根据上面的描述，完全可以明白如何实施这里公开的技术方案。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用非瞬时性存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

本发明的描述是为了示例和描述起见而给出的，而并不是无遗漏的或者将本发明限于所公开的形式。很多修改和变化对于本领域的普通技术人员而言是显然的。选择和描述实施例是为了更好说明本发明的原理和实际应用，并且使本领域的普通技术人员能够理解本发明从而设计适于特定用途的带有各种修改的各种实施例。

Claims (16)

1.一种终端内容适配显示方法，其特征在于，包括：

将接收的待显示页面数据嵌套到容器中，其中，所述容器设置有CSS自适应扩充属性，使得所述容器的宽度等于所述待显示页面的宽度；

根据所述容器宽度和所述终端的屏幕宽度确定所述容器的缩放比例；

通过脚本语言为所述容器动态设置缩放属性，其中所述容器的缩放比例为所述缩放属性的参数；

根据所述缩放比例对所述容器中的待显示页面进行等比例缩放后显示在所述终端。

2.根据权利要求1所述的方法，其特征在于，所述根据所述容器宽度和所述终端的屏幕宽度确定所述容器的缩放比例包括：

确定所述容器的缩放比例为所述终端的屏幕宽度除以所述容器宽度的商。

3.根据权利要求2所述的方法，其特征在于，

所述将接收的待显示页面数据嵌套到容器中包括：通过div标签嵌套所述待显示页面数据；

和/或，

所述CSS自适应扩充属性为display:table()属性；

和/或，

所述方法还包括：通过javascript的offsetwidth方法获取所述容器宽度；通过javascript的document.documentelement.clientwidth方法获取所述终端的屏幕宽度。

4.根据权利要求1-3中任一项所述的方法，其特征在于，还包括：

对所述容器添加限制标签，其中，限制标签的宽度就是屏幕宽度，限制标签的高度就是容器缩放以后的高度；

为所述限制标签设置隐藏属性，以隐藏所述容器缩放后超出所述限制标签的留白部分。

5.根据权利要求4所述的方法，其特征在于，

所述限制标签的宽、高通过javascript动态设置；

所述隐藏属性为overflow:hidden()属性。

6.根据权利要求1-3中任一项所述的方法，其特征在于，所述根据所述缩放比例对所述容器中的待显示页面进行等比例缩放包括：

对所述待显示页面内的所有子元素同步进行等比例缩放，其中，所述容器中的待显示页面进行等比例缩放的缩放中心点为容器左上端点。

7.根据权利要求1-3中任一项所述的方法，其特征在于，所述容器有多个，多个待显示页面通过多个容器在所述终端显示。

8.一种终端内容适配显示装置，其特征在于，包括数据嵌套模块、缩放比确定模块、缩放属性设置模块、缩放模块和显示模块，其中：

数据嵌套模块，用于将接收的待显示页面数据嵌套到容器中，其中，所述容器设置有CSS自适应扩充属性，使得所述容器的宽度等于所述待显示页面的宽度；

缩放比确定模块，用于根据所述容器宽度和所述终端的屏幕宽度确定所述容器的缩放比例；

缩放属性设置模块，用于通过脚本语言为所述容器动态设置缩放属性，其中所述容器的缩放比例为所述缩放属性的参数；

缩放模块，用于根据所述缩放比例对所述容器中的待显示页面进行等比例缩放；

显示模块，用于将等比例缩放后的所述待显示页面显示在所述终端。

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

缩放比确定模块用于确定所述终端的屏幕宽度除以所述容器宽度的商为所述容器的缩放比例。

10.根据权利要求9所述的装置，其特征在于，

数据嵌套模块用于通过div标签嵌套所述待显示页面数据；

和/或，

所述CSS自适应扩充属性为display:table()属性；

和/或，

所述装置还包括屏幕宽度获取模块和容器宽度获取模块，其中：屏幕宽度获取模块，用于通过javascript的document.documentelement.clientwidth方法获取所述终端的屏幕宽度；容器宽度获取模块，用于通过javascript的offsetwidth方法获取所述容器宽度。

11.根据权利要求8-10中任一项所述的装置，其特征在于，还包括限制标签添加模块和隐藏属性设置模块，其中：

限制标签添加模块，用于对所述容器添加限制标签，其中，限制标签的宽度就是屏幕宽度，限制标签的高度就是容器缩放以后的高度；

隐藏属性设置模块，用于为所述限制标签设置隐藏属性，以隐藏所述容器缩放后超出所述限制标签的留白部分。

12.根据权利要求11所述的装置，其特征在于，

所述限制标签的宽、高通过javascript动态设置；

所述隐藏属性为overflow:hidden()属性。

13.根据权利要求8-10中任一项所述的装置，其特征在于，

缩放模块用于对所述待显示页面内的所有子元素同步进行等比例缩放，其中，所述容器中的待显示页面进行等比例缩放的缩放中心点为容器左上端点。

14.根据权利要求8-10中任一项所述的装置，其特征在于，所述容器有多个，多个待显示页面通过多个容器在所述终端显示。

15.一种终端内容适配显示装置，其特征在于，包括存储器和处理器，其中：

存储器，用于存储指令；

处理器，用于执行所述指令，使得所述装置执行实现如权利要求1-7中任一项所述的方法的操作。

16.一种终端，其特征在于，包括如权利要求8-15中任一项所述的装置。