前端网页兼容电脑笔记本分辨率放大125%、150%的办法

有的电脑就是玩儿，哎非要默认125%或者150%的放大，还特喵的是推荐！css/* 屏幕分辨率放大为 150 */@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 120dpi) {.app-main {transform: scale(0.665, 0.665); /* 缩放数值需要根据效果调试 */transform-

阿晏_

10165人浏览 · 2022-03-09 19:55:14

阿晏_ · 2022-03-09 19:55:14 发布

有的电脑就是玩儿，哎非要默认125%或者150%的放大，还特喵的是推荐！
在这里插入图片描述

css

/* 屏幕分辨率放大为 150 */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 120dpi) {
    .app-main {
        transform: scale(0.665, 0.665); /* 缩放数值需要根据效果调试 */
        transform-origin: left top;
    }
}
/* 屏幕分辨率放大为 125 */
@media (-webkit-min-device-pixel-ratio: 1.25) {
    .app-main {
        transform: scale(0.799, 0.799); 
        transform-origin: left top;
    }
}

有时候一个页面要缩放一个不需要缩放，这时候就在需要缩放的页面里用js代码实现。

js

// 以.app-main 为例
if (window.devicePixelRatio == 1.5) {
   document.getElementsByClassName("app-main")[0].style.transform = "scale(0.665, 0.665)"
   document.getElementsByClassName("app-main")[0].style["transform-origin"] = "left top"
}
if (window.devicePixelRatio == 1.25) {
    document.getElementsByClassName("app-main")[0].style.transform = "scale(0.799, 0.799)"
    document.getElementsByClassName("app-main")[0].style["transform-origin"] = "left top"
}