同1920x1080分辨率下Windows缩放不同，CSS适配网页显示方案咨询

纯CSS实现方案 #

可以通过媒体查询检测设备像素比（device-pixel-ratio），当值为1.25时（对应Windows 125%系统缩放），对根元素应用缩放变换，实现网页视觉尺寸与100%缩放时一致：

/* 适配Windows 125%系统缩放场景 */
@media (min--moz-device-pixel-ratio: 1.25),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) { /* 120dpi对应1.25倍像素密度 */
  :root {
    transform: scale(0.8); /* 1/1.25=0.8，将页面缩小至原尺寸的80% */
    transform-origin: top left; /* 以左上角为缩放原点，避免偏移 */
    width: 125%; /* 补偿缩放后的宽度，避免横向滚动条 */
    height: 125%; /* 补偿缩放后的高度，避免纵向滚动条 */
    overflow-x: hidden;
  }
}

将这段代码添加到全局样式中即可生效。

针对你的测试组件的局部调整 #

如果仅需要给特定组件做适配，可将缩放规则应用到.test容器：

$sizeImg: 75%;

.test {
    @apply w-screen h-screen flex;
  
    /* 新增125%缩放适配规则 */
    @media (min--moz-device-pixel-ratio: 1.25),
           (-webkit-min-device-pixel-ratio: 1.25),
           (min-device-pixel-ratio: 1.25),
           (min-resolution: 120dpi) {
      transform: scale(0.8);
      transform-origin: top left;
      width: 125%;
      height: 125%;
      overflow: hidden;
    }

    .cover {
        @apply w-[50%] relative flex justify-end items-center;
        
        &:before {
            content: '';
            @apply bg-slate-400 absolute;
            width: calc(100% - #{$sizeImg} / 2);
            height: 100%;
            left: 0;
        }
    }

    .text {
        @apply w-full bg-slate-600;
    }
}

备选方案：使用zoom属性（简洁但兼容性有限） #

部分浏览器支持非标准的zoom属性，实现更简洁，无需额外调整宽高：

@media (min--moz-device-pixel-ratio: 1.25),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
  :root {
    zoom: 0.8;
  }
}

注意：该属性在Firefox中不支持，需兼容Firefox场景优先选择transform方案。

注意事项 #

• 强制缩放可能导致文本边缘模糊，尤其在高DPI屏幕上，因为浏览器需重新渲染缩放后的内容。
• 依赖精确像素定位的元素（如绝对定位组件）可能出现偏移，需额外调整样式。
• 长期更优方案是使用相对单位（rem、em、%）替代固定像素值，让页面自然适配不同缩放比例，避免强制缩放带来的兼容性问题。

内容的提问来源于stack exchange，提问作者Fa4stik