JS页面缩放解决不同设备的自适应问题

Web网页重构中不同屏幕自适应展现出同样的效果一直是开发者比较烦恼的问题，本文将通过原生JavaScript代码通过页面缩放zoom来解决自适应问题。

以1920的屏幕宽为例，如果设计稿不一样可以自行修改。

function bodyScale() {
    var devicewidth = document.documentElement.clientWidth;
    var scale = devicewidth / 1920;  // 设计稿的尺寸宽度
    document.body.style.zoom = scale;
}
window.onload = window.onresize = function () {
    bodyScale();
};

了解更多前端开发知识，请收藏本站~