CN115795192A - 页面适配方法、装置以及存储介质和电子设备 - Google Patents

Abstract

本发明提供了一种页面适配方法、装置以及存储介质和电子设备，其中，该方法包括：响应于对目标对象的访问请求，基于访问请求获取当前页面兼容的待显示页面数据；加载待显示页面数据，确定适配比例，并根据适配比例，对待显示页面的页面显示区域进行适配处理，使页面显示区域的宽度小于或等于当前页面的宽度。本发明提供的页面适配方法、装置以及存储介质和电子设备，通过确定适配比例，能够使与当前页面不适配的第三方页面或其他待显示页面在当前页面中进行完整显示，提升用户浏览当前页面的体验感。

Description

页面适配方法、装置以及存储介质和电子设备

技术领域

本发明涉及计算机技术领域，尤其是一种页面适配方法、装置以及存储介质和电子设备。

背景技术

H5，即HTML5(Hypertext Markup Language 5rd，超文本标记语言标准第5版)是用于取代1999年制定的HTML4.01和XHTML1.0协议的新超文本标记语言标准协议标准。随着H5的不断完善，移动终端市场出现了大量基于H5开发的网页页面。

随着终端和互联网的快速发展，各种应用程序(APP)覆盖了人们生活的许多方面，在一些现有的APP中，有时会嵌套显示部分H5开发的页面，通过客户端提供webview(显示H5页面的容器)进行相关的H5页面呈现，一般呈现的H5页面都是经由相关UI设计页面展示，前端按照UI设计图进行相关页面开发，所以最终展示在APP的webview中不会有样式走样，布局错乱的情况发生，但有时会存在下述情况：

(1)在通过APP引用或者跳转第三方页面时，由于有些外部页面是由其他公司开发的，比如公司详情页经常会有该公司的官网地址，用户可以在APP中访问该公司的官网地址，如果该公司的官方网页已经做了移动端H5适配，那么该官方网页可以正常地在APP中显示，但如果其只设计了PC端的页面，而由于电脑端与手机端的屏幕尺寸存在较大差异，因此，该官方网页在该APP中的UI显示及布局就会出现不完整等问题；

(2)一些APP中的H5页面，有时需要展示部分其他类型的文件，比如pdf、pptx的文件内容，通常这类型的文件不能直接在H5页面中展示，需要将相关文件的格式进行转化，如将pptx转化为html格式后(pptx转化为html一般需要借助第三方插件)，再在H5页面中展示。但目前的pptx格式转化后生成的html一般都会设定固定的宽度和高度，例如一个pptx文件经过第三方插件转换为html格式后的宽高分别1280px、720px，但手机的屏幕宽度一般范围都是375px左右，如果不对其进行处理，直接展示在手机屏幕的H5页面中，就会出现如图1所示的错位情况，如在该H5页面中，pptx展示不完整，且字体、宽高比例都不协调，美观性大大降低。

发明内容

为克服上述现有技术存在的不足，本发明之目的在于提供一种页面适配方法、装置以及存储介质和电子设备，以解决在当前页面显示不适配内容而造成的页面显示不完整的问题。

为达到上述目的，本发明提供了一种页面适配方法，该方法包括以下步骤：

响应于对目标对象的访问请求，基于访问请求获取当前页面兼容的待显示页面数据；

加载待显示页面数据，确定适配比例，并根据适配比例，对待显示页面的页面显示区域进行适配处理，使页面显示区域的宽度小于或等于当前页面的宽度。

可选地，加载待显示页面数据，确定适配比例，并根据适配比例，对待显示页面的页面显示区域进行适配处理，使页面显示区域的宽度小于或等于当前页面的宽度，包括：

加载待显示页面数据，将待显示页面数据添加到当前页面的文档对象模型节点中；

分别确定待显示页面的宽度和当前页面的宽度，并根据待显示页面的宽度与当前页面的宽度，计算适配比例；

获取当前页面的父级文档对象模型节点；

设置父级文档对象模型节点中的缩放基点属性，以及根据适配比例，设置父级文档对象模型节点中的层叠样式表属性；

按照层叠样式表属性中的适配比例，以缩放基点属性中的缩放基点对页面显示区域进行对应比例的缩放，使页面显示区域的宽度小于或等于当前页面的宽度。

可选地，按照层叠样式表属性中的适配比例，以缩放基点属性中的缩放基点对页面显示区域进行对应比例的缩放，使页面显示区域的宽度小于或等于当前页面的宽度之后，该方法还包括：

调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，以使调整后的当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离等于缩放前的当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离。

可选地，若以页面显示区域的任一点为缩放基点，调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，包括：

获取缩放基点的坐标以及页面显示区域的高度和缩放高度；

根据适配比例、缩放基点的坐标和页面显示区域的高度，计算页面显示区域的上缩放高度和下缩放高度；

基于上缩放高度和下缩放高度，调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离。

可选地，若以页面显示区域的中心为缩放基点，调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，包括：

获取页面显示区域的中心的坐标以及页面显示区域的高度和缩放高度；

根据适配比例、缩放基点的坐标和页面显示区域的高度，计算页面显示区域的上缩放高度和下缩放高度；

按照上缩放高度垂直向上移动当前页面中待显示页面的文档对象模型节点，且按照上缩放高度与下缩放高度之和垂直向上移动与待显示页面的文档对象模型节点相邻的文档对象模型节点。

可选地，若以页面显示区域的左上顶点为缩放基点，调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，包括：

获取页面显示区域的左上顶点的坐标以及页面显示区域的高度和缩放高度；

根据适配比例、缩放基点的坐标和页面显示区域的高度，计算页面显示区域的下缩放高度；

按照下缩放高度垂直向上移动与待显示页面的文档对象模型节点相邻的文档对象模型节点。

可选地，响应于对目标对象的访问请求，基于访问请求获取当前页面兼容的待显示页面数据，包括：

基于访问请求的目标对象获取对应的目标对象数据；

若目标对象数据的格式与当前页面的数据格式规则兼容，则将目标对象数据作为待显示页面数据；

若目标对象数据的格式与当前页面的数据格式规则不兼容，则将目标对象数据转化为与当前页面的数据格式规则兼容的待显示页面数据。

为达到上述目的，本发明还提供了一种页面适配装置，该装置包括：

待显示页面数据获取模块，用于响应于对目标对象的访问请求，基于访问请求获取当前页面兼容的待显示页面数据；

适配处理模块，用于加载待显示页面数据，确定适配比例，并根据适配比例，对待显示页面的页面显示区域进行适配处理，使页面显示区域的宽度小于或等于当前页面的宽度。

为达上述目的，本发明还提供了一种存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述页面适配方法的步骤。

为达上述目的，本发明还提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，处理器执行计算机程序时实现上述页面适配方法的步骤。

本发明提供的页面适配方法、装置以及存储介质和电子设备，通过对当前页面中不适配的相关内容节点按计算的适配比例进行适配处理，并通过设置缩放基点及处理适配后的留白问题，使得当前页面中的不适配的相关内容可以完整地展示在当前页面中，提升用户的浏览体验感。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

通过结合附图对本发明实施例进行更详细的描述，本发明的上述以及其他目的、特征和优势将变得更加明显。附图用来提供对本发明实施例的进一步理解，并且构成说明书的一部分，与本发明实施例一起用于解释本发明，并不构成对本发明的限制。在附图中，相同的参考标号通常代表相同部件或步骤。

图1是现有技术屏幕尺寸不匹配时当前页面显示pptx文件产生的错位情况示意图；

图2是本发明一示例性实施例提供的一种页面适配方法的流程示意图；

图3是本发明一示例性实施例中对待显示页面未做适配进行展示的示意图；

图4是本发明一示例性实施例中以页面显示区域中心为缩放基点对待显示页面进行适配展示的示意图；

图5是本发明一可选实施例中以页面显示区域任一点为缩放基点对待显示页面进行适配展示并调整适配结果的示意图；

图6是本发明另一可选实施例中以页面显示区域中心为缩放基点对待显示页面进行适配展示并调整适配结果的示意图

图7是本发明又一可选实施例中以页面显示区域左上顶点为缩放基点对待显示页面进行适配展示的示意图；

图8是本发明又一可选实施例中对待显示页面进行适配并调整适配结果后的效果示意图；

图9是本发明一示例性实施例中对当前页面显示pptx文件适配后的实际效果图；

图10是本发明一示例性实施例提供的一种页面适配装置的结构示意图；

图11是本发明一示例性实施例提供的电子设备的结构。

具体实施方式

下面，将参考附图详细地描述根据本发明的示例实施例。显然，所描述的实施例仅仅是本发明的一部分实施例，而不是本发明的全部实施例，应理解，本发明不受这里描述的示例实施例的限制。

应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

本领域技术人员可以理解，本发明实施例中的“第一”、“第二”等术语仅用于区别不同步骤、设备或模块等，既不代表任何特定技术含义，也不表示它们之间的必然逻辑顺序。

还应理解，在本发明实施例中，“多个”可以指两个或两个以上，“至少一个”可以指一个、两个或两个以上。

还应理解，对于本发明实施例中提及的任一部件、数据或结构，在没有明确限定或者在前后文给出相反启示的情况下，一般可以理解为一个或多个。

另外，本发明中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本发明中字符“/”，一般表示前后关联对象是一种“或”的关系。

还应理解，本发明对各个实施例的描述着重强调各个实施例之间的不同之处，其相同或相似之处可以相互参考，为了简洁，不再一一赘述。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，技术、方法和设备应当被视为说明书的一部分。

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

本发明实施例可以应用于终端设备、计算机系统、服务器等电子设备，其可与众多其它通用或专用计算系统环境或配置一起操作。适于与终端设备、计算机系统、服务器等电子设备一起使用的众所周知的终端设备、计算系统、环境和/或配置的例子包括但不限于：个人计算机系统、服务器计算机系统、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的系统、机顶盒、可编程消费电子产品、网络个人电脑、小型计算机系统﹑大型计算机系统和包括上述任何系统的分布式云计算技术环境，等等。

终端设备、计算机系统、服务器等电子设备可以在由计算机系统执行的计算机系统可执行指令(诸如程序模块)的一般语境下描述。通常，程序模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们执行特定的任务或者实现特定的抽象数据类型。计算机系统/服务器可以在分布式云计算环境中实施，分布式云计算环境中，任务是由通过通信网络链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于包括存储设备的本地或远程计算系统存储介质上。

示例性方法

图2是本发明一示例性实施例提供的一种页面适配方法的流程示意图。本实施例可应用在电子设备上，如图2所示，该页面适配方法，包括以下步骤：

步骤101，响应于对目标对象的访问请求，基于访问请求获取当前页面兼容的待显示页面数据；

本发明实施例的应用场景可以包括但不限于：终端浏览器内页面跳转或展示其它类型文件，也可以是APP内跳转第三方页面或展示其他类型文件，该其他类型文件可以是pdf、pptx等格式的文件，其中，终端可以是智能手机、平板电脑等具有与电脑端尺寸不同显示屏幕的设备，其上可以安装若干个应用程序。

具体地，步骤101可进一步包括：

步骤1011，基于访问请求的目标对象获取对应的目标对象数据；

步骤1012，若目标对象数据的格式与当前页面的数据格式规则兼容，则将目标对象数据作为待显示页面数据；若目标对象数据的格式与当前页面的数据格式规则不兼容，则将目标对象数据转化为与当前页面的数据格式规则兼容的待显示页面数据。

在本发明中，目标对象可以是显示于终端当前页面上的外部页面链接，或是显示于终端当前页面上的可点击浏览的文件名称(如pptx、pdf等格式)，待显示页面数据指的是用户在当前页面点击目标对象得到的与当前页面格式兼容的数据，以当前页面为H5页面为例，则获得的待显示页面可以是目标对象对应的html格式的页面数据。

在本发明一实施例中，待显示页面为通过点击显示于当前网页上的网页地址获取的html格式的外部页面，例如当用户于一APP内的页面上点击浏览某个第三方页面的网页地址，则产生访问请求，由于该网页网址为第三方开发的外部页面，因此可以直接获取到html格式的待显示页面数据。可以理解的是，若获取的待显示页面的格式与当前页面的数据格式规则不兼容，则需要将待显示页面的数据转化为与当前页面的数据格式规则兼容的待显示页面数据，其格式的转换可以通过第三方插件或采用现有的格式转换方式实现，本发明对此不作限定。

在本发明另一实施例中，目标对象也可为显示于当前页面上的可点击浏览的文件，例如a.pptx文件，当用户点击该目标对象，则产生访问请求，根据该访问请求获取到该a.pptx文件，由于pptx文件在网页中不能直接显示，则需先将该pptx格式的a.pptx文件转化为当前页面兼容格式的页面数据作为待显示页面数据，以当前页面为H5页面为例，则将该a.pptx文件转化为html格式的待显示页面数据，在本发明实施例中，对于基于目标对象获取的当前页面不能直接显示的文件，均可通过第三方插件将其转换为html格式的数据，由于利用第三方插件将pptx等文件转化为html格式的数据已是现有成熟技术，具体的转化方式在此不予赘述。

步骤102，加载待显示页面数据，确定适配比例，并根据适配比例对待显示页面的页面显示区域进行适配处理，使页面显示区域的宽度小于或等于当前页面的宽度。

一般来说，对于与当前页面适配的待显示页面数据，当然可以在当前页面很好的予以显示，这种情况并非本发明考虑的重点，本发明主要关注未与当前页面做过适配且显示错位的情况。由于待显示页面数据未与当前页面做过适配，当其尺寸大小与当前页面不匹配时，若将其渲染后直接展示在当前页面，则会出现背景技术中所描述的显示不完整、错位等现象，假设待显示页面的尺寸为900×300，当前页面尺寸为300×600，则渲染后展示的结果如图3所示，其页面区域ABCD则有一部分在当前页面外无法得到显示。

具体地，步骤102可包括：

步骤1021，加载待显示页面数据，将待显示页面数据添加到当前页面的文档对象模型节点(DOM节点)中；

以html格式的待显示页面数据为例，DOM(Document Object Model，文档对象模型)，可以一种独立于平台和语言的方式访问和修改一个页面文档的内容和结构，是表示和处理html或xml(Extensible Markup Language，可扩展标记语言)文档的常用方法。终端在加载待显示页面数据时，根据屏幕的可视区域的屏幕大小创建DOM节点，并在DOM节点中填充相应的待显示页面数据，从而能够在屏幕的可视区域中展示待显示页面数据。

步骤1022，分别确定待显示页面的宽度和当前页面的宽度，并根据待显示页面的宽度与当前页面的宽度，计算适配比例；

具体地，当待显示页面数据加载到当前页面的DOM节点后，确定待显示页面的宽度，在本发明实施例中，待显示页面的页面显示区域的尺寸可以通过JavaScript脚本获取，JavaScript脚本可根据特定需求或场景对方案进行更改，可移植性高、扩展性强，同时，通过JavaScript脚本获取当前页面的宽度，一般认为终端全屏显示的话，也即终端的屏幕宽度，并根据待显示页面的宽度与当前页面的宽度，计算适配比例scale：scale＝contentWidth/pptxWidth，其中，contentWidth为当前页面的宽度，pptxWidth为待显示页面的宽度。

在本发明实施例中，以待显示页面为pptx文件转换后的html格式的待显示页面数据(假设待显示页面的尺寸为900×300)为例，在其加载添加至当前页面的DOM节点后，通过脚本获取到每一页pptx的待显示页面的宽度(pptxWidth)，即pptxWidth＝900，同时通过脚本获取当前页面的宽度(contentWidth)，假设终端的屏幕尺寸为300×600，则获取当前页面的宽度contentWidth＝300，计算获得适配比例scale为300/900＝1/3。

步骤1023，获取当前页面的父级文档对象模型节点；

在本发明实施例中，仍以待显示页面为pptx文件转换后的html格式的待显示页面数据为例，同样可以通过JavaScript脚本获取当前页面的父级DOM节点。

步骤1024，设置父级文档对象模型节点中的缩放基点属性，以及根据适配比例，设置父级文档对象模型节点中的层叠样式表属性；

具体地，缩放基点属性用于确定对待显示页面的页面显示区域进行缩放的基点，可以是缩放基点的坐标。在本发明实施例中，缩放基点可以是页面显示区域的任一点，如页面显示区域的中心或页面显示区域的左上顶点，本发明对此不做限制。

在获取当前页面的父级DOM节点后，可根据步骤1022确定的适配比例对该父级DOM节点进行CSS(Cascading Style Sheets，层叠样式表)属性设置，例如：transform:scale(num)，其中，scale为步骤1022中的适配比例，num为步骤1022计算所得的适配比例值。

步骤1025，按照层叠样式表属性中的适配比例，以缩放基点属性中的缩放基点对页面显示区域进行对应比例的缩放，使页面显示区域的宽度小于或等于当前页面的宽度。

经对父级文档对象模型节点中的缩放基点属性进行设置，以及根据适配比例，对父级文档对象模型节点中的层叠样式表属性进行设置，使得待显示页面的页面显示区域ABCD以缩放基点属性中的缩放基点为缩放中心进行了符合适配比例scale的缩放。具体地，以缩放基点为待显示页面的页面显示区域的中心为例，同时DOM节点的节点内容M的宽高、字体大小按适配比例sacle进行了缩放，其渲染展示的结果如图4所示。

需说明的是，层叠样式表属性的缩放，不会使得DOM节点脱离文档流，也不会改变文档流的大小和位置，缩放后的DOM节点还是占据了开始的大小。另外，通过设置父级DOM节点中的层叠样式表属性，能够实现对DOM节点的统一缩放，避免对每一页pptx的DOM节点单独进行缩放，方便快捷，提高了缩放效率。

可选地，在步骤102之后，该方法还包括：

步骤103，调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，以使调整后的当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离等于缩放前的当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离。

经过步骤102，当根据适配比例scale以页面显示区域中心对DOM节点进行缩放后，如图4所示，A、B、C、D的页面坐标都进行了偏移，导致DOM节点的节点内容M与其相邻的文档对象模型节点(图中为H5页面其他内容节点)的距离发生了改变，从而影响用户的视觉感受，因此，需调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离。

在本发明一可选实施例中，若以页面显示区域的任一点为缩放基点，调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，包括：

步骤1031，获取缩放基点的坐标以及页面显示区域的高度和缩放高度；

当以页面显示区域的任一点L为缩放基点对页面显示区域进行缩放后，如图5所示，页面显示区域的A、B、C、D的顶点坐标都发生了偏移，导致页面显示区域与当前页面的顶部的距离发生变化，且与当前页面中其他相邻页面的距离也发生变化(即当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离)，因此，调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离等于缩放前的当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离。

根据步骤1024设置的缩放基点属性获得缩放基点L的坐标(x，y)，同时，根据步骤1022，通过JavaScript脚本获取待显示页面的页面显示区域的尺寸，即可获得页面显示区域的高度h_pre以及左上顶点A的坐标(x1，y1)，然后根据适配比例scale获得页面显示区域的缩放高度h_next：h_next＝h_pre×scale。

步骤1032，根据适配比例、缩放基点的坐标和页面显示区域的高度，计算页面显示区域的上缩放高度和下缩放高度；

上缩放高度是指页面显示区域相对于当前页面顶部的缩放的长度，如图5中的h_1，下缩放高度是指页面显示区域相对于当前页面的底部的缩放的长度，如图5中的h_2，具体地，上缩放高度：h_1＝(1-scale)×(y-y1)，相应地，下缩放高度：h_2＝(1-scale)×(y1+h_pre-y)。

步骤1033，基于上缩放高度和下缩放高度，调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离。

当获得上缩放高度与下缩放高度后，则将当前页面中待显示页面的文档对象模型节点垂直向上移动h_1的高度，以及与待显示页面的文档对象模型节点相邻的文档对象模型节点向上移动h_1+h_2的高度，从而使当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离等于缩放前的当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，以解决了由于缩放导致的页面留白问题。

在本发明另一可选实施例中，若以页面显示区域的中心为缩放基点，调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，包括：

步骤10311，获取页面显示区域的中心的坐标以及页面显示区域的高度和缩放高度；

在本发明实施例中，请参考图4，当以页面显示区域的中心进行缩放后，页面显示区域的A、B、C、D的顶点坐标都发生了偏移，导致页面显示区域与当前页面的顶部的距离发生变化，且与当前页面中其他相邻页面的距离也发生变化(即当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离)，因此，调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离等于缩放前的当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离。

如图6所示，通过JavaScript脚本获取页面显示区域的中心的坐标(x，y)以及页面显示区域的高度h_pre，根据适配比例scale获得页面显示区域的缩放高度h_next：h_next＝h_pre×scale。

步骤10321，根据适配比例、缩放基点的坐标和页面显示区域的高度，计算页面显示区域的上缩放高度和下缩放高度；

在本发明实施例中，上缩放高度：h_1＝(h_pre-h_next)/2，相应地，所下缩放高度：h_2＝(h_pre-h_next)/2。

步骤10331，按照上缩放高度垂直向上移动当前页面中待显示页面的文档对象模型节点，且按照上缩放高度与下缩放高度之和垂直向上移动与待显示页面的文档对象模型节点相邻的文档对象模型节点。

具体地，将当前页面中待显示页面的文档对象模型节点垂直向上移动h_1的高度，以及与待显示页面的文档对象模型节点相邻的文档对象模型节点向上移动h_1+h_2高度，从而使当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离等于缩放前的当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，以解决了由于缩放导致的页面留白问题。

在本发明又一可选实施例中，若以页面显示区域的左上顶点为缩放基点，调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，包括：

步骤10312，获取页面显示区域的左上顶点的坐标以及页面显示区域的高度和缩放高度；

在本发明实施例中，当以页面显示区域的左上顶点为缩放基点进行缩放时，缩放后的待显示页面的页面显示区域距离当前页面的顶部的距离不变，但其与当前页面中其他相邻页面的距离发生了变化，如图7所示，因此，也需要调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离。

在步骤10312中，同样可通过JavaScript脚本获取待显示页面的页面显示区域的左上顶点坐标(x，y)以及页面显示区域的高度h_pre，根据缩放比例scale获得页面显示区域的缩放高度h_next：h_next＝h_pre×scale。

步骤10322，根据适配比例、缩放基点的坐标和页面显示区域的高度，计算页面显示区域的下缩放高度；

在本发明实施例中，下缩放高度是指页面显示区域相对于当前页面的底部缩放的长度，如图7中的下缩放高度h_2，具体地，下缩放高度：h_2＝h_pre-h_next。

步骤10332，按照下缩放高度垂直向上移动与待显示页面的文档对象模型节点相邻的文档对象模型节点。

在本发明实施例中，将与待显示页面的文档对象模型节点相邻的文档对象模型节点向上移动h_2高度，以使得待显示页面与当前页面中其他相邻页面的距离与缩放前一致，从而消除掉留白，效果如图8所示。

在经过上述适配处理后，对待显示页面数据进行渲染展示，则可以得到与终端中的当前页面适配的页面，提高用户的使用体验，在本发明实施例中，以待显示页面为pptx文件示例的效果图如图9所示。

需要说明的是，在本发明实施例中，除步骤101和步骤102在图中示出外，其他步骤标号均未在图中示出。

需要说明的是，以页面显示区域的中心或以页面显示区域的左上顶点为缩放基点进行缩放为以页面显示区域的任一点为缩放基点的特殊情况，其也可利用以页面显示区域的任一点为缩放基点的方法计算当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点需要移动的距离。

本发明提供的页面适配方法，通过对当前页面中不适配的相关内容节点按计算的适配比例进行适配处理，并通过设置缩放基点及处理适配后的留白问题，使得当前页面中的不适配的相关内容可以完整地展示在当前页面中，提升用户的浏览体验感。

示例性装置

图10是本发明一示例性实施例提供的一种页面适配装置的结构示意图。如图10所示，该装置，包括：

待显示页面数据获取模块110，用于响应于对目标对象的访问请求，基于访问请求获取当前页面兼容的待显示页面数据；

具体地，待显示页面数据获取单元110可进一步包括：

数据获取单元，用于基于访问请求的目标对象获取对应的目标对象数据；

格式转换单元，用于判断获取的目标对象数据的格式是否与当前页面的数据格式规则兼容，若获取的目标对象数据的格式与当前页面的数据格式规则不兼容，则将所述目标对象数据转化为与当前页面的数据格式规则兼容的待显示页面数据。

适配处理模块111，用于加载待显示页面数据，确定适配比例，并根据适配比例对待显示页面的页面显示区域进行适配处理，使页面显示区域的宽度小于或等于当前页面的宽度。

具体地，适配处理模块111可包括：

页面数据加载单元，用于加载待显示页面数据，将待显示页面数据添加到当前页面的文档对象模型节点中；

适配比例确定单元，用于分别确定待显示页面的宽度和当前页面的宽度，并根据待显示页面的宽度与当前页面的宽度，计算适配比例；

属性设置单元，用于获取当前页面的父级文档对象模型节点，并设置父级文档对象模型节点中的缩放基点属性，以及根据适配比例，设置父级文档对象模型节点中的层叠样式表属性；

适配缩放处理单元，用于按照层叠样式表属性中的适配比例，以缩放基点属性中的缩放基点对页面显示区域进行对应比例的缩放，使页面显示区域的宽度小于或等于当前页面的宽度。

可选地，该装置还包括：适配结果调整模块112，用于调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，以使调整后的当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离等于缩放前的当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离。

在本发明一可选实施例中，若以页面显示区域的任一点为缩放基点，适配结果调整模块112具体可用于：获取缩放基点的坐标以及页面显示区域的高度和缩放高度；根据适配比例、缩放基点的坐标和页面显示区域的高度，计算页面显示区域的上缩放高度和下缩放高度；基于上缩放高度和下缩放高度，调整当前页面中待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离。

在本发明另一可选实施例中，若以页面显示区域的中心为缩放基点，适配结果调整模块112具体可用于：获取页面显示区域的中心的坐标以及页面显示区域的高度和缩放高度；根据适配比例、缩放基点的坐标和页面显示区域的高度，计算页面显示区域的上缩放高度和下缩放高度；按照上缩放高度垂直向上移动当前页面中待显示页面的文档对象模型节点，且按照上缩放高度与下缩放高度之和垂直向上移动与待显示页面的文档对象模型节点相邻的文档对象模型节点。

在本发明又一可选实施例中，若以页面显示区域的左上顶点为缩放基点，适配结果调整模块112具体可用于：获取页面显示区域的左上顶点的坐标以及页面显示区域的高度和缩放高度；根据适配比例、缩放基点的坐标和页面显示区域的高度，计算页面显示区域的下缩放高度；按照下缩放高度垂直向上移动与待显示页面的文档对象模型节点相邻的文档对象模型节点。

本发明提供的页面适配装置，通过对当前页面中不适配的相关内容节点按计算的适配比例进行适配处理，并通过设置缩放基点及处理适配后的留白问题，使得当前页面中的不适配的相关内容可以完整地展示在当前页面中，提升用户的浏览体验感。

本发明实施例提供的页面适配方法与本发明实施例提供的页面适配装置相对应，其他描述均可参照对本发明实施例提供的页面适配方法的描述，此处不再赘述。

示例性电子设备

图11是本发明一示例性实施例提供的电子设备的结构。该电子设备可以是第一设备和第二设备中的任一个或两者、或与它们独立的单机设备，该单机设备可以与第一设备和第二设备进行通信，以从它们接收所采集到的输入信号。如图11所示，电子设备10包括一个或多个处理器11和存储器12。

处理器11可以是中央处理单元(CPU)或者具有数据处理能力和/或指令执行能力的其他形式的处理单元，并且可以控制电子设备中的其他组件以执行期望的功能。

存储器12可以包括一个或多个计算机程序产品，所述计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。所述易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。所述非易失性存储器例如可以包括只读存储器(ROM)、硬盘、闪存等。在所述计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器11可以运行所述程序指令，以实现上文所述的本公开的各个实施例的软件程序的页面适配方法以及/或者其他期望的功能。在一个示例中，电子设备还可以包括：输入装置13和输出装置14，这些组件通过总线系统和/或其他形式的连接机构(未示出)互连。

此外，该输入装置13还可以包括例如键盘、鼠标等等。

该输出装置14可以向外部输出各种信息。该输出装置14可以包括例如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出设备等等。

当然，为了简化，图11中仅示出了该电子设备中与本公开有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备还可以包括任何其他适当的组件。

示例性计算机程序产品和计算机可读存储介质

除了上述方法和设备以外，本公开的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的页面适配方法中的步骤。

所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本公开的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的页面适配方法中的步骤。

所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

以上结合具体实施例描述了本公开的基本原理，但是，需要指出的是，在本公开中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本公开的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本公开为必须采用上述具体的细节来实现。

本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互参见即可。对于系统实施例而言，由于其与方法实施例基本对应，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本公开中涉及的器件、装置、设备、系统的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备、系统。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。

可能以许多方式来实现本公开的方法和装置。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本公开的方法和装置。用于所述方法的步骤的上述顺序仅是为了进行说明，本公开的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本公开实施为记录在记录介质中的程序，这些程序包括用于实现根据本公开的方法的机器可读指令。因而，本公开还覆盖存储用于执行根据本公开的方法的程序的记录介质。

还需要指出的是，在本公开的装置、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本公开。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本公开的范围。因此，本公开不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本公开的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。

Claims (10)

1.一种页面适配方法，其特征在于，所述方法包括：

响应于对目标对象的访问请求，基于访问请求获取当前页面兼容的待显示页面数据；

加载所述待显示页面数据，确定适配比例，并根据所述适配比例，对待显示页面的页面显示区域进行适配处理，使所述页面显示区域的宽度小于或等于所述当前页面的宽度。

2.如权利要求1所述的方法，其特征在于，所述加载所述待显示页面数据，确定适配比例，并根据所述适配比例，对待显示页面的页面显示区域进行适配处理，使所述页面显示区域的宽度小于或等于所述当前页面的宽度，包括：

加载所述待显示页面数据，将所述待显示页面数据添加到所述当前页面的文档对象模型节点中；

分别确定所述待显示页面的宽度和所述当前页面的宽度，并根据所述待显示页面的宽度与所述当前页面的宽度，计算所述适配比例；

获取所述当前页面的父级文档对象模型节点；

设置所述父级文档对象模型节点中的缩放基点属性，以及根据所述适配比例，设置所述父级文档对象模型节点中的层叠样式表属性；

按照所述层叠样式表属性中的适配比例，以所述缩放基点属性中的缩放基点对所述页面显示区域进行对应比例的缩放，使所述页面显示区域的宽度小于或等于所述当前页面的宽度。

3.如权利要求2所述的方法，其特征在于，所述按照所述层叠样式表属性中的适配比例，以所述缩放基点属性中的缩放基点对所述页面显示区域进行对应比例的缩放，使所述页面显示区域的宽度小于或等于所述当前页面的宽度之后，所述方法还包括：

调整所述当前页面中所述待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，以使调整后的所述当前页面中所述待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离等于缩放前的所述当前页面中所述待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离。

4.如权利要求3所述的方法，其特征在于，若以所述页面显示区域的任一点为所述缩放基点，所述调整所述当前页面中所述待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，包括：

获取所述缩放基点的坐标以及所述页面显示区域的高度和缩放高度；

根据所述适配比例、所述缩放基点的坐标和所述页面显示区域的高度，计算所述页面显示区域的上缩放高度和下缩放高度；

基于所述上缩放高度和所述下缩放高度，调整所述当前页面中所述待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离。

5.如权利要求3所述的方法，其特征在于，若以所述页面显示区域的中心为所述缩放基点，所述调整所述当前页面中所述待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，包括：

获取所述页面显示区域的中心的坐标以及所述页面显示区域的高度和缩放高度；

根据所述适配比例、所述缩放基点的坐标和所述页面显示区域的高度，计算所述页面显示区域的上缩放高度和下缩放高度；

按照所述上缩放高度垂直向上移动所述当前页面中所述待显示页面的文档对象模型节点，且按照所述上缩放高度与所述下缩放高度之和垂直向上移动与所述待显示页面的文档对象模型节点相邻的文档对象模型节点。

6.如权利要求3所述的方法，其特征在于，若以所述页面显示区域的左上顶点为所述缩放基点，所述调整所述当前页面中所述待显示页面的文档对象模型节点和与其相邻的文档对象模型节点的距离，包括：

获取所述页面显示区域的左上顶点的坐标以及所述页面显示区域的高度和缩放高度；

根据所述适配比例、所述缩放基点的坐标和所述页面显示区域的高度，计算所述页面显示区域的下缩放高度；

按照所述下缩放高度垂直向上移动与所述待显示页面的文档对象模型节点相邻的文档对象模型节点。

7.如权利要求1所述的方法，其特征在于，所述响应于对目标对象的访问请求，基于访问请求获取当前页面兼容的待显示页面数据，包括：

基于访问请求的目标对象获取对应的目标对象数据；

若所述目标对象数据的格式与当前页面的数据格式规则兼容，则将所述目标对象数据作为待显示页面数据；

若所述目标对象数据的格式与所述当前页面的数据格式规则不兼容，则将所述目标对象数据转化为与所述当前页面的数据格式规则兼容的待显示页面数据。

8.一种页面适配装置，其特征在于，所述装置包括：

待显示页面数据获取模块，用于响应于对目标对象的访问请求，基于访问请求获取当前页面兼容的待显示页面数据；

适配处理模块，用于加载所述待显示页面数据，确定适配比例，并根据所述适配比例，对待显示页面的页面显示区域进行适配处理，使所述页面显示区域的宽度小于或等于所述当前页面的宽度。

9.一种存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任意一项所述页面适配方法的步骤。

10.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任意一项所述页面适配方法的步骤。

Images