如何用JavaScript检测指定高DPI CSS媒体查询并生成布尔标记？

当然可以实现！你可以通过JavaScript结合你现有的CSS媒体查询条件，轻松获取一个表示当前屏幕是否符合高DPI要求的布尔值。下面是两种实用的方法：

方法1：直接使用window.matchMedia() API #

这是最简洁的方式，浏览器原生支持直接检测媒体查询是否匹配：

// 定义你的高DPI媒体查询字符串
const highDpiQuery = `only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi)`;

// 检测是否匹配
const isHighDpi = window.matchMedia(highDpiQuery).matches;

// 输出结果（true或false）
console.log(isHighDpi);

这个方法还支持监听屏幕变化（比如窗口缩放、切换显示器），如果需要实时更新状态，可以添加监听：

const mediaQueryList = window.matchMedia(highDpiQuery);

function handleDpiChange(e) {
  const isHighDpiNow = e.matches;
  console.log("高DPI状态变化：", isHighDpiNow);
  // 这里可以执行你的后续逻辑
}

// 初始检测
handleDpiChange(mediaQueryList);
// 添加监听
mediaQueryList.addEventListener('change', handleDpiChange);

方法2：通过CSS类/变量间接判断 #

如果你更倾向于先通过CSS标记状态，再用JavaScript读取，也可以这样做：

首先在CSS中添加媒体查询规则：

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
  :root {
    --is-high-dpi: "true";
    /* 或者添加类名 */
    /* body.high-dpi { } */
  }
}

然后用JavaScript读取这个变量（或检测类名）：

// 读取CSS变量的方式
const rootStyle = getComputedStyle(document.documentElement);
const isHighDpi = rootStyle.getPropertyValue('--is-high-dpi') === "true";

// 或者检测类名的方式
// const isHighDpi = document.body.classList.contains('high-dpi');

console.log(isHighDpi);

两种方法都能满足你的需求，window.matchMedia()更适合实时场景，而CSS类/变量的方式兼容性在旧浏览器中可能稍好一些，你可以根据自己的项目需求选择。

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