CN111399831A - 页面的展示方法和装置、存储介质、电子装置 - Google Patents

Abstract

本申请公开了一种页面的展示方法和装置、存储介质、电子装置。其中，该方法包括：获取目标终端上待展示的第一页面；在第一页面的展示分辨率与目标分辨率不匹配的情况下，基于目标分辨率和第一页面的展示分辨率对第一页面进行缩放处理，得到展示分辨率与目标分辨率匹配的第二页面，目标分辨率为与目标终端适配的分辨率；在目标终端上按照目标分辨率展示第二页面。本申请解决了调整页面样式的效率较低的技术问题，提高了页面适配的精确性、通用性和性能。

Description

页面的展示方法和装置、存储介质、电子装置

技术领域

本申请涉及计算机领域，具体而言，涉及一种页面的展示方法和装置、存储介质、电子装置。

背景技术

CSS是Cascading Style Sheet的缩写，一般译作“层叠样式表单”，是用于(增强)控制页面样式并允许将页面样式与页面内容分离的一种标记性语言。在页面制作时采用CSS页面样式，可以对页面样式，比如页面的布局、字体、颜色、背景等实现更加精确的控制。例如，通过采用CSS页面样式，在一个页面的上部显示图片，在该页面的中下部显示文本和图标，该页面中图片、文本、图标显示的位置、大小、颜色等则属于页面样式的范畴，该页面中显示的文本内容、图片内容等内容则属于页面的内容，页面样式可以通过CSS页面样式进行设置。

然而，虽然采用CSS页面样式能够将页面样式与页面内容相分离，实现对页面样式更加精确的控制，但是，由于CSS页面样式的样式取值需要直接写入CSS页面样式的源码中，在CSS样式的源码中，对于文字的位置、颜色等样式参数均做了设置，比如，“width：10px”，“height：14px”，设置的就是文字的宽度为10个像素单位，高为14个像素单位，“color：#49A9EE”则设置了文字的所要显示的颜色源码，而由于不同设备的显示分辨率不同，为了与不同的设备进行适配，页面设计人员需要对CSS页面样式进行修改，由源码的程序开发人员根据页面设计人员的需求重新编写CSS页面样式的源码，导致页面样式的维护人工成本增高且效率降低。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本申请实施例提供了一种页面的展示方法和装置、存储介质、电子装置，以至少解决调整页面样式的效率较低的技术问题，提高了页面适配的精确性、通用性和性能。

根据本申请实施例的一个方面，提供了一种页面的展示方法，包括：获取目标终端上待展示的第一页面；在第一页面的展示分辨率与目标分辨率不匹配的情况下，基于目标分辨率和第一页面的展示分辨率对第一页面进行缩放处理，得到展示分辨率与目标分辨率匹配的第二页面，其中，目标分辨率为与目标终端适配的分辨率；在目标终端上按照目标分辨率展示第二页面。

根据本申请实施例的另一方面，还提供了一种页面的展示装置，包括：获取单元，用于获取目标终端上待展示的第一页面；缩放单元，用于在第一页面的展示分辨率与目标分辨率不匹配的情况下，基于目标分辨率和第一页面的展示分辨率对第一页面进行缩放处理，得到展示分辨率与目标分辨率匹配的第二页面，其中，目标分辨率为与目标终端适配的分辨率；展示单元，用于在目标终端上按照目标分辨率展示第二页面。

根据本申请实施例的另一方面，还提供了一种存储介质，该存储介质包括存储的程序，程序运行时执行上述的方法。

根据本申请实施例的另一方面，还提供了一种电子装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器通过计算机程序执行上述的方法。

在本申请实施例中，通过执行缩放处理，页面适配对用户无感知，不管用户使用的是什么尺寸的设备，看到的都是全屏适配的效果，该方案能够用到任何尺寸的设备上，由于是自动适配，不再需要人整重新编写CSS页面样式的源码，可以解决了调整页面样式的效率较低的技术问题，进而达到自动适配的技术效果。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的页面的展示方法的硬件环境的示意图；

图2是根据本申请实施例的一种可选的页面的展示方法的流程图；

图3是根据本申请实施例的一种可选的页面缩放方式的示意图；

图4是根据本申请实施例的一种可选的页面的示意图；

图5是根据本申请实施例的一种可选的页面的示意图；

图6是根据本申请实施例的一种可选的页面处理性能的示意图；

图7是根据本申请实施例的一种可选的页面的展示装置的示意图；以及

图8是根据本申请实施例的一种终端的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

页面适配(即让页面在各种不同设备上都能正常展示的过程)是所有前端开发要面临的问题，也是前端开发最难的问题之一。如何让页面能够在各种设备，各种屏幕上都能正确展示，需要付出很多努力，可以采用viewport，rem,百分比，media query(CSS3中的一种查询语句)等等各种能力，以支持页面适配。

1)viewport是用户网页的可视区域，viewport翻译为中文可以叫做"视区"，浏览器是把页面放在一个虚拟的"窗口"(viewport)中，通常这个虚拟的"窗口"(viewport)比屏幕宽，这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对浏览器优化的网页的布局)，用户可以通过平移和缩放来看网页的不同部分，viewport的缺点是viewport类似于显示器分辨率，通过调整分辨率来适配页面尺寸，但此方案的兼容性很不好，如某个特性在不同浏览器上支持程度或者展现效果不一样，即存在兼容性问题，很多浏览器都不支持或者支持的不好，所以也无法通用；

2)EM是相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，REM是是CSS3新增的一个相对单位(root em，根em)，这个单位与em之间的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。rem的缺点是rem以页面字体大小为基准来做缩放，比如32px＝1rem,所以在编写代码时需要做很复杂的换算，同时由于四舍五入的关系还会导致精度不足，同时此方案还无法用于图片等元素上，通用性不足；

3)RPX(responsive pixel)，可以根据屏幕宽度进行自适应，是即时通讯软件中对于REM的一种应用的规定，或者说一种设计的方案，rpx的缺点是小程序(应用环境内，如即时通讯应用的环境内的一种基于Web改造的页面框架)的rpx方案类似于rem，在编译时自动换算，开发者不用关心换算过程，但同样存在精度不足的问题；

4)百分比的缺点是百分比除了精度问题的缺点外，还可能导致页面缩放过小或过大的问题，无法获得一致的用户体验。

可见，上文中提到的各种适配方案都存在一些缺点，无法完美的支持各种场景，比如兼容性问题，性能问题，精度问题，开发难度问题等等。小程序中使用的类似于rem的rpx方案，一样存在相似的问题。

根据本申请实施例的一方面，提供了一种页面的展示方法的方法实施例，能够解决以上的问题，是一种简单、高效、精确、通用的页面适配方案，能适配任意屏幕尺寸。

可选地，在本实施例中，上述页面的展示方法可以应用于如图1所示的由终端101和服务器103所构成的硬件环境中。如图1所示，服务器103通过网络与终端101进行连接，可用于为终端或终端上安装的客户端提供服务(如游戏服务、应用服务等)，可在服务器上或独立于服务器设置数据库105，用于为服务器103提供数据存储服务，如存储页面数据、样式数据等，上述网络包括但不限于：广域网、城域网或局域网，终端101并不限定于PC、手机、平板电脑等。

本申请实施例的页面的展示方法可以由终端101来执行，还可以是由服务器103和终端101共同执行。其中，终端101执行本申请实施例的页面的展示方法也可以是由安装在其上的客户端来执行。图2是根据本申请实施例的一种可选的页面的展示方法的流程图，如图2所示，该方法可以包括以下步骤：

步骤S202，目标终端的处理器获取待展示的第一页面，第一页面中样式的尺寸被设定为以像素px为单位。

可选地，第一页面主要包括两个部分，其一是页面样式，比如页面的布局、字体、颜色、背景等；其二时页面中的内容，如文本内容、图片内容等。

步骤S204，在第一页面的展示分辨率与目标分辨率不匹配的情况下，目标终端的处理器基于目标分辨率和第一页面的展示分辨率对第一页面进行缩放处理，得到展示分辨率与目标分辨率匹配的第二页面，目标分辨率为与目标终端适配的分辨率。此处的缩放处理包括缩小处理和放大处理两种类型。

上述的目标分辨率为用于显示第一页面的显示界面的分辨率，如设备的分辨率，显示客户端的分辨率等。

步骤S206，在目标终端上按照目标分辨率展示第二页面。

通过上述步骤S202至步骤S206，通过执行缩放处理，页面适配对用户无感知，不管用户使用的是什么尺寸的设备，看到的都是全屏适配的效果，该方案能够用到任何尺寸的设备上，由于是自动适配，不再需要人整重新编写CSS页面样式的源码，可以解决了调整页面样式的效率较低的技术问题，进而达到自动适配的技术效果。下面结合图2所示的步骤进一步详述本申请的技术方案：

在步骤S202提供的技术方案中，目标终端的处理器获取待展示的第一页面，第一页面中样式的尺寸可被设定为以像素为单位，也可以采用其它类型的单位，后续以采用像素为单位进行说明。

本申请的方案适用于多种场景，例如，浏览器客户端，用户在操作时，或者客户端启动时，可从服务器获取需要显示的第一页面，也可以从客户端本地获取；再如，小程序中(该小程序为在其他应用中打开的服务，如即时通讯软件中的小程序)，打开该小程序或者在该小程序中点击跳转时，会从服务器获取需要显示的第一页面。

后续以小程序场景为例进行说明，此时，获取目标终端上待展示的第一页面包括：在目标客户端中获取第一应用(相当于第二应用中的小程序)的第一页面，目标客户端为第二应用安装在目标终端上形成的客户端，第二应用和第一应用不同。

在步骤S204提供的技术方案中，在第一页面的展示分辨率与目标分辨率不匹配的情况下，目标终端的处理器基于目标分辨率和第一页面的展示分辨率对第一页面进行缩放处理，得到展示分辨率与目标分辨率匹配的第二页面，目标分辨率为与目标终端适配的分辨率。

可选地，判断第一页面的展示分辨率与目标分辨率是否匹配包括以下四种情况：

其一是，目标分辨率是目标终端的终端分辨率，确定第一页面的展示分辨率与目标分辨率是否匹配包括：在第一页面的展示分辨率与终端分辨率相同的情况下，确定第一页面的展示分辨率与终端分辨率匹配；在第一页面的展示分辨率与终端分辨率不相同的情况下，确定第一页面的展示分辨率与终端分辨率不匹配。

其二是，目标分辨率是目标终端为其设置的第一分辨率(该分辨率小于终端分辨率)，此时，确定第一页面的展示分辨率与目标分辨率是否匹配包括：在第一页面的展示分辨率与第一分辨率相同的情况下，确定第一页面的展示分辨率与第一分辨率匹配；在第一页面的展示分辨率与第一分辨率不相同的情况下，确定第一页面的展示分辨率与第一分辨率不匹配。

其三是，目标分辨率为目标客户端的显示分辨率，此时，确定第一页面的展示分辨率与目标分辨率是否匹配包括：在第一页面的展示分辨率与显示分辨率相同的情况下，确定第一页面的展示分辨率与显示分辨率匹配；在第一页面的展示分辨率与显示分辨率不相同的情况下，确定第一页面的展示分辨率与显示分辨率不匹配。

其四是，目标分辨率是目标客户端为其设置的第二分辨率(第二分辨率小于客户端的显示分辨率，第二分辨率表示的显示窗口相当于客户端的完整显示窗口的一部分)，此时，确定第一页面的展示分辨率与目标分辨率是否匹配包括：在第一页面的展示分辨率与第二分辨率相同的情况下，确定第一页面的展示分辨率与第二分辨率匹配；在第一页面的展示分辨率与第二分辨率不相同的情况下，确定第一页面的展示分辨率与第二分辨率不匹配。

可选地，基于目标分辨率和第一页面的展示分辨率对第一页面进行缩放处理，得到展示分辨率与目标分辨率匹配的第二页面包括：获取用于表示目标分辨率与第一页面的展示分辨率之间的比值的缩放参数，例如，目标分辨率为750px，展示分辨率为1080，那么缩放参数1.44；按照缩放参数对第一页面进行缩放，得到第二页面。

可选地，为了提高页面处理的效率，在按照缩放参数对第一页面进行缩放，得到第二页面时，可以调用图形处理器GPU来实现，目标终端的中央处理器CPU抓取数据，如缩放参数、用于表示第一页面的第一信息，然后将缩放参数和第一信息传递给目标终端的图形处理器；图形处理器按照缩放参数对第一信息进行transform处理，如用X轴的值translateX(x)进行X轴的缩放、用Y轴的值translateY(y)进行Y轴的缩放等，得到用于表示第二页面的第二信息。

在步骤S206提供的技术方案中，在目标终端上按照目标分辨率展示第二页面。

可选地，在目标终端上按照目标分辨率展示第二页面包括：在目标客户端的展示界面按照目标分辨率展示第二页面。

本申请提供了一种简单、高效、精确、通用的页面适配算法，能适配任意屏幕尺寸，虽然是基于小程序做介绍，但本方案不限于小程序，可用于所有客户端页面适配，作为一种可选的实施例，下面结合具体的实施方式进一步详述本申请的技术方案。

本方案达到的效果与小程序的rpx类似，能实现由系统自动处理屏幕适配，开发者只需要以视觉稿的尺寸编写样式，不需要做任何特殊处理。但实现原理不一样，小程序的rpx方案需要一个编译的过程，大概过程如下：

步骤1，开发者以rpx单位编写样式，rpx是一个抽象的单位，最终运行需要编译成px单位；

步骤2，代码在用户设备上运行前需要经过一个编译过程，把rpx编译成px，这个过程是rpx适配的核心，核心过程是将每个元素缩放到目标设备的比例，因为是对每个元素做缩放，所以计算量大，性能差，并且由于缩放过程导致的浮点数，最后四舍五入会导致若干像素的误差，导致出现布局不精确、图片被切边等情况，步骤2中的换算过程很复杂，需要很大的基础库支撑，基础库的代码大小也是不小的消耗；

步骤3，编译后rpx单位全部变成px单位了，这样就能在目标设备上运行了。

从以上过程可以看到，rpx单位虽然有自动适配，对开发者透明的优点，但存在一些天生的缺陷，如运行时的编译影响终端性能(需要遍历每个CSS样式，对其中的rpx单位都做一次换算，并把rpx单位切换成px单位，样式越复杂计算量越大)，缩放过程四舍五入导致样式不精确(缩放过程很难保证都是整数，所以需要大量的取整运算，导致精度丢失，如果不做取整又会导致性能下降，因为物理屏幕的最小单位是1px，如果不能与物理像素对齐，操作系统会自动选择最近的像素点显示，这个过程很耗性能，还会导致锯齿，所以一般都会取整)，图片被切边等问题。性能与样式对用户体验是很大的伤害，本方案除了拥有rpx方案的优点外，还能避免rpx方案的各种缺点，本方案流程如下：

步骤1，开发者以px单位直接编写样式，px与视觉稿的尺寸完全一致，不需要做任何换算。

步骤2，代码运行时，将页面整体做一次缩放，这个操作只需要一个简单的样式处理即可完成，在CSS中只需要一个简单的transform即可，这个过程利用了设备的硬件加速，且只需要做一次变换，对性能几乎无影响。同时也无需像rpx那样遍历样式对每个参数做换算，所以不管页面多复杂也不会影响性能。因为页面内的元素尺寸都不会改变，所以不管缩放的比例是否整数都不会对精度产生影响。

整个过程对开发者透明，步骤2的整体缩放(即对包括页面样式和页面数据的完整页面的缩放)也是瞬间完成，不需要任何编译与换算，所以性能与精确度都很完美。

图3展示了同一个页面在不同尺寸屏幕上缩放的原理，假设页面的视觉稿原始尺寸是750px，那么在左边750px的设备上就不需要缩放(scale＝1)，在更大尺寸的屏幕上，根据具体屏幕尺寸换算得到的缩放比例是1.44(scale＝1.44)，但是页面展示的内容都是750px。也就是通过缩放让750px在任何尺寸的屏幕上都能全屏展示。

相当于小程序的rpx方案、rem等方案，本方案的适配过程对开发者透明的，精度不输于rem，本方案是一种简单、高效、精确、通用的页面适配算法，能适配任意屏幕尺寸。与rpx方案对比，最大的优点是性能与精确性，图4为某地图页面的设计稿，图5位采用rpx方案和px方案的对比，在图5所示的rpx方案和px方案的真机运行的截图中，px方案与rpx方案存在着线的粗细等区别，可见本方案在精确性上存在优势，图6展示了rpx方案和px方案的性能，可见，本方案消耗的时间rpx方案的时间要低，即本方案性能上更为卓越。

页面适配是任何客户端展示都要面对的问题，本方案虽然主要阐述的是与小程序的对比，但本方案可用于任何客户端页面的适配，包括但不限于小程序、Web、Flash、iOS、Android等。本方案描述的是一个适配方式，与具体编程语言无关，可以根据需要采用相应的计算机语言编程实现。采用该方案，页面适配对用户无感知，不管用户使用的是什么尺寸的设备，看到的都是全屏适配的效果。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例所述的方法。

根据本申请实施例的另一个方面，还提供了一种用于实施上述页面的展示方法的页面的展示装置。图7是根据本申请实施例的一种可选的页面的展示装置的示意图，如图7所示，该装置可以包括：

获取单元701，用于获取目标终端上待展示的第一页面；

缩放单元703，用于在第一页面的展示分辨率与目标分辨率不匹配的情况下，基于目标分辨率和第一页面的展示分辨率对第一页面进行缩放处理，得到展示分辨率与目标分辨率匹配的第二页面，其中，目标分辨率为与目标终端适配的分辨率；

展示单元705，用于在目标终端上按照目标分辨率展示第二页面。

需要说明的是，该实施例中的获取单元701可以用于执行本申请实施例中的步骤S202，该实施例中的缩放单元703可以用于执行本申请实施例中的步骤S204，该实施例中的展示单元705可以用于执行本申请实施例中的步骤S206。

此处需要说明的是，上述模块与对应的步骤所实现的示例和应用场景相同，但不限于上述实施例所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在如图1所示的硬件环境中，可以通过软件实现，也可以通过硬件实现。

通过上述模块，通过执行缩放处理，页面适配对用户无感知，不管用户使用的是什么尺寸的设备，看到的都是全屏适配的效果，该方案能够用到任何尺寸的设备上，由于是自动适配，不再需要人整重新编写CSS页面样式的源码，可以解决了调整页面样式的效率较低的技术问题，进而达到自动适配的技术效果。

可选地，缩放单元包括：获取模块，用于获取用于表示目标分辨率与第一页面的展示分辨率之间的比值的缩放参数；缩放模块，用于按照缩放参数对第一页面进行缩放，得到第二页面。

可选地，缩放模块还可用于：将缩放参数和用于表示第一页面的第一信息传递给目标终端的图形处理器；调用图形处理器按照缩放参数对第一信息进行处理，得到用于表示第二页面的第二信息。

可选地，获取单元还可用于：在目标客户端中获取第一应用的第一页面，其中，目标客户端为第二应用安装在目标终端上形成的客户端，第二应用和第一应用不同；展示单元还可用于：在目标客户端的展示界面按照目标分辨率展示第二页面。

可选地，目标分辨率包括目标终端的终端分辨率，缩放单元还可用按照如下方式确定第一页面的展示分辨率与目标分辨率是否匹配：在第一页面的展示分辨率与终端分辨率相同的情况下，确定第一页面的展示分辨率与终端分辨率匹配；在第一页面的展示分辨率与终端分辨率不相同的情况下，确定第一页面的展示分辨率与终端分辨率不匹配。

可选地，目标分辨率包括目标客户端的显示分辨率，缩放单元还可用按照如下方式确定第一页面的展示分辨率与目标分辨率是否匹配：在第一页面的展示分辨率与显示分辨率相同的情况下，确定第一页面的展示分辨率与显示分辨率匹配；在第一页面的展示分辨率与显示分辨率不相同的情况下，确定第一页面的展示分辨率与显示分辨率不匹配。

此处需要说明的是，上述模块与对应的步骤所实现的示例和应用场景相同，但不限于上述实施例所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在如图1所示的硬件环境中，可以通过软件实现，也可以通过硬件实现，其中，硬件环境包括网络环境。

根据本申请实施例的另一个方面，还提供了一种用于实施上述页面的展示方法的服务器或终端。

图8是根据本申请实施例的一种终端的结构框图，如图8所示，该终端可以包括：一个或多个(图8中仅示出一个)处理器801、存储器803、以及传输装置805，如图8所示，该终端还可以包括输入输出设备807。

其中，存储器803可用于存储软件程序以及模块，如本申请实施例中的页面的展示方法和装置对应的程序指令/模块，处理器801通过运行存储在存储器803内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的页面的展示方法。存储器803可包括高速随机存储器，还可以包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器803可进一步包括相对于处理器801远程设置的存储器，这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

上述的传输装置805用于经由一个网络接收或者发送数据，还可以用于处理器与存储器之间的数据传输。上述的网络具体实例可包括有线网络及无线网络。在一个实例中，传输装置805包括一个网络适配器(Network Interface Controller，NIC)，其可通过网线与其他网络设备与路由器相连从而可与互联网或局域网进行通讯。在一个实例中，传输装置805为射频(Radio Frequency，RF)模块，其用于通过无线方式与互联网进行通讯。

其中，具体地，存储器803用于存储应用程序。

处理器801可以通过传输装置805调用存储器803存储的应用程序，以执行下述步骤：

获取目标终端上待展示的第一页面；

在第一页面的展示分辨率与目标分辨率不匹配的情况下，基于目标分辨率和第一页面的展示分辨率对第一页面进行缩放处理，得到展示分辨率与目标分辨率匹配的第二页面，其中，目标分辨率为与目标终端适配的分辨率；

在目标终端上按照目标分辨率展示第二页面。

处理器801还用于执行下述步骤：

在第一页面的展示分辨率与终端分辨率相同的情况下，确定第一页面的展示分辨率与终端分辨率匹配；

在第一页面的展示分辨率与终端分辨率不相同的情况下，确定第一页面的展示分辨率与终端分辨率不匹配。

采用本申请实施例，通过执行缩放处理，页面适配对用户无感知，不管用户使用的是什么尺寸的设备，看到的都是全屏适配的效果，该方案能够用到任何尺寸的设备上，由于是自动适配，不再需要人整重新编写CSS页面样式的源码，可以解决了调整页面样式的效率较低的技术问题，进而达到自动适配的技术效果。

可选地，本实施例中的具体示例可以参考上述实施例中所描述的示例，本实施例在此不再赘述。

本领域普通技术人员可以理解，图8所示的结构仅为示意，终端可以是智能手机(如Android手机、iOS手机等)、平板电脑、掌上电脑以及移动互联网设备(Mobile InternetDevices，MID)、PAD等终端设备。图8其并不对上述电子装置的结构造成限定。例如，终端还可包括比图8中所示更多或者更少的组件(如网络接口、显示装置等)，或者具有与图8所示不同的配置。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令终端设备相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：闪存盘、只读存储器(Read-Only Memory，ROM)、随机存取器(RandomAccess Memory，RAM)、磁盘或光盘等。

本申请的实施例还提供了一种存储介质。可选地，在本实施例中，上述存储介质可以用于执行页面的展示方法的程序代码。

可选地，在本实施例中，上述存储介质可以位于上述实施例所示的网络中的多个网络设备中的至少一个网络设备上。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：

获取目标终端上待展示的第一页面；

在第一页面的展示分辨率与目标分辨率不匹配的情况下，基于目标分辨率和第一页面的展示分辨率对第一页面进行缩放处理，得到展示分辨率与目标分辨率匹配的第二页面，其中，目标分辨率为与目标终端适配的分辨率；

在目标终端上按照目标分辨率展示第二页面。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：

在第一页面的展示分辨率与终端分辨率相同的情况下，确定第一页面的展示分辨率与终端分辨率匹配；

在第一页面的展示分辨率与终端分辨率不相同的情况下，确定第一页面的展示分辨率与终端分辨率不匹配。

可选地，本实施例中的具体示例可以参考上述实施例中所描述的示例，本实施例在此不再赘述。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在上述计算机可读取的存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在存储介质中，包括若干指令用以使得一台或多台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。

在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的客户端，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种页面的展示方法，其特征在于，包括：

获取目标终端上待展示的第一页面；

在所述第一页面的展示分辨率与目标分辨率不匹配的情况下，基于所述目标分辨率和所述第一页面的展示分辨率对所述第一页面进行缩放处理，得到展示分辨率与所述目标分辨率匹配的第二页面，其中，所述目标分辨率为与所述目标终端适配的分辨率；

在所述目标终端上按照所述目标分辨率展示所述第二页面。

2.根据权利要求1所述的方法，其特征在于，基于所述目标分辨率和所述第一页面的展示分辨率对所述第一页面进行缩放处理，得到展示分辨率与所述目标分辨率匹配的第二页面包括：

获取用于表示所述目标分辨率与所述第一页面的展示分辨率之间的比值的缩放参数；

按照所述缩放参数对所述第一页面进行缩放，得到所述第二页面。

3.根据权利要求2所述的方法，其特征在于，按照所述缩放参数对所述第一页面进行缩放，得到所述第二页面包括：

将所述缩放参数和用于表示所述第一页面的第一信息传递给所述目标终端的图形处理器；

调用所述图形处理器按照所述缩放参数对所述第一信息进行处理，得到用于表示所述第二页面的第二信息。

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

获取目标终端上待展示的第一页面包括：在目标客户端中获取第一应用的所述第一页面，其中，所述目标客户端为第二应用安装在所述目标终端上形成的客户端，所述第二应用和所述第一应用不同；

在所述目标终端上按照所述目标分辨率展示所述第二页面包括：在所述目标客户端的展示界面按照所述目标分辨率展示所述第二页面。

5.根据权利要求1至4中任意一项所述的方法，其特征在于，所述目标分辨率包括所述目标终端的终端分辨率，其中，确定所述第一页面的展示分辨率与目标分辨率是否匹配包括：

在所述第一页面的展示分辨率与所述终端分辨率相同的情况下，确定所述第一页面的展示分辨率与所述终端分辨率匹配；

在所述第一页面的展示分辨率与所述终端分辨率不相同的情况下，确定所述第一页面的展示分辨率与所述终端分辨率不匹配。

6.根据权利要求1至4中任意一项所述的方法，其特征在于，所述目标分辨率包括目标客户端的显示分辨率，其中，确定所述第一页面的展示分辨率与目标分辨率是否匹配包括：

在所述第一页面的展示分辨率与所述显示分辨率相同的情况下，确定所述第一页面的展示分辨率与所述显示分辨率匹配；

在所述第一页面的展示分辨率与所述显示分辨率不相同的情况下，确定所述第一页面的展示分辨率与所述显示分辨率不匹配。

7.一种页面的展示装置，其特征在于，包括：

获取单元，用于获取目标终端上待展示的第一页面；

缩放单元，用于在所述第一页面的展示分辨率与目标分辨率不匹配的情况下，基于所述目标分辨率和所述第一页面的展示分辨率对所述第一页面进行缩放处理，得到展示分辨率与所述目标分辨率匹配的第二页面，其中，所述目标分辨率为与所述目标终端适配的分辨率；

展示单元，用于在所述目标终端上按照所述目标分辨率展示所述第二页面。

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

获取模块，用于获取用于表示所述目标分辨率与所述第一页面的展示分辨率之间的比值的缩放参数；

缩放模块，用于按照所述缩放参数对所述第一页面进行缩放，得到所述第二页面。

9.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，所述程序运行时执行上述权利要求1至6任一项中所述的方法。

10.一种电子装置，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器通过所述计算机程序执行上述权利要求1至6任一项中所述的方法。

Images