[发明专利]页面适配方法、装置、计算机设备及存储介质

说明书

本申请提出一种页面适配方法、装置、计算机设备及存储介质，该方法包括：获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号；根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比，其中所述当前窗口尺寸包括窗口宽度和窗口高度，所述页面原始尺寸包括页面宽度和页面高度；基于所述宽度变化比和所述高度变化比确定元素缩放比，根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号。该方法可使页面中的元素按照根元素的第一字号的变化自动缩放以适配不同屏幕分辨率的电子设备，并根据当前窗口尺寸的变化及时调整根元素的第一字号，进而调整页面中所有元素的尺寸。

技术领域

本申请涉及计算机技术领域，具体涉及一种页面适配方法、装置、计算机设备及存储介质。

背景技术

随着科技的发展，各种类型的电子设备越来越多，并且不同电子设备上的屏幕分辨率也各不相同。电子设备中的浏览器需要将Web服务器中的文件解析并渲染成可视化的页面，那么为了使页面适配不同屏幕分辨率的电子设备，前端工程师往往需要根据一张页面针对不同的电子设备开发对应的版本，以使得页面内容可以完整、清晰地展示。

随着前端技术的模块化和工程化，各种相应的框架和方案也逐渐成熟，包括Vue、React等框架都提供了组件化能力和脚手架工程, 提高了模块化能力进而提高了开发效率。前端工程师根据页面设计稿开发出对应的页面后, 通过调用接口获取数据填充到页面上, 联调完成通过测试后, 将前端代码打包部署发布到Web服务器。

目前常见的页面适配方案包括栅格布局和媒体查询。栅格布局，是一种自适应布局，由栅格容器和栅格项目组成，能够根据不同的屏幕分辨率自动伸缩容器的尺寸，但该方式对于历史项目来说，需要修改原有代码，侵入性较大，且会增加额外的工作量，具有一定的改造成本。媒体查询，可通过获取到当前页面的视窗大小，根据当前视窗大小来应用相应的样式表，从而实现在不同分辨率下使页面内容自动适配，但该方式需要在页面开发时增加额外的JavaScript代码，如果需要适配较多不同屏幕分辨率的电子设备，前端工程师需要针对不同的电子设备和不同的屏幕分辨率增加对应的JavaScript代码，不仅工作量增多，后续的维护成本也会相应增加。

发明内容

第一方面，本申请实施例提供了一种页面适配方法，可通过浏览器运行，可以根据不同的屏幕分辨率自动缩放并调整页面中的内容，以实现页面在不同分辨率的设备上的自动适配。

该页面分辨率适配方法可在不同设备上依据显示页面的窗口相较页面原始尺寸的变化情况，自动设置根元素适配尺寸，且依据根元素适配尺寸和根元素及子元素的相对尺寸设置子元素适配尺寸，在简化了适配流程的同时保证了页面的显示效果。且本申请实施例是选取当前窗口尺寸和页面原始尺寸中宽高变化较小的对应的缩放比作为变化情况的依据，以期达到防止过度拉伸导致显示页面中元素显示效果不佳的效果。

具体的，该方法包括：

获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号；

根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比，其中所述当前窗口尺寸包括窗口宽度和窗口高度，所述页面原始尺寸包括页面宽度和页面高度；

基于所述宽度变化比和所述高度变化比确定元素缩放比，根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号。

在一些实施例中，在“根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比”前，还包括步骤：判断所述当前窗口尺寸是否匹配所述页面原始尺寸，若不匹配则继续执行后续计算宽度变化比和高度变化比的步骤。也就是说，如果所述当前窗口尺寸恰好匹配所述页面原始尺寸，可以按照所述页面原始尺寸直接重新渲染所述页面。