页面适配方法和装置制造方法及图纸

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

Page adaptation method and device

The application embodiment discloses a page adaptation method and device. The specific implementation of this method includes: receiving the user's access to a predetermined page, and performing the following matching operation: the width information of the predetermined page, the location information of each page element in the predetermined page, and the width of the display window, in which the location information of the page element includes the page element phase. For the first offset information of the first presupposition line, the first presupposition line extends along the width direction of the predetermined page; the width indicated by the width information of the display window is proportional to the ratio indicated by the width indicated by the width information of the predetermined page; rendering the predetermined page to generate the display page, in which the display page is displayed. The position of each page element in the vertical direction of the page is determined based on the product of the first offset and the scaling factor indicated by the first offset information. The implementation improves the adaptability of pages on different terminal devices.

【技术实现步骤摘要】
页面适配方法和装置
本申请实施例涉及计算机
，具体涉及互联网
，尤其涉及页面适配方法和装置。
技术介绍
HTML5(HypertextMarkupLanguage5rd，超文本标记语言标准第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播放器(MovingPictureExpertsGroupAudioLayerIII，动态影像专家压缩标准音频层面3)、MP4(MovingPictureExpertsGroupAudioLayerIV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的网页页面内容提供支持的后台服务器。后台服务器可以对接收到的用户的网页页面浏览请求本文档来自技高网...

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

【技术特征摘要】
1.一种页面适配方法，包括：接收用户对预定页面的访问请求；执行如下的页面适配操作：获取所述预定页面的宽度信息、所述预定页面中各页面元素的位置信息以及显示窗口的宽度信息，其中，所述页面元素的位置信息包括所述页面元素相对第一预设基准线的第一偏移量信息，所述第一预设基准线沿所述预定页面的宽度方向延伸；基于所述显示窗口的宽度信息所指示的宽度与所述预定页面的宽度信息所指示的宽度的比值确定缩放比例；渲染所述预定页面以生成展示页面，其中，所述展示页面中各页面元素的在竖直方向上的位置基于所述第一偏移量信息所指示的第一偏移量和所述缩放比例的乘积确定。2.根据权利要求1所述的方法，其中，所述页面元素的位置信息还包括所述页面元素相对第二预设基准线的第二偏移量信息；以及所述渲染所述预定页面以生成展示页面，还包括：基于所述第二偏移量信息所指示的第二偏移量和所述缩放比例的乘积确定展示页面中各页面元素在水平方向的位置，其中所述第二预设基准线垂直于所述第一预设基准线。3.根据权利要求2所述的方法，其中，所述获取所述预定页面的宽度信息、所述预定页面中各页面元素的位置信息以及所述终端设备显示窗口的宽度信息还包括：获取所述预定页面中各页面元素的宽度信息和高度信息，以及所述渲染所述预定页面以生成展示页面，还包括：确定所述展示页面中的任一页面元素的宽度和高度，其中所述展示页面中的任一页面元素的宽度和高度分别由所述预定页面中的该页面元素的宽度信息所指示的宽度与所述缩放比例的乘积和该页面元素的高度信息所指示的高度与所述缩放比例的乘积确定。4.根据权利要求2所述的方法，其中，在渲染所述预定页面以生成展示页面之后，所述方法还包括：响应于检测到终端设备的屏幕翻转，执行所述页面适配操作。5.根据权利要求1所述的方法，其中，所述第一预设基准线与所述预定页面的上边框平行且部分重合、与所述预设页面的下边框平行且部分重合或者经过所述预设页面的几何中心并沿所述预定页面的宽度方向延伸。6.一种页面适配装置，包括：接收单元，配置用于接收用户对预定页面的访问请求；执行单元，...

【专利技术属性】
技术研发人员：潘征，张博，
申请(专利权)人：北京百度网讯科技有限公司，
类型：发明
国别省市：北京,11