后端转前端开发,按照设计图实现好的网站在本机显示正常,客户笔记本电脑上显示错位。后来发现是很多笔记本电脑的 windows 系统默认会设置缩放,一般比例是 125%,也有 150%、175%、200%等。
最好的解决办法是通过媒体查询多写几套样式代码,但是这样工作量增加很多,简单的解决办法就是根据屏幕像素比自动设置网页的 zoom 缩放比例,js 代码如下:
版本1:
<script>
(function () {
var ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();
let view = document.querySelector('body');
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
}
else if (~ua.indexOf('msie')) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
}
else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio && ratio !== 1) {
if (ratio >= 2) {
ratio = ratio / 2
} else if (ratio >= 3) {
ratio = ratio / 3
}
view.style.zoom = -0.62 * ratio + 1.65;
}
//console.log("dpi", ratio)
})(window);
</script>
版本2:
<script>
// 屏幕适配
const t = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5
// var heigth_screen = window.screen.height; // 获取整个屏幕的分辨率
const width_screen = window.screen.width;
let zoom = 1
if (t !== 1) {
zoom = (1 / t) * zoom; // 就去修改页面的缩放比例
}
if (width_screen < 1366) {
zoom = (width_screen / 1366) * zoom; // 就去修改页面的缩放比例
}
document.body.style.zoom = zoom; // 就去修改页面的缩放比例
</script>
以上两个版本代码任选其一,加到网页尾部的 </body> 前即可。