【技术实现步骤摘要】
本专利技术涉及计算机，具体涉及一种页面自适应适配方法、电子设备及计算机可读介质。
技术介绍
1、现有技术中，显示大屏页面的项目所使用的常见布局方式是：中央区域显示地图、3d元素等主视觉元素，两侧展示图表。通常页面会按照固定的尺寸来提供设计稿，如1920px*1080px，而后在保持页面内容与设计稿宽高比一致的前提下等比缩放进行适配。然而这种适配方式，在设计稿与屏幕宽高比不相等时，会产生页面内容两侧留白的问题。
技术实现思路
1、本专利技术旨在一定程度上解决相关技术中的技术问题之一。为此，本专利技术提供了一种页面自适应适配方法，使页面与屏幕的适配度更高。
2、为了达到上述目的，本专利技术采用如下技术方案：
3、一种页面自适应适配方法，包括如下步骤：
4、获取屏幕参数和设计参数；
5、计算整体缩放度和页面容器宽度；
6、基于整体缩放度和页面容器宽度设置页面容器的css属性，完成页面与屏幕的适配。
7、可选的，所述屏幕参数包括屏幕宽度和屏幕高度；所述设计参数包括设计宽度、设计高度和最大宽度。
8、可选的，计算整体缩放度包括如下步骤：
9、根据如下公式计算宽度比和高度比：
10、
11、
12、其中，rw为宽度比，sw为屏幕宽度，dw为设计宽度，rh为高度比，sh为屏幕高度，dh为设计高度；
13、取宽度比rw和高度比rh中的较小值作为整体缩放度。
14、可选的，计算页面容器宽度包括如下步骤：
15、比较宽度比和高度比；
16、如果宽度比大于高度比，页面容器宽度为：
17、cw＝min{sw/scale,mw}
18、其中，cw为页面容器宽度，scale为整体缩放度，mw为最大宽度；
19、如果宽度比小于高度比，页面容器宽度为设计宽度。
20、可选的，基于整体缩放度和页面容器宽度设置页面容器的css属性包括：页面缩放度为整体缩放度，页面宽度为页面容器宽度，页面高度为设计高度。
21、本专利技术所提供的技术方案，在计算出整体缩放度和页面容器宽度后，基于计算出的整体缩放度和页面容器宽度设置页面容器的css属性，以在不同的情况下进行缩放。例如，当设计稿的设计宽度与最大宽度相等时，可按照设计稿的固定宽高比进行页面与屏幕的适配；而当设计稿的设计宽度小于最大宽度时，则基于整体缩放度和计算出的页面容器宽度。如此，页面便能够在设定的宽高比范围内(例如16:9到21:9)动态缩放，完成与屏幕的适配，同时避免页面内容两侧留白。
22、并且，本专利技术还提供了一种电子设备，包括：
23、一个或多个处理器；
24、存储器，其上存储有一个或多个计算机程序，当所述一个或多个计算机程序被所述一个或多个处理器执行时，所述一个或多个处理器实现前述任意一项所述的页面自适应适配方法。
25、同时，本专利技术还提供了一种计算机可读介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述的页面自适应适配方法。
26、本专利技术的这些特点和优点将会在下面的具体实施方式以及附图中进行详细的揭露。本专利技术最佳的实施方式或手段将结合附图来详尽表现，但并非是对本专利技术技术方案的限制。另外，在每个下文和附图中出现的这些特征、要素和组件是具有多个，并且为了表示方便而标记了不同的符号或数字，但均表示相同或相似构造或功能的部件。
本文档来自技高网...【技术保护点】
1.一种页面自适应适配方法，其特征在于，所述页面自适应适配方法包括如下步骤：
2.根据权利要求1所述的页面自适应适配方法，其特征在于，所述屏幕参数包括屏幕宽度和屏幕高度；所述设计参数包括设计宽度、设计高度和最大宽度。
3.根据权利要求2所述的页面自适应适配方法，其特征在于，计算整体缩放度包括如下步骤：
4.根据权利要求3所述的页面自适应适配方法，其特征在于，计算页面容器宽度包括如下步骤：
5.根据权利要求4所述的页面自适应适配方法，其特征在于，基于整体缩放度和页面容器宽度设置页面容器的CSS属性包括：页面缩放度为整体缩放度，页面宽度为页面容器宽度，页面高度为设计高度。
6.一种电子设备，其特征在于，包括：
7.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至5中任一项所述的页面自适应适配方法。
【技术特征摘要】
1.一种页面自适应适配方法，其特征在于，所述页面自适应适配方法包括如下步骤：
2.根据权利要求1所述的页面自适应适配方法，其特征在于，所述屏幕参数包括屏幕宽度和屏幕高度；所述设计参数包括设计宽度、设计高度和最大宽度。
3.根据权利要求2所述的页面自适应适配方法，其特征在于，计算整体缩放度包括如下步骤：
4.根据权利要求3所述的页面自适应适配方法，其特征在于，计算页面容器宽度...
【专利技术属性】
技术研发人员：孙浩鹏，
申请(专利权)人：江苏缤原力科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。