CN108021666A - 页面适配方法和装置 - Google Patents

Abstract

本申请实施例公开了页面适配方法和装置。该方法的一具体实施方式包括：接收用户对预定页面的访问请求；执行如下的页面适配操作：获取预定页面的宽度信息、预定页面中各页面元素的位置信息以及显示窗口的宽度信息，其中，页面元素的位置信息包括页面元素相对第一预设基准线的第一偏移量信息，第一预设基准线沿预定页面的宽度方向延伸；基于显示窗口的宽度信息所指示的宽度与预定页面的宽度信息所指示的宽度的比值确定缩放比例；渲染预定页面以生成展示页面，其中，展示页面中各页面元素的在竖直方向上的位置基于第一偏移量信息所指示的第一偏移量和缩放比例的乘积确定。该实施方式提高了页面在不同终端设备上的适配性。

Description

页面适配方法和装置

技术领域

本申请实施例涉及计算机技术领域，具体涉及互联网技术领域，尤其涉及页面适配方法和装置。

背景技术

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

此外，随着移动设备的快速更新，出现了各种屏幕比例的移动设备。

同一个基于HTML5开发的页面在不同屏幕比例的移动设备上显示时，页面的显示效果可能不完全相同。由于页面可能不适配一些移动设备，使得页面在这些移动设备上的显示效果不佳，影响用户的使用和观看。

发明内容

本申请实施例提出了一种页面适配方法和装置。

第一方面，本申请实施例提供了一种页面适配方法，该方法包括：接收用户对预定页面的访问请求；执行如下的页面适配操作：获取预定页面的宽度信息、预定页面中各页面元素的位置信息以及显示窗口的宽度信息，其中，页面元素的位置信息包括页面元素相对第一预设基准线的第一偏移量信息，第一预设基准线沿预定页面的宽度方向延伸；基于显示窗口的宽度信息所指示的宽度与预定页面的宽度信息所指示的宽度的比值确定缩放比例；渲染预定页面以生成展示页面，其中，展示页面中各页面元素的在竖直方向上的位置基于第一偏移量信息所指示的第一偏移量和缩放比例的乘积确定。

在一些实施例中，页面元素的位置信息还包括页面元素相对第二预设基准线的第二偏移量信息；以及渲染预定页面以生成展示页面，还包括：基于第二偏移量信息所指示的第二偏移量和缩放比例的乘积确定展示页面中各页面元素在水平方向的位置，其中第二预设基准线垂直于第一预设基准线。

在一些实施例中，获取预定页面的宽度信息、预定页面中各页面元素的位置信息以及终端设备显示窗口的宽度信息还包括：获取预定页面中各页面元素的宽度信息和高度信息，以及渲染预定页面以生成展示页面，还包括：确定展示页面中的任一页面元素的宽度和高度，其中展示页面中的任一页面元素的宽度和高度分别由预定页面中的该页面元素的宽度信息所指示的宽度与缩放比例的乘积和该页面元素的高度信息所指示的高度与缩放比例的乘积确定。

在一些实施例中，在渲染预定页面以生成展示页面之后，页面适配方法还包括：响应于检测到终端设备的屏幕翻转，执行页面适配操作。

在一些实施例中，第一预设基准线与预定页面的上边框平行且部分重合、与预设页面的下边框平行且部分重合或者经过预设页面的几何中心并沿预定页面的宽度方向延伸。

第二方面，本申请实施例提供了一种页面适配装置，该装置包括：接收单元，配置用于接收用户对预定页面的访问请求；执行单元，配置用于执行如下的页面适配操作：获取预定页面的宽度信息、预定页面中各页面元素的位置信息以及显示窗口的宽度信息，其中，页面元素的位置信息包括页面元素相对第一预设基准线的第一偏移量信息，第一预设基准线沿预定页面的宽度方向延伸；基于显示窗口的宽度信息所指示的宽度与预定页面的宽度信息所指示的宽度的比值确定缩放比例；渲染预定页面以生成展示页面，其中，展示页面中各页面元素的在竖直方向上的位置基于第一偏移量信息所指示的第一偏移量和缩放比例的乘积确定。

在一些实施例中，页面元素的位置信息还包括页面元素相对第二预设基准线的第二偏移量信息；以及执行单元进一步配置用于：基于第二偏移量信息所指示的第二偏移量和缩放比例的乘积确定展示页面中各页面元素在水平方向的位置，其中，第二预设基准线垂直于与第一预设基准线。

在一些实施例中，执行单元进一步配置用于：获取预定页面各页面元素的宽度信息和高度信息；确定任一页面元素在展示页面中的宽度和高度，其中该页面元素在展示页面中的宽度和高度分别由预定页面中的该页面元素的宽度信息所指示的宽度与缩放比例的乘积和该页面元素的高度信息所指示的高度与缩放比例的乘积确定。

在一些实施例中，执行单元进一步配置用于：响应于检测到终端设备的屏幕翻转，执行页面适配操作。

在一些实施例中，第一预设基准线与预定页面的上边框平行且部分重合、与预设页面的下边框平行且部分重合或者经过预设页面的几何中心并沿预定页面的宽度方向延伸。

第三方面，本申请实施例提供了一种电子设备，该电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当上述一个或多个程序被上述一个或多个处理器执行时，使得上述一个或多个处理器实现如第一方面中描述的方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现如第一方面中描述的方法。

本申请实施例提供的页面适配方法和装置，通过根据预定页面中的页面元素预设的第一偏移量确定页面元素在显示窗口展示页面竖直方向上的位置，然后渲染各页面元素生成展示页面，从而在预定页面向不同屏幕比例的终端设备适配时，页面元素不会在竖直方向上偏离展示页面。使用本实施例提供的方法将页面在不同屏幕比例的终端设备适配时，可以得到较好的展示效果，从而提高了页面在不同屏幕比例的终端设备上的适配性。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1是本申请可以应用于其中的示例性系统架构图；

图2是根据本申请的页面适配方法的一个实施例的流程图；

图3是根据本申请的页面适配方法的一个应用场景的示意图；

图4是根据本申请的页面适配装置的一个实施例的结构示意图；

图5是适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

图1示出了可以应用本申请的页面适配方法或页面适配装置的实施例的示例性系统架构100。

如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种客户端应用，例如网页浏览器应用、搜索类应用等。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的网页页面内容提供支持的后台服务器。后台服务器可以对接收到的用户的网页页面浏览请求等数据进行分析等处理，并将处理结果(例如页面数据)反馈给终端设备以使终端设备对页面数据进行显示。

需要说明的是，本申请实施例所提供的页面适配方法可以由服务器105执行，或者，上述页面适配方法还可以由终端设备101、102、103执行，相应地，页面适配装置可以设置于服务器105中，或者，页面适配装置也可以设置在终端设备101、102、103中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

请参考图2，其示出了页面适配方法的一个实施例的流程200。本实施例所包含的步骤中涉及的操作可以由有一定运算能力的电子设备执行，该电子设备可以是图1示出的终端设备101、102、103，也可以是图1所示的服务器105。该页面适配方法，包括以下步骤：

步骤201，接收用户对预定页面的访问请求。

在本实施例中，页面适配方法运行于其上的电子设备(例如图1所述的终端设备101、102、103)，可以接收用户对预定页面的访问请求。

在这里，预定页面例如可以是一个网页页面。

通常，用户利用终端设备来浏览一个或多个页面。任意一个页面例如可以包括带有动画或交互效果的页面元素。这里，页面元素可以是但不限于文字、图片、音频、动画或视频等。

在一些应用场景中，本实施例的页面适配方法应用其上的电子设备可以是终端设备，例如，图1中的终端设备101、102、103。在这些应用场景中，用户可以通过对终端设备上呈现的超级链接的点击或者触摸等选择操作向上述终端设备发出对该超级链接所对应的预定页面的访问请求。

或者，在另一些应用场景中，本实施例的页面适配方法应用其上的电子设备可以是服务器，例如，图1中的服务器105。在这些应用场景中，用户可以通过将期望访问的预定页面所对应的统一资源定位符发送至服务器，来向服务器发送对预定页面的访问请求。服务器可以通过有线连接方式或者无线连接方式从用户利用其进行页面浏览的终端设备(例如图1所述的终端设备101、102、103)接收用户发出的对预定页面的访问请求。

在本实施例中，上述预定页面可以是基于HTML5开发的页面。

步骤202，执行页面适配操作。

在本实施例中，基于步骤201中得到的访问请求，上述电子设备(例如图1所示的终端设备101、102、103，或者图1所示的服务器105)可以执行页面适配操作。其中页面适配操作可以包括如下子步骤：

子步骤2021，获取预定页面的宽度信息、预定页面中各页面元素的位置信息以及显示窗口的宽度信息。

在一些应用场景中，上述预定页面的宽度信息、预定页面中各页面元素的位置信息可以设置在预定页面的脚本文件中。在这些应用场景中，脚本文件可以存储在如图1所示的服务器中。

在另一些应用场景中，上述预定页面的宽度信息、预定页面中各页面元素的位置信息还可以设置在预设数据库中。

在另外一些应用场景中，预定页面所包括的页面元素可以存储在预设数据库中，预定页面的脚本中可以设置页面元素对应的超级链接。通过上述超级链接可以访问存储在预设数据库中的页面元素。

在本实施例中，当上述电子设备是图1所示的终端设备时，上述终端设备可以从图1所示的服务器根据上述访问请求返回的预定页面所对应的脚本中查找预定页面的宽度信息、该预定页面所包括的各个页面元素、以及各个页面元素的位置信息。

当上述电子设备是如图1所示的服务器105时，上述服务器可以从其中存储的预定页面的脚本中获取预定页面的宽度信息、预定页面所包括的各个页面元素以及各个页面元素的位置信息。或者，上述服务器可以根据预先设置的超级链接从预设数据库中获取预定页面所包括的各个页面元素、预定页面的宽度信息、预定页面所包括的各个页面元素的位置信息。

这里，预定页面的宽度信息所指示的宽度的单位可以是像素，还可以是英寸。此外，上述电子设备还可以通过预设的类函数的返回值获取终端设备屏幕上的显示窗口的宽度信息。在这里，显示窗口宽度可以与终端设备的屏幕的宽度相等；或者显示窗口宽度可以与终端设备上待显示预定页面的浏览器的窗口宽度相等。

此外，当上述电子设备是图1所示的服务器时，上述服务器可以根据上述对预定页面的访问请求确定存储在其上的上述预定页面所对应的脚本，并从该脚本中确定预定页面的宽度信息、预定页面所包括的各个页面元素、以及各页面元素的位置信息。在本实施例中，上述页面元素的位置信息可以由预设页面的发布者预先设定。上述页面元素的位置信息可以包括页面元素相对第一预设基准线的第一偏移量信息。上述第一预设基准线沿预定页面的宽度方向延伸。也即是说，第一偏移量信息可以用于表征各页面元素在垂直于预定页面宽度的方向上，相对于第一预设基准线的偏移量。在本实施例中，上述第一偏移量的单位可以是百分比。这里的百分比可以是相对于预定页面的宽度而言的百分比。例如，当预定页面的宽度是400像素时，若某一页面元素的第一偏移量为10％，则可认为，该页面元素在垂直于第一预设基准线的方向上，在第一预设基准线的下方40像素的位置。类似地，当预定页面的宽度是320像素时，若第一偏移量为-10％，则可认为，该页面元素在垂直于第一预设基准线的方向上，在第一预设基准线的上方32像素的位置。

在本实施例的一些可选实现方式中，上述第一预设基准线可以与预定页面的上边框平行且部分重合。或者，上述第一预设基准线可以与预设页面的下边框平行且部分重合。或者，上述第一预设基准线经过预设页面的几何中心并沿所述预定页面的宽度方向延伸。也就是说，第一预设基准线可以设置在预设页面的顶部、中部或者底部。在上述预设页面的脚本数据中，上述第一预设基准线的位置可以由预设页面的发布者预先设定。

子步骤2022，基于显示窗口的宽度信息所指示的宽度与预定页面的宽度信息所指示的宽度的比值确定缩放比例。

在本实施例中，上述电子设备(例如图1所示的终端设备101、102、103，或者图1所示的服务器105)在得到终端设备显示窗口的宽度信息以及预定页面的宽度信息之后，可以根据显示窗口的宽度信息所指示的宽度与预定页面的宽度信息所指示的宽度的比值来确定缩放比例。

子步骤2023，渲染预定页面以生成展示页面。

在本实施例中，上述电子设备(例如图1所示的终端设备101、102、103，或者图1所示的服务器105)可以根据在子步骤2022中确定出的缩放比例以及各页面元素的第一偏移量信息所指示的第一偏移量的乘积来确定各页面元素在展示页面竖直方向(此处竖直方向是指与展示页面的宽度垂直的方向，以下同)的偏移量。并根据各个页面元素在展示页面竖直方向的偏移量来确定各个页面元素在展示页面的位置。例如，当预定页面的发布者指定第一预设基准线为与预定页面的上边框平行且部分重合，且设定一个页面元素相对的第一偏移量为50％。当终端用户向上述电子设备发出访问预定页面的请求之后，上述电子设备可以根据上述发布者设定的第一预设基准线(与终端设备上的显示窗口的上边框平行且部分重合)确定该页面元素在展示页面竖直方向上的位置为相对显示窗口的上边框偏移50％。上述电子设备根据各个页面元素分别在竖直方向的偏移量渲染各个页面元素以生成展示页面。

当上述电子设备是图1所示的终端设备时，终端设备可以直接在显示窗口展示上述展示页面。当上述电子设备是图1所示的服务器时，服务器可以将上述展示页面通过有线网络或者无线网络发送给用户利用其进行网页浏览的终端设备，由终端设备在其显示窗口显示上述展示页面。

继续参见图3，图3是根据本实施例的页面适配方法的应用场景的一个示意图。

在图3的应用场景300中，页面适配方法可以由服务器(例如，图1中的服务器105)执行。上述用户通过终端设备301向服务器302发出对预定页面的访问请求303。

服务器302根据接收到的用户对预定页面的访问请求303执行页面适配操作304。

服务器在执行页面适配操作304时，可以首先获取预定页面的宽度信息、预定页面中各页面元素的位置信息以及终端设备的显示窗口的宽度信息3041。其中页面元素的位置信息可以包括页面元素相对第一预设基准线的第一偏移量信息；然后基于终端设备的显示窗口的宽度信息所指示的宽度与预定页面的宽度信息所指示的宽度的比例确定缩放比例3042；最后渲染预定页面以生成展示页面3043，其中，展示页面中各页面元素的在竖直方向上的位置基于所述第一偏移量信息所指示的第一偏移量和所述缩放比例的乘积确定。

服务器303向终端设备301发送上述展示页面305以使终端设备显示上述展示页面。

本申请的上述实施例提供的方法通过根据预定页面中的页面元素预设的第一偏移量确定页面元素在待展示页面竖直方向上的偏移量，然后渲染各页面元素生成展示页面，从而在预定页面向不同屏幕比例的终端设备适配时，页面元素在竖直方向保持发布者设定的相对偏移量，因此，使用上述方法对页面在不同终端设备上进行适配时，各页面元素在竖直方向上不会影响用户的观看和使用。使用本实施例提供的方法将页面在不同比例的终端设备适配时，可以得到较好的展示效果，从而提高了页面在不同屏幕比例的终端设备上的适配性。此外，由于本实施例提供的方法，可以提高页面在不同屏幕比例的终端设备上的适配性，从而可以节省为同一页面编制适应不同屏幕比例的终端设备的样式文件的成本。

在本实施例的一些可选实现方式中，页面适配方法运行于其上的电子设备(例如图1所示的终端设备101、102、103，或者图1所示的服务器105)，上述电子设备获取的各个页面元素的位置信息还可以包括各个页面元素相对于第二预设基准线的第二偏移量信息，这里，第二预设基准线可以垂直于第一准线。其中，第二偏移量的单位可以是百分比，是相对于预定页面宽度而言的百分比。

在这些可选的实现方式中，本实施例的页面适配方法中的子步骤2023还可以进一步包括：基于第二偏移量信息所指示的第二偏移量和缩放比例的乘积确定展示页面中各页面元素在水平方向的位置。

在一些应用场景中，上述第二预设基准线例如可以与预设页面的左边框平行且部分重合。对于任意一个页面元素，上述电子设备可以首先由显示窗口的宽度信息所指示的宽度与预定页面的宽度信息所指示的宽度的比值所确定的缩放比例和与该元素对应的第二偏移量的乘积确定该页面元素在展示页面中水平方向上的偏移量。然后再确定该页面元素在水平方向的位置。这样一来，上述电子设备可以确定各个页面元素在终端设备的展示页面中水平方向的位置。从而可以对各个页面元素进行精确定位。

在本实施例的一些可选实现方式中，上述电子设备在获取预定页面的宽度信息、预定页面中各页面元素的位置信息以及终端设备显示窗口的宽度信息时，还可以获取预定页面中各页面元素的宽度信息和高度信息。这里，各页面元素的宽度信息所指示的宽度和高度信息所述指示的高度的单位例如可以为百分比。这里的百分比可以是相对于预定页面的宽度而言的百分比。在这些实施例中，上述渲染预定页面以生成展示页面还可以包括：确定展示页面中的任一页面元素的宽度和高度。其中，展示页面中的任一页面元素的宽度和高度可以分别由预定页面中的该页面元素的宽度信息所指示的宽度与缩放比例的乘积和该页面元素的高度信息所指示的高度与缩放比例的乘积确定。也就是说，对于任意一个页面元素，该页面元素在展示页面中的宽度等于预定页面中的该页面元素的宽度与上述缩放比例的乘积；该页面元素在展示页面中的高度等于预定页面中的该页面元素的高度与上述缩放比例的乘积。

在本实施例的一些可选实现方式中，在上述渲染预定页面以生成展示页面之后，上述页面适配方法还可以进一步包括：响应于检测到终端设备的屏幕翻转，执行上述页面适配操作。在这些实施例中，当上述电子设备为图1所示的终端设备时，上述终端设备可以根据事件(例如Onorientationchange事件)监听机制来实时检测终端设备屏幕是否翻转。当上述电子设备为图所示的服务器时，终端设备可以将监听到的屏幕翻转信息发送给服务器，以使服务器可以根据从终端设备接收到的屏幕翻转信息来执行上述页面适配操作。这样一来，当终端设备的屏幕翻转使得终端设备的显示窗口发生变化时，上述电子设备可以根据显示窗口的变化来实时调整展示页面中各页面元素的位置，从而使得展示页面可以适应显示窗口的变化。可以进一步提高页面的适配性。

进一步参考图4，作为对上述各图所示方法的实现，本申请提供了一种页面适配装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图4所示，本实施例的页面适配装置400包括：接收单元401、和执行单元402。其中，接收单元401配置用于接收用户对预定页面的访问请求；执行单元402配置用于执行如下的页面适配操作：获取预定页面的宽度信息、预定页面中各页面元素的位置信息以及显示窗口的宽度信息，其中，页面元素的位置信息包括页面元素相对第一预设基准线的第一偏移量信息，第一预设基准线沿预定页面的宽度方向延伸；基于显示窗口的宽度信息所指示的宽度与预定页面的宽度信息所指示的宽度的比值确定缩放比例；渲染预定页面以生成展示页面，其中，展示页面中各页面元素的在竖直方向上的位置基于第一偏移量信息所指示的第一偏移量和缩放比例的乘积确定。

在本实施例中，页面适配装置400的接收单元401和执行单元402的具体处理及其所带来的技术效果可分别参考图2对应实施例中步骤201和步骤202的相关说明，在此不再赘述。

在本实施例的一些可选的实现方式中，页面元素的位置信息还包括页面元素相对第二预设基准线的第二偏移量信息；以及展示页面中各页面元素在水平方向的位置基于第二偏移量信息所指示的第二偏移量和缩放比例的乘积确定，其中第二预设基准线与第一预设基准线互相垂直。

在本实施例的一些可选的实现方式中，上述执行单元402进一步配置用于：响应于检测到终端设备的屏幕翻转，执行页面适配操作。

在本实施例的一些可选的实现方式中，上述执行单元402进一步配置用于：获取预定页面各页面元素的宽度信息和高度信息；确定任一页面元素在展示页面中的宽度和高度，其中该页面元素在展示页面中的宽度和高度分别由预定页面中的该页面元素的宽度信息所指示的宽度与缩放比例的乘积和该页面元素的高度信息所指示的高度与缩放比例的乘积确定。

在本实施例的一些可选的实现方式中，第一预设基准线与预定页面的上边框平行且部分重合、与预设页面的下边框平行且部分重合或者经过预设页面的几何中心并沿预定页面的宽度方向延伸。

下面参考图5，其示出了适于用来实现本申请实施例的电子设备的计算机系统500的结构示意图。图5示出的电子设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图5所示，计算机系统500包括中央处理单元(CPU，Central Processing Unit)501，其可以根据存储在只读存储器(ROM，Read Only Memory)502中的程序或者从存储部分508加载到随机访问存储器(RAM，Random Access Memory)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有系统500操作所需的各种程序和数据。CPU 501、ROM502以及RAM 503通过总线504彼此相连。输入/输出(I/O，Input/Output)接口505也连接至总线504。

以下部件连接至I/O接口505：包括键盘、鼠标等的输入部分506；包括诸如阴极射线管(CRT，Cathode Ray Tube)、液晶显示器(LCD，Liquid Crystal Display)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；以及包括诸如LAN(局域网，Local AreaNetwork)卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至I/O接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元(CPU)501执行时，执行本申请的方法中限定的上述功能。需要说明的是，本申请所述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括接收单元和执行单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，接收单元还可以被描述为“接收用户对预定页面的访问请求的单元”。

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的装置中所包含的；也可以是单独存在，而未装配入该装置中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该装置执行时，使得该装置：接收用户对预定页面的访问请求；执行如下的页面适配操作：获取预定页面的宽度信息、预定页面中各页面元素的位置信息以及显示窗口的宽度信息，其中，页面元素的位置信息包括页面元素相对第一预设基准线的第一偏移量信息，第一预设基准线沿预定页面的宽度方向延伸；基于显示窗口的宽度信息所指示的宽度与预定页面的宽度信息所指示的宽度的比值确定缩放比例；渲染预定页面以生成展示页面，其中，展示页面中各页面元素的在竖直方向上的位置基于第一偏移量信息所指示的第一偏移量和缩放比例的乘积确定。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (12)

1.一种页面适配方法，包括：

接收用户对预定页面的访问请求；

执行如下的页面适配操作：

获取所述预定页面的宽度信息、所述预定页面中各页面元素的位置信息以及显示窗口的宽度信息，其中，所述页面元素的位置信息包括所述页面元素相对第一预设基准线的第一偏移量信息，所述第一预设基准线沿所述预定页面的宽度方向延伸；

基于所述显示窗口的宽度信息所指示的宽度与所述预定页面的宽度信息所指示的宽度的比值确定缩放比例；

渲染所述预定页面以生成展示页面，其中，所述展示页面中各页面元素的在竖直方向上的位置基于所述第一偏移量信息所指示的第一偏移量和所述缩放比例的乘积确定。

2.根据权利要求1所述的方法，其中，所述页面元素的位置信息还包括所述页面元素相对第二预设基准线的第二偏移量信息；以及

所述渲染所述预定页面以生成展示页面，还包括：

基于所述第二偏移量信息所指示的第二偏移量和所述缩放比例的乘积确定展示页面中各页面元素在水平方向的位置，其中所述第二预设基准线垂直于所述第一预设基准线。

3.根据权利要求2所述的方法，其中，所述获取所述预定页面的宽度信息、所述预定页面中各页面元素的位置信息以及所述终端设备显示窗口的宽度信息还包括：

获取所述预定页面中各页面元素的宽度信息和高度信息，以及

所述渲染所述预定页面以生成展示页面，还包括：

确定所述展示页面中的任一页面元素的宽度和高度，其中所述展示页面中的任一页面元素的宽度和高度分别由所述预定页面中的该页面元素的宽度信息所指示的宽度与所述缩放比例的乘积和该页面元素的高度信息所指示的高度与所述缩放比例的乘积确定。

4.根据权利要求2所述的方法，其中，在渲染所述预定页面以生成展示页面之后，所述方法还包括：

响应于检测到终端设备的屏幕翻转，执行所述页面适配操作。

5.根据权利要求1所述的方法，其中，所述第一预设基准线与所述预定页面的上边框平行且部分重合、与所述预设页面的下边框平行且部分重合或者经过所述预设页面的几何中心并沿所述预定页面的宽度方向延伸。

6.一种页面适配装置，包括：

接收单元，配置用于接收用户对预定页面的访问请求；

执行单元，配置用于执行如下的页面适配操作：

获取所述预定页面的宽度信息、所述预定页面中各页面元素的位置信息以及显示窗口的宽度信息，其中，所述页面元素的位置信息包括所述页面元素相对第一预设基准线的第一偏移量信息，所述第一预设基准线沿所述预定页面的宽度方向延伸；基于所述显示窗口的宽度信息所指示的宽度与所述预定页面的宽度信息所指示的宽度的比值确定缩放比例；渲染所述预定页面以生成展示页面，其中，所述展示页面中各页面元素的在竖直方向上的位置基于所述第一偏移量信息所指示的第一偏移量和所述缩放比例的乘积确定。

7.根据权利要求6所述的装置，其中，所述页面元素的位置信息还包括所述页面元素相对第二预设基准线的第二偏移量信息；以及

所述执行单元进一步配置用于：

基于所述第二偏移量信息所指示的第二偏移量和所述缩放比例的乘积确定展示页面中各页面元素在水平方向的位置，其中，所述第二预设基准线垂直于与所述第一预设基准线。

8.根据权利要求6所述的装置，其中，所述执行单元进一步配置用于：

获取所述预定页面各页面元素的宽度信息和高度信息；

确定任一页面元素在所述展示页面中的宽度和高度，其中该页面元素在所述展示页面中的宽度和高度分别由所述预定页面中的该页面元素的宽度信息所指示的宽度与所述缩放比例的乘积和该页面元素的高度信息所指示的高度与所述缩放比例的乘积确定。

9.根据权利要求7所述的装置，其中，所述执行单元进一步配置用于：

响应于检测到终端设备的屏幕翻转，执行所述页面适配操作。

10.根据权利要求6所述的装置，其中，所述第一预设基准线与所述预定页面的上边框平行且部分重合、与所述预设页面的下边框平行且部分重合或者经过所述预设页面的几何中心并沿所述预定页面的宽度方向延伸。

11.一种电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-5中任一所述的方法。

12.一种计算机可读存储介质，其上存储有计算机程序，其中，该程序被处理器执行时实现如权利要求1-5中任一所述的方法。