let cw = 1920,ch = 1080//默认let body = document.getElementById('body')body.style.width = `${cw}px`body.style.height = `${ch}px`// 对body进行缩放function windowResize() {// 窗口宽高let w = window.innerWidth,h = window.innerHeight// 缩放比例let r = w / cw < h / ch ? w / cw : h / chbody.style.transform = `scale( ${r})`// 因为scale是以body的原中心点为基准进行缩放,所以缩放之后需要调整外边距,使其位于窗口的中心位置body.style.marginLeft = (-(cw - r * cw) / 2 + (w - r * cw) / 2) + 'px'body.style.marginTop = (-(ch - r * ch) / 2 + (h - r * ch) / 2) + 'px'body.style.marginBottom = (-(h > ch ? h : ch - r * ch)) + 'px'body.style.marginRight = (-(w > cw ? w : cw - r * cw)) + 'px'}window.addEventListener("load", windowResize())// 监听窗口尺寸变化window.addEventListener('resize', windowResize);
欢迎使用Markdown编辑器
当开发前端页面在分辨率1920的情况下,需要切换到小屏,有种方法是可以对屏幕比例进行缩放,通过css3属性transform可以自适应屏幕分辨率大小
var s;function resize() {s = window.screen.width / 1920;document.body.style.transformOrigin = '0 0';document.body.style.transform = 'scale(' + s + ',' + s + ')';document.body.style.width = window.innerWidth / s + 'px';document.body.style.height = window.innerHeight / s + 'px';}window.onresize = function () {resize();}resize();
通过计算屏幕分辨率比例,对当前页面进行比例缩放。
但是这会有一个问题,就是如果页面中有定位,缩放后定位的位置会跑偏。那是因为,如果使用定位left,top来固定窗口位置时候,body的大小改变会对它的children的定位产生影响,并且定位的弹框大小没有对应缩放。
发现一个简单的方法
s = window.screen.width / 1920;document.body.style.zoom = s;
这样就可以了