现在很多企业喜欢做一些大屏展示功能,这种需求往往需要页面根据屏幕大小自动适配,下面提供一个方法可以轻松实现,供大家参考
/**
* 用于页面自动适配屏幕
* @param dw,dh 开发宽高,不设置以(1920 1080)计算,needLT 是否调整缩放起点,默认不设置
*/
const resetScreenSize = (dw: number, dh: number, needLT = false) => {
const init = () => {
const _el: any = document.getElementById('app');
const hScale = window.innerHeight / (dh || 1080);
const wScale = window.innerWidth / (dw || 1920);
_el.style.transform = 'scaleX(' + wScale + ') scaleY(' + hScale + ')';
needLT && (_el.style.transformOrigin = '0 0');
};
//监听窗口大小发生改变时自动调整
window.onresize = () => {
init();
};
init();
};