js自动缩放页面自适应屏幕分辨率

欢迎使用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;

这样就可以了