transform: scale(x, y) 等比缩放后，出现白边 / 滚动条 的解决方案

目录

1. 等比缩放的原理

1.1 得到当前窗口宽高 和 设计稿宽高的比例

1.2 缩放页面的三种方式

2. 等比缩放后，出现白边怎么办？

3. 等比缩放后，出现滚动条怎么办？

4. 等比缩放完整 JavaScript 代码

---

场景再现：设计稿 1920 x 1080，进行完等比缩放后，会出现下面两种问题：

• 多了白边
• 多了滚动条的问题

该如何解决呢？

1. 等比缩放的原理

1.1 得到当前窗口宽高 和 设计稿宽高的比例

$(window).width()：获取当前窗口的宽度

$(window).height()：获取当前窗口的高度

ratioX = $(window).width() / 1920;：得到当前窗口宽度 和 设计稿宽度的比例

ratioY = $(window).height() / 1080;：得到当前窗口高度 和 设计稿高度的比例

1.2 缩放页面的三种方式

transform: "scale(" + ratioX + ',' + ratioY + ")", ：将页面 根据宽高 进行 等比缩放

 

注意：可以 只根据宽度 进行缩放，也可以 只根据高度 进行缩放，又或者 同时根据宽高 进行缩放

• transform: "scale(" + ratioX + ")", ：只根据宽度 进行缩放
• transform: "scale(" + ratioY + ")", ：只根据高度 进行缩放
• transform: "scale(" + ratioX + ',' + ratioY + ")", ：同时根据宽高 进行缩放

transformOrigin: "left top"：页面对齐方式（上下左右居中）

2. 等比缩放后，出现白边怎么办？

如下图所示，等比缩放后会出现白边儿：

​​​​​​​

这是因为：设计稿的宽高比例 和 浏览器窗口的比例 是不同的：

• 如果根据宽进行缩放，那么宽会适应屏幕，高的部分可能会出现白边，或者滚动条
• 如果根据高进行缩放，那么高会适应屏幕，宽的部分可能会出现白边，或者滚动条 

解决方案【二选一 或 同时】：

• 更换符合浏览器尺寸比例的设计稿
• 同时根据宽高进行缩放

3. 等比缩放后，出现滚动条怎么办？

如果我们 居中对齐（transformOrigin: "center center"），很大概率会出现滚动条的，页面被缩小到了屏幕中间，如下图所示：

​​​​​​​

为了不出现滚动条，我们应该 居左居上对齐（transformOrigin: "left top"）

4. 等比缩放完整 JavaScript 代码

普通版：

// 页面等比缩放
function resetSize() {
    // 1920 代表当前页面的宽度，可动态获取；
    var ratioX = $(window).width() / 1920;
    // 1080 代表当前页面的高度，可动态获取；
    var ratioY = $(window).height() / 1080;
    $('body').css({
        // 同时根据宽高等比缩放
        transform: "scale(" + ratioX + ',' + ratioY + ")",
        // 对齐方法
        transformOrigin: "left top"
    });
}

resetSize();

进阶版（考虑兼容性问题）：

function resetSize() {
  const xScale = window.screen.width / 1920; // 设计稿宽度
  const yScale = window.screen.height / 1208; // 设计稿高度
  $('body').css('transform-origin', 'left top')
  $('body').css('-ms-transform-origin', 'left top')
  $('body').css('-o-transform-origin', 'left top')
  $('body').css('-webkit-transform-origin', 'left top')
  $('body').css('-moz-transform-origin', 'left top')
  $('body').css('transform', `scaleX(${xScale}) scaleY(${yScale})`)
  $('body').css('-webkit-transform', `scaleX(${xScale}) scaleY(${yScale})`)
  $('body').css('-ms-transform', `scaleX(${xScale}) scaleY(${yScale})`)
  $('body').css('-o-transform', `scaleX(${xScale}) scaleY(${yScale})`)
  $('body').css('-moz-transform', `scaleX(${xScale}) scaleY(${yScale})`)
}

resetSize();