【技术实现步骤摘要】
本专利技术涉及页面适配领域，尤其涉及一种对屏幕分辨率的页面适配方法、设备及存储介质。
技术介绍
1、当前网站建设低代码化的趋势越来越明显，传统代码开发的方式进行网站建设已经越来越不适用，越来越多的企业采用第三方页面可视化编辑器进行网站开发，通过拖拉组件的方式区创建页面，但随之而来的是可视化编辑构建的页面如何适配多分辨率屏幕的问题。目前主流的页面可视化编辑器的布局方案有两种：
2、(1)以wordpress为代表，基于flex方式的页面布局；
3、(2)以wix为代表，基于定位方式的页面布局。
4、基于flex方式布局的页面编辑器，优点在于在适配性方面较好，能适配各种分辨率的界面。缺点在于使用起来比较复杂，使用门槛高，布局的层级嵌套多，限制多，实现页面所花费的时间较多，只适合快速实现规整简单的页面，不适用于实现对元素或组件摆放位置要求更为个性的页面。
5、基于wix定位方式的页面编辑器，优点在于支持用户随心所欲的拖动元素或组件，以定位的方式降低用户使用门槛，快速产出个性化的页面。缺点在于由于定位是基于左上原点进行定位，在适配性方面有待提高，容易因为分辨率问题出现位置偏移和遮挡。当分辨率增大时，会出现所有元素向左偏的情况；当分辨率减小时，会出现部分元素被遮挡的问题。如图1和图2，图1为现有定位方式的页面布局中的初始页面，图2为现有定位方式的页面布局中变更分辨率的显示页面。传统元素定位基于左上角基准原点，元素在水平方向和垂直方向设置一定的百分比距离或者固定px，通过这种方式，可以给元素一
6、因此，对于wix定位方式的页面布局由于分辨率变化出现位置偏移和遮挡导致显示效果不佳的技术问题，需要一种新的技术来解决当前问题。
技术实现思路
1、本专利技术的主要目的在于解决wix定位方式的页面布局由于分辨率变化出现位置偏移和遮挡导致显示效果不佳的技术问题。
2、本专利技术第一方面提供了一种对屏幕分辨率的页面适配方法，，包括步骤：
3、基于第一屏幕分辨率，对显示页面设置固定宽度；
4、在所述显示页面中设置版面原点，基于所述版面原点，计算所述显示页面中所有元素相对于所述版面原点的坐标数据，得到元素坐标集；
5、根据所述固定宽度，将所述显示页面的宽边固定显示在第二屏幕分辨率上，其中，所述第二屏幕分辨率的宽度大于所述第一屏幕分辨率的宽度；
6、基于所述元素坐标集和所述版面原点，将所述显示页面中所有元素显示于所述第二屏幕分辨率上。
7、可选的，在本专利技术第一方面的第一种实现方式中，所述基于第一屏幕分辨率，对显示页面设置固定宽度包括：
8、基于第一屏幕分辨率的横向分辨值，对显示页面设置不大于所述横向分辨值的固定宽度。
9、可选的，在本专利技术第一方面的第二种实现方式中，所述固定宽度为1024像素。
10、可选的，在本专利技术第一方面的第三种实现方式中，所述在所述显示页面中设置版面原点包括：
11、在所述显示页面的版心顶角处设置版面原点。
12、可选的，在本专利技术第一方面的第四种实现方式中，所述在所述显示页面的版心顶角处设置版面原点包括：
13、在所述显示页面的版心左上角处设置版面原点。
14、可选的，在本专利技术第一方面的第五种实现方式中，所述根据所述固定宽度，将所述显示页面的宽边固定显示在第二屏幕分辨率上包括：
15、在第二屏幕分辨率的显示边缘处，居中找到所述固定宽度的线段；
16、将所述显示页面的宽边固定重合固定于所述线段处。
17、可选的，在本专利技术第一方面的第六种实现方式中，在所述基于所述元素坐标集和所述版面原点，将所述显示页面中所有元素显示于所述第二屏幕分辨率上之后，还包括：
18、接收翻转指令，根据所述翻转指令，将所述显示页面在所述第二屏幕分辨率上进行翻转处理，得到在所述第二屏幕分辨率上翻转显示的显示页面。
19、可选的，在本专利技术第一方面的第七种实现方式中，在所述基于所述元素坐标集和所述版面原点，将所述显示页面中所有元素显示于所述第二屏幕分辨率上之后，还包括：
20、接收所述第二屏幕分辨率的放大比例/缩小比例；
21、基于所述放大比例/缩小比例，对所述显示页面进行放大处理/缩小处理。
22、本专利技术第二方面提供了一种对屏幕分辨率的页面适配设备，包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；所述至少一个处理器调用所述存储器中的所述指令，以使得所述对屏幕分辨率的页面适配设备执行上述的对屏幕分辨率的页面适配方法。
23、本专利技术的第三方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述的对屏幕分辨率的页面适配方法。
24、在本专利技术实施例中，通过设置版心原点和固定页面宽度值，在显示分辨率变化能在固定宽度值上，利用版心原点作为页面布局基准原点，计算和还原出页面布局中所有元素相对于基准原点距离，通过采用这种方式，在实际页面分辨率变大的时候，元素发生偏移可以忽略不计，不会影响页面的展示效果，解决了wix定位方式的页面布局由于分辨率变化出现位置偏移和遮挡导致显示效果不佳的技术问题。
本文档来自技高网...【技术保护点】
1.一种对屏幕分辨率的页面适配方法，其特征在于，包括步骤：
2.根据权利要求1所述的对屏幕分辨率的页面适配方法，其特征在于，所述基于第一屏幕分辨率，对显示页面设置固定宽度包括：
3.根据权利要求2所述的对屏幕分辨率的页面适配方法，其特征在于，所述固定宽度为1024像素。
4.根据权利要求1所述的对屏幕分辨率的页面适配方法，其特征在于，所述在所述显示页面中设置版面原点包括：
5.根据权利要求4所述的对屏幕分辨率的页面适配方法，其特征在于，所述在所述显示页面的版心顶角处设置版面原点包括：
6.根据权利要求1所述的对屏幕分辨率的页面适配方法，其特征在于，所述根据所述固定宽度，将所述显示页面的宽边固定显示在第二屏幕分辨率上包括：
7.根据权利要求1所述的对屏幕分辨率的页面适配方法，其特征在于，在所述基于所述元素坐标集和所述版面原点，将所述显示页面中所有元素显示于所述第二屏幕分辨率上之后，还包括：
8.根据权利要求1所述的对屏幕分辨率的页面适配方法，其特征在于，在所述基于所述元素坐标集和所述版面原点，将所述
9.一种对屏幕分辨率的页面适配设备，其特征在于，所述对屏幕分辨率的页面适配设备包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；
10.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-8中任一项所述的对屏幕分辨率的页面适配方法。
...【技术特征摘要】
1.一种对屏幕分辨率的页面适配方法，其特征在于，包括步骤：
2.根据权利要求1所述的对屏幕分辨率的页面适配方法，其特征在于，所述基于第一屏幕分辨率，对显示页面设置固定宽度包括：
3.根据权利要求2所述的对屏幕分辨率的页面适配方法，其特征在于，所述固定宽度为1024像素。
4.根据权利要求1所述的对屏幕分辨率的页面适配方法，其特征在于，所述在所述显示页面中设置版面原点包括：
5.根据权利要求4所述的对屏幕分辨率的页面适配方法，其特征在于，所述在所述显示页面的版心顶角处设置版面原点包括：
6.根据权利要求1所述的对屏幕分辨率的页面适配方法，其特征在于，所述根据所述固定宽度，将所述显示页面的宽边固定显示在第二屏幕分辨率上包括：
7.根据权利要...
【专利技术属性】
技术研发人员：许灿杰，黄德安，陈子文，闫超，
申请(专利权)人：深圳麦风科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。