目录
场景再现:设计稿 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();