window属性：devicePixelRatio

**之火

已于 2024-11-12 09:10:42 修改

阅读量1.8k

点赞数 5

分类专栏： javaScript windows属性文章标签：前端 javascript windows

于 2024-11-12 09:08:50 首次发布

本文链接：https://blog.csdn.net/qq_35876316/article/details/143700658

版权

javaScript 同时被 2 个专栏收录

56 篇文章

订阅专栏

windows属性

6 篇文章

订阅专栏

window.devicePixelRatio 是一个只读属性，返回设备的像素比例（DPR，Device Pixel Ratio）。这个比例表示物理像素和设备独立像素（CSS像素）之间的比率。简而言之，它告诉我们一个物理像素由多少个设备独立像素组成。

DPR 通常用于检测设备的高分辨率显示能力，特别是在视网膜显示屏（Retina Display）上。高DPR值意味着更多的物理像素，这可以用来提供更清晰的图像和更精细的细节。

`devicePixelRatio` 的值可以用于：

提供高分辨率图像：根据DPR值加载更高分辨率的图像，以利用高DPI显示屏的优势。
调整布局和样式：根据DPR值调整元素的大小和间距，以保持在不同设备上的视觉效果一致。
性能优化：在低DPR设备上避免加载高分辨率图像，以减少数据使用和提高加载速度。

根据 DPR 提供不同分辨率的图像

const imageElement = document.getElementById('imageElement');
const DPR = window.devicePixelRatio;

if (DPR >= 2) {
  imageElement.src = 'image@2x.jpg'; // 高分辨率图像
} else {
  imageElement.src = 'image.jpg'; // 标准分辨率图像
}

动态调整元素大小

const element = document.getElementById('resizeElement');
const DPR = window.devicePixelRatio;

// 根据DPR动态设置元素的宽度
element.style.width = `${50 * DPR}px`;

检测高分辨率显示

if (window.devicePixelRatio > 1) {
  console.log('高分辨率显示');
} else {
  console.log('标准分辨率显示');
}

使用媒体查询和 DPR

/* 默认样式 */
img {
  width: 100px;
  height: 100px;
}

/* DPR大于1时的样式 */
@media (min-resolution: 2dppx) {
  img {
    width: 200px;
    height: 200px;
  }
}

devicePixelRatio 可能不总是整数，因此在使用时可能需要四舍五入或适当处理。
一些旧的浏览器不支持 devicePixelRatio，因此在使用前最好进行检查：if ('devicePixelRatio' in window)。
由于 devicePixelRatio 是只读属性，你不能改变它的值，只能读取。

根据DPR调整网页布局

1. 调整字体大小---（在高DPR设备上，较小的字体可能看起来模糊，因此我们可以根据DPR值动态调整字体大小。）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DPR Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .high-dpr {
    font-size: calc(16px + 8 * (1 - 1 / var(--dpr)));
  }
</style>
</head>
<body>
<div class="high-dpr">这段文字的大小会根据DPR进行调整。</div>

<script>
  // 设置CSS变量
  const dpr = window.devicePixelRatio;
  document.documentElement.style.setProperty('--dpr', dpr);

  // 也可以直接在JavaScript中调整样式
  const element = document.querySelector('.high-dpr');
  element.style.fontSize = `${16 * dpr}px`; // 基于DPR缩放字体大小
</script>
</body>
</html>

2. 调整图片大小和质量--（在高DPR设备上，我们可以加载更高分辨率的图片，以确保图片清晰度。）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DPR Image Example</title>
</head>
<body>
<img id="responsive-image" src="image.jpg" alt="Responsive Image">

<script>
  const image = document.getElementById('responsive-image');
  const DPR = window.devicePixelRatio;

  if (DPR > 1) {
    image.src = 'image@2x.jpg'; // 加载更高分辨率的图片
    // 也可以调整图片的CSS大小，以适应不同的DPR
    image.style.width = `${image.naturalWidth / DPR}px`; // 根据DPR调整宽度
    image.style.height = `${image.naturalHeight / DPR}px`; // 根据DPR调整高度
  }
</script>
</body>
</html>