[发明专利]WEB界面自适应不同分辨率屏幕方法、装置、设备和介质

说明书

本发明提供一种WEB界面自适应不同分辨率屏幕方法、装置、设备和介质，方法包括：在初始化界面时默认整个界面body的宽度跟高度作为基线宽度分辨率Wj和基线高度分辨率Hj，并计算基线宽高固定比Rj＝Wj/Hj；监听浏览器的分辨率，若浏览器的分辨率发生变化，则获取浏览器变化后的实际宽度分辨率Ws和实际高度分辨率Hs，计算实际宽高比Rs＝Ws/Hs，将所述实际宽高比Rs和所述基线宽高固定比Rj进行比较，并计算缩放比例scale；设置容器的属性样式transform＝scale，对容器进行缩放；判断容器缩放后是否引起页面的宽度留白，若是，则将容器的最后宽度W设置为W＝Ws/scale，再次对容器的宽度拉伸至W。本发明通过页面实际宽高与设备屏幕的宽高的比例来重新构建界面，以实现不同分辨率屏幕的自适应功能。

技术领域

本发明涉及计算机技术领域，特别涉及一种WEB界面自适应不同分辨率屏幕方法、装置、设备和介质。

背景技术

随着图形化的发展，能预览WEB界面的屏幕设备种类越来越多，出现了4K,8K等不同分辨率的屏幕，而且移动设备的屏幕的分辨率也各不相同，使得同一套样式的WEB界面无法适应多种分辨率的屏幕。为了解决WEB界面自适应这些分辨率的屏幕的技术问题，目前市面上多数是采用开发多套css样式来自适应，因而需要写多套自适应代码；或者使用屏幕百分百方式来做自适应功能，这样造成开发者的工作量增大，并且市面上不同分辨率的设备还在不断增多，因此很难穷尽所有css样式。

发明内容

本发明要解决的技术问题，在于提供一种WEB界面自适应不同分辨率屏幕方法、装置、设备和介质，通过页面实际宽高与设备屏幕的宽高的比例来重新构建界面，以实现不同分辨率屏幕的自适应功能，减少了开发过程的整体工作量，提高开发效率，并且兼容了所有分辨率屏幕的设备，提高用户体验。

第一方面，本发明提供了一种WEB界面自适应不同分辨率屏幕方法，包括下述步骤：

S1、在初始化界面过程中时，默认整个界面body的宽度跟高度作为基线宽度分辨率Wj和基线高度分辨率Hj，并计算基线宽高固定比Rj＝Wj/Hj；

S2、监听浏览器的分辨率，若浏览器的分辨率发生变化，则获取浏览器变化后的实际宽度分辨率Ws和实际高度分辨率Hs，计算实际宽高比Rs＝Ws/Hs；

S3、将所述实际宽高比Rs和所述基线宽高固定比Rj进行比较，并计算缩放比例scale；

当Rs≥Rj时，缩放比例scale＝Hs/Hj；

当RsRj时，缩放比例scale＝Ws/Wj；

S4、对属性样式进行赋值，设置容器的属性样式transform＝scale，并以容器的任一点为缩放原点对容器进行缩放；

S5、判断容器缩放后是否引起页面的宽度留白，若是，则将容器的最后宽度W设置为W＝Ws/scale，再次对容器的宽度拉伸至W。

第二方面，本发明提供了一种WEB界面自适应不同分辨率屏幕装置，包括：

初始化模块，用于在初始化界面过程中时，默认整个界面body的宽度跟高度作为基线宽度分辨率Wj和基线高度分辨率Hj，并计算基线宽高固定比Rj＝Wj/Hj；

监听模块，用于监听浏览器的分辨率，若浏览器的分辨率发生变化，则获取浏览器变化后的实际宽度分辨率Ws和实际高度分辨率Hs；

缩放比例计算模块，用于计算实际宽高比Rs＝Ws/Hs，将所述实际宽高比Rs和所述基线宽高固定比Rj进行比较，并计算缩放比例scale；

当Rs≥Rj时，缩放比例scale＝Hs/Hj；

当RsRj时，缩放比例scale＝Ws/Wj；