CSS 使用 JavaScript 或 CSS 检测比例设置（dpi）

在本文中，我们将介绍如何使用JavaScript或CSS来检测比例设置（dpi）。

阅读更多：CSS 教程

什么是比例设置（dpi）？

比例设置（dpi，Dots Per Inch）是测量设备屏幕或打印品质量的单位。通常，dpi数值越高，图像质量越高，细节显示越清晰。而在web开发中，了解设备屏幕的比例设置对于显示适应性和响应式设计非常重要。

使用JavaScript检测比例设置

要使用JavaScript检测比例设置，可以使用以下代码：

var dpi = window.devicePixelRatio;
console.log("dpi: " + dpi);

以上代码通过window.devicePixelRatio获取当前设备的比例设置，并将结果输出到浏览器的开发者工具控制台。

使用CSS检测比例设置

要使用CSS检测比例设置，可以使用媒体查询和CSS变量：

@media (min-resolution: 300dpi) {
  :root {
    --high-dpi: 1;
  }
}

@media not (min-resolution: 300dpi) {
  :root {
    --high-dpi: 0;
  }
}

body {
  background-color: var(--high-dpi) ? 'red' : 'blue';
}

以上代码通过使用@media媒体查询，针对不同的比例设置（dpi）为--high-dpi设置不同的值。然后，可以在CSS中使用该变量来应用特定的样式。

示例演示

下面我们通过一个示例演示如何检测比例设置并应用不同的样式：

@media (min-resolution: 300dpi) {
  :root {
    --high-dpi: 1;
  }
}

@media not (min-resolution: 300dpi) {
  :root {
    --high-dpi: 0;
  }
}

body {
  background-color: var(--high-dpi) ? 'red' : 'blue';
  width: 100%;
  height: 100vh;
}

h1 {
  color: white;
  text-align: center;
  font-size: 2rem;
  padding-top: 40vh;
}

在以上示例中，当设备比例设置为300dpi或更高时，背景色将为红色，否则为蓝色。同时，页面上方居中显示一个白色标题，标题大小为2rem。