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

本申请要求于2020年02月24日提交到中国专利局、优先权号为202010113477.6、发明名称为“页面的展示方法和装置、存储介质、电子装置”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。

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

背景技术：

css是cascadingstylesheet的缩写，一般译作“层叠样式表单”，是用于(增强)控制页面样式并允许将页面样式与页面内容分离的一种标记性语言。在页面制作时采用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是根据本申请实施例的一种终端的结构框图；

图9是根据本申请实施例的一种可选的页面还原方案的示意图；以及，

图10是根据本申请实施例的一种可选的页面还原方案的示意图。

具体实施方式

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

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

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

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

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

3)rpx(responsivepixel)，可以根据屏幕宽度进行自适应，是即时通讯软件中对于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等。本方案描述的是一个适配方式，与具体编程语言无关，可以根据需要采用相应的计算机语言编程实现。采用该方案，页面适配对用户无感知，不管用户使用的是什么尺寸的设备，看到的都是全屏适配的效果。

本申请的目标终端可以是用户终端，上述实施例解决的是用户终端屏幕适配的问题，就是怎样把一个页面完美的适配到用户终端上，在用户终端上全屏显示出来且不留边。

本申请的目标终端还可以是还原终端，还原终端主要用于对用户终端上显示的完整页面进行可视化还原(即把用户的画面及操作过程在后台还原出来的过程，类似于录屏)，可视化采集与还原是一种全新的应用场景，目前市面上没有完整的解决方案，更加未涉及设备尺寸还原部分。

在可视化还原中，在可视化还原中，分辨率与屏幕尺寸之间是存在关系的，分辨率体现的是屏幕颗粒的细腻程度，分辨率越高则画面越细腻，能展现更多的画面细节；屏幕尺寸体现的是画面的大小及宽高比例，屏幕尺寸越大则能展示越大的画面。分辨率和屏幕尺寸是互相依赖互相限制的关系，比如屏幕尺寸很大，但分辨率很低，那么也没法显示太大的图片，因为分辨率颗粒太大，一个像素就要占用很大的面积，这样整个屏幕能显示的图片大小就不会太大，比如早期的电影，虽然是有巨幕，但因为分辨率太低，所以播放出来的画面还是很粗糙，比如只能播放分辨率为480*320的画面；相反，现在的高清电影，银幕跟早期电影是差不多大的，但因为分辨率很高，所以可以显示很大的图片，比如现在的4k高清，可以显示分辨率为4096*2160的内容。可见，在相同的银幕大小(即屏幕尺寸)下，能播放完全不同分辨率的画面，分辨率越高能展示的内容越多。

设备屏幕尺寸多种多样，采集的设备与还原的设备一般都会是不同的尺寸，导致的结果就是还原的画面无法精确反映采集的画面，比如采集设备较大而还原终端较小，就可能出现在采集设备上能看到的元素，而在还原终端上就看不到；再如，采集设备上只需要一屏就能展示的内容，而在还原终端上要滚两屏才能展示完。在用户设备千差万别的情况下，如何完美的将页面渲染到用户设备上，如何将用户画面精确的还原到后台，并且兼容各种尺寸及分辨率，是非常重要的。

为了与不同尺寸的设备适配，相关技术中的还原操作需要采购大量的还原终端，需要专门的服务器做大量的处理来对不同的还原终端进行适配，有很高的设备维护成本，而本方案的还原方案可以在任意设备上进行，不需要专门的服务器，具有很好的兼容性及还原精确性。

本方案要解决的问题是把用户看到的画面完美的还原出来，用户看到多大就要还原出多大，并且要充分利用还原设备的屏幕尺寸，从而能让画面保持最大可能的清晰度。比如可以固定把画面还原在一个固定的尺寸上，这样就要求还原设备比采集设备尺寸更多或者是完全一样的设备，否则就不能完整显示出来，这样不但增加了还原设备的成本(用户的设备有多种多样，相当于要准备跟用户一样的设备做还原)，同时极大的降低了效率，每次还原都需要先去找设备，或者不管用户设备的尺寸直接还原，这样就不能精确体现用户看到的画面，极大的降低精确性及权威性。

使用本方案，可精确的记录与还原采集设备的尺寸，能精确的将用户画面在还原终端上精确的还原出来，包括一屏展示的内容及滚动的多屏，包括滚动的位置，不会受采集与引用设备尺寸的影响。

作为一个可选的实施方案，在真实环境中使用本申请的技术方案时，主要分为采集与还原两个部分，采集端可运行在用户手机(即用户终端)上，通过用户无感知的方式在后台自动采集用户设备信息，如屏幕尺寸、页面滚动位置等信息，屏幕尺寸及滚动位置包括横竖两个方向的信息，从而具有很好的通用性，不管横屏竖屏，不管哪个方向的滚动，不管使用的是什么尺寸的还原设备都能完美还原；还原端运行在管理后台，在还原播放视频时，根据采集端收集的尺寸等信息自动适配，以用户画面尺寸播放视频，真实还原用户操作时的状态。下文结合具体步骤进一步详述本申请的技术方案：

需要说明的是，本实施例中的目标分辨率为还原终端上用于进行还原展示的分辨率，如还原终端屏幕的物理分辨率、或还原终端上用于进行还原展示的部分屏幕的分辨率(例如分辨率为4096px*3112px的大屏设备，可将屏幕分为四个部分，每个部分的分辨率为1024*778，每个部分单独作为一个还原屏幕使用，px表示像素，为了描述方面，后文中分辨率的单位均为px)；第二分辨率即第二页面的实际分辨率，第二分辨率与目标分辨率存在如下关系中的至少之一：第二页面在宽度上的分辨率与目标分辨率在宽度上的分辨率相同；第二页面在高度上的分辨率与目标分辨率在高度上的分辨率相同；第一分辨率为第一页面的分辨率，若用户终端采用全屏展示的方式显示第一页面，那么第一分辨率为用户终端的物理分辨率，若用户终端采用分屏等非全屏展示的方式显示第一页面，那么第一分辨率为用户终端上展示第一页面的部分区域的分辨率。

后续以还原终端和用户终端均采用全屏的方式显示(即目标分辨率为还原终端屏幕的物理分辨率、第一分辨率为用户终端的物理分辨率)为例进行说明，对于还原终端或用户终端采用分屏等非全屏方式的实施方式，与此类似不再赘述。

步骤1，在用户终端按照第一分辨率展示第一页面时，采集第一页面并记录第一页面的分辨率，第一页面为用户终端在执行业务的过程中所展示的页面界面，此处的业务可以为保险、金融等业务，以保险为例，第一页面即用户浏览保险产品、咨询保险产品、购买保险产品、理赔等过程中的页面。

例如，运行在用户手机上的采集端，通过用户无感知的方式在后台自动采集用户设备信息，如屏幕尺寸(window.innerwidth，window.innerheight)，页面滚动位置(elem.scrolltop，elem.scrollleft)等信息(包括以像素为单位的内部宽度和高度，即第一分辨率)，然后这些信息会自动上报到日志后台的服务器记录下来。

步骤2，用户终端将采集的第一页面和第一分辨率发送给服务器端保存。

步骤3，在还原终端进行页面可视化还原时，从服务器获取第一页面，如从日志后台读取步骤1采集到的信息，以便于对用户画面的视窗内容进行精确还原，在保证真实的情况下体现用户当时看到的画面。

步骤4，为了与还原终端进行适配，对第一页面进行处理：基于目标分辨率和第一页面的展示分辨率对第一页面进行缩放处理，得到展示分辨率与目标分辨率匹配的第二页面。

考虑到还原效果侧重的是用户看到的画面内容，不是一比一的显示用户画面大小，这样就可以保证任何尺寸的设备都可以支持采集和还原，也就是对还原设备无要求，进一步提升了此方案的适用性。

在可视化还原中，分辨率与屏幕尺寸之间是存在关系的，分辨率体现的是屏幕颗粒的细腻程度，分辨率越高则画面越细腻，能展现更多的画面细节；屏幕尺寸体现的是画面的大小及宽高比例，屏幕尺寸越大则能展示越大的画面。需要说明的是，若用户终端和还原终端的显示屏的单个显示像素所占的尺寸是相同的(即相当于用户终端和还原终端的尺寸的单位都是“像素”)，则第一分辨率不仅是第一页面的分辨率，还表示用户终端的物理分辨率，即间接表示了用户终端的尺寸，类似地，目标分辨率也表示了第二页面的分辨率和还原终端的尺寸，即间接表示了还原终端的尺寸。若用户终端和还原终端的显示屏的单个显示像素所占尺寸不同，对于用户终端和还原终端的尺寸，可以根据单个显示像素所占的尺寸以及终端自身分辨率确定。下文以用户终端和还原终端的显示屏的单个显示像素所占尺寸相同为例进行说明。

由于用户终端的宽高比可能性较多，目标分辨率的宽高比是固定的，故目标分辨率不可能与所有用户终端的宽高比相同，为了保证还原终端上展示的内容与用户终端上一致，需要保证还原终端上还原的页面的宽高比与用户终端上展示的页面的宽高比一致，因此，在还原终端上展示的第二页面的第二分辨率可能与目标分辨率不同。

比如用户在屏幕较大的平板电脑上看网页，还原的设备是屏幕较小的手机，如果还原时要求尺寸完全一样那就不可能做到，但是由于需要还原的是用户看到的视窗大小，即用户看到多少内容，所以还原时可基于第一步获得的采集端数据，还原出用户画面，具体参见下述步骤：

步骤41，获取第一分辨率表示的宽度上的分辨率与第一分辨率表示的高度上的分辨率之间的第一宽高比，并获取目标分辨率表示的宽度上的分辨率与目标分辨率表示的高度上的分辨率之间的第二宽高比。

步骤42，判断第一宽高比与第二宽高比是否相同。

如果采集设备与还原设备尺寸完全一样，那么画面就会完全匹配，不会有任何的空白；如果尺寸不一样，但是宽高比例一样(即步骤43所描述的情况)，那么通过等比缩放后也能达到完全匹配的效果，这是最完美的情况。

但现实中遇到的大部分情况是两者尺寸不一样(即步骤44所描述的情况)，这时候就不能完全匹配，就会有一些留白，后文会分两种情况来说明具体的适配方案。

需要说明的是，下文描述的是宽高比，不用管具体的像素尺寸，因为尺寸问题可以通过等比缩放解决，影响画面内容的是宽高比，比如一个很长的图片，如果在一个正方形的屏幕上播放，那这个屏幕的宽高比就很不适合来显示这张图片，如果要把屏幕占满的话，那么就需要用宽度占满，但是高度就会不够用，图片就无法全部显示出来。这个例子是用来解释宽高比对画面展现的影响，在可视化回溯的场景中，可把用户看到的画面全部还原出来，所以不会采用例子中说的把宽度占满的策略，而是会选择把高度占满，然后宽度留空，这样就能精确还原用户看到的画面。

步骤43，在第一宽高比与第二宽高比相同的情况下，根据第一分辨率与目标分辨率之间的关系，对第一页面进行缩放，得到为第二分辨率的第二页面。

上述第二分辨率表示的高度上的分辨率与目标分辨率表示的高度上的分辨率相同、且第二分辨率表示的宽度上的分辨率与目标分辨率表示的宽度上的分辨率相同。

在根据第一分辨率与目标分辨率之间的关系对第一页面进行缩放时，例如，用户终端的第一分辨率为1600*1200，宽高尺寸比例为3:4，目标分辨率为800*600，宽高尺寸比例也为3:4，可以通过对第一页面进行等比缩放即可，需要说明的是，若直接将第一页面的尺寸缩小，分辨率不做改变，由于还原终端的分辨率较小，并不能按照第一分辨率显示出第二页面，所以可以根据第一分辨率中高度上的分辨率与目标分辨率中高度上的分辨率之间的比值m(如为2)对第一页面的尺寸进行等比缩小，那么可以将第一分辨率的高度上分辨率和宽度上的分辨率均乘以1/m，即可得到第二分辨率，如800*600。

类似地，若用户终端的第一分辨率为800*600，宽高尺寸比例为3:4，目标分辨率为1600*1200，宽高尺寸比例也为3:4，此时，若直接放大第一页面的尺寸，那么展示出来的第二页面的分辨率较低，也可以将第一页面的分辨率放大两倍即可，至于分辨率放大可以通过超分方案(超分是一项底层图像处理任务，将低分辨率的图像映射至高分辨率)实现。

步骤44，在第一宽高比与第二宽高比不相同的情况下，对第一页面进行缩放，得到为第二分辨率的第二页面。

在一个可选的实施例中，第二分辨率表示的高度上的分辨率与目标分辨率表示的高度上的分辨率相同，处理时可获取第一分辨率表示的高度上的分辨率与目标分辨率表示的高度上的分辨率之间的第一比值p，对第一页面进行缩放，即对第一页面的高度上的分辨率和宽度上的分辨率均乘以1/p，得到为第二分辨率的第二页面，第二页面在宽度上的分辨率小于目标分辨率表示的宽度上的分辨率。

如图9所示，展现的是还原设备比采集设备宽(即宽高比较大)的情况，这种时候为了将采集的画面完整还原出来，同时为了最大化的展现采集的画面，还原会将高度用满，然后空出右侧一部分的宽度(也可以是左侧的一部分宽度)，如果要把宽度用满，高度就会超出还原设备的屏幕，所以只能以高度适配，空出宽度。

下面以具体例子来说明此处的方案(假设用户终端和还原终端显示屏的单个显示像素所占的尺寸相同，即分辨率和尺寸相当于等同概念)：假设采集设备的尺寸(对应于第一分辨率)是300*200，宽高比为1.5，还原设备的尺寸(对应于目标分辨率)为100*50，宽高比为2，这时候需要以高度适配，也就是目标高度为height＝50，以此计算等比缩放比例(等比缩放意思是宽高都使用相同的缩放比例，这样画面才不会变形，否则会被拉伸或压缩)，缩放比例rate＝50/200＝0.25，以相同比例缩放宽度，宽度width＝300*0.25＝75，所以最终展现的尺寸(对应于第二分辨率)就是75*50，空白的宽度就是100-75＝25。这样就能将还原画面完美的渲染出来了，可以看到这里还原设备尺寸是小于采集设备的，但是宽高比更大，这就是本方案的一个特点，对采集与还原设备有100％的兼容性，不管是多大尺寸的屏幕都能完美支持。

在又一个可选的实施例中，第二分辨率表示的宽度上的分辨率与目标分辨率表示的宽度上的分辨率相同，处理时可获取第一分辨率表示的宽度上的分辨率与目标分辨率表示的宽度上的分辨率之间的第二比值q，对第一页面在高度上的分辨率和在宽度上的分辨率进行缩放，即对第一页面的高度上的分辨率和宽度上的分辨率均乘以1/q，得到为第二分辨率的第二页面，第二页面在宽度上的分辨率与目标分辨率表示的宽度上的分辨率相同，第二页面在高度上的分辨率小于目标分辨率表示的高度上的分辨率。

如图10所示，展现的是还原设备比采集设备高(即宽高比较小)的情况，这种时候为了将采集的画面完整还原出来，同时为了最大化的展现采集的画面，还原会将宽度用满，然后空出底部一部分的高度，如果要把高度用满，宽度就会超出还原设备的屏幕，所以只能以宽度适配，空出高度。

下面以具体例子来说明此处的算法：假设采集设备的尺寸是50*100，宽高比为0.5，还原设备的尺寸为200*500，宽高比为0.25，这时候需要以宽度适配，也就是目标宽度为width＝200，以此计算等比缩放比例，等比缩放意思是宽高都使用相同的缩放比例，这样画面才不会变形，否则会被拉伸或压缩，rate＝200/50＝4，以相同比例缩放高度height＝100*4＝400，所以最终展现的尺寸就是200*400，空白的高度就是500-400＝100。这样就能将还原画面完美的渲染出来了，可以看到这里还原设备尺寸是大于采集设备的，但是宽高比更小，无法直接等比缩放。

使用此策略就能最大限度的使用屏幕空间，同时精确还原用户看到的画面大小，当然如果还原设备比采集设备大的话，不做放大也是可以的，但这样只能用到还原设备屏幕的一小块位置，剩下的都是空白的，画面很小，浪费了大屏幕的空间，同时这样也不通用，只有还原设备屏幕大才能这样做，这样对还原设备要求就很高了，成本也会高很多。

在本申请的技术方案中，可记录页面的滚动位置，记录并还原尺寸已经完成了最重要的一步，再记录下画面滚动的位置就能完美还原用户的画面。比如一个页面很长有十屏，用户当前滚动到第二屏，基于设备尺寸及滚动数据就能完美的把这个过程还原出来。

可以看到无论还原设备的尺寸是多少，画面上展现的还原效果都完全一样，也就是用户真实看到的一屏的画面内容，精确展示用户看到的所有内容，不多也不少，保证了精确的还原效果。因为采集设备的尺寸及滚动位置都已经被精确记录下来，所以同时实现了滚动条位置及滚动屏数的精确还原。举个例子说明：比如一屏的高度是100px，页面内容的总高度是1000px，用户这时候滚动到400px的位置，也就是滚了4屏，如果不能精确还原采集设备的尺寸，那么还原出来的效果会很随机，由还原设备的尺寸决定，比如还原设备比较长的话，一屏的高度就200px，而实际上用户在一屏上看不到这么多内容，虽然还原设备上能看到后面的内容，但实际上用户是看不到的。

本方案可实现采集画面与还原画面100％匹配的效果，极大的提升可视化还原系统的精确性与权威性。同时本方案的实现对还原设备的尺寸无任何要求，不同于相关技术中必须用跟采集设备完全一样型号的设备才能精确还原出用户的画面，从而不用储备大量设备、也不用在还原时进行设备匹配，极大的提高了还原效率，节约了系统成本，带来巨大的经济效益。

步骤5，在还原终端上按照第二分辨率展示第二页面，第二分辨率表示的宽高比与第一分辨率表示的宽高比相同，第二分辨率为与目标分辨率匹配的能够在还原终端上完整展示第二页面的分辨率。

上述第二页面的展示内容包括第一页面的展示内容，包括两种情况：若用户终端的宽高比与还原终端的宽高比相同，则第二页面中的页面内容与第一页面中的页面内容完全相同；若用户终端的宽高比与还原终端的宽高比不相同，第二页面内除了包括第一页面的页面内容外，还可包括留白。

通过对采集端屏幕尺寸的采集与还原，实现完整的还原效果，如一屏展示与多屏滚动等展示效果的精确还原。对用户无感知，用来在可回溯后台精确展示用户当时看到的画面，即用户手机多大，看到的一屏的内容是多大。由于不同大小手机看到的内容是不一样多的，所以需要有这样精确的控制来精确还原用户画面。

比如，用户手机尺寸(以手机为竖直状态为例，尺寸即宽度和高度)是100*100，还原设备是100*200，也就是还原设备比采集设备更长，如果没有经过本方案的处理，则在还原设备上看到的画面将是采集设备上2倍的高度，也就是在采集设备上看不到的，在还原设备上看到了。这样在争议发生时就会面临还原不一致的问题，用户会说没有看到，但是还原视频上又出现了，这样便极大的降低了可视化还原系统的权威性。反过来也是相同的道理，用户设备尺寸比还原设备大的话，会出现用户看到了但还原设备上看不到的情况，也是不严谨的。

图9和图10展示了不同还原设备尺寸的还原效果，内框是采集设备的尺寸(内框的边缘与外框存在部分重合)，外框是还原设备的尺寸。这两个图可以很好的描述了本方案实现的效果，不但能忠实还原用户看到的画面，同时能自动适配还原设备的尺寸，对还原设备无任何特殊要求，可以是手机，可以是平板，也可以是电脑，具有很好的适用性。

在本申请的技术方案中，不管用户设备的尺寸多大，不管页面内容多长，不管还原设备尺寸多大，不管需要滚几屏，通过本案设计的适配及还原方案，都能精确的还原出用户当时看到的内容，还原出用户滚动的屏数，实现完美的还原及很好的适用性。采集时对用户无感知，还原时对设备无特殊要求。

采用本申请的技术方案，可精确采集与还原用户画面，包括滚动屏数及滚动位置，对用户无感知，对设备无要求；可适配任何尺寸的屏幕，包括采集端与还原端，都能完美适配精确还原；对采集与还原设备无任何要求，无任何兼容性问题，从而不需要专门购买设备来做还原，极大的降低成本，带来巨大的经济效益。

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

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如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包括一个网络适配器(networkinterfacecontroller，nic)，其可通过网线与其他网络设备与路由器相连从而可与互联网或局域网进行通讯。在一个实例中，传输装置805为射频(radiofrequency，rf)模块，其用于通过无线方式与互联网进行通讯。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

可选地，在本实施例中，上述存储介质可以包括但不限于：u盘、只读存储器(rom，read-onlymemory)、随机存取存储器(ram，randomaccessmemory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

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

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

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

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

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

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

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