当前设备的物理像素分辨率与CSS像素分辨率之比window.devicePixelRatio

最新推荐文章于 2023-12-12 15:21:02 发布

愚舜

最新推荐文章于 2023-12-12 15:21:02 发布

阅读量943

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/first_shun/article/details/106447427

版权

window.devicePixelRatio属性用于获取设备物理像素与CSS像素的比例，例如值为4表示1个CSS像素等于4个物理像素。这在优化canvas显示质量时特别有用，能以更高分辨率呈现图像。

摘要由CSDN通过智能技术生成

window.devicePixelRatio属性返回的value的值是当前设备的物理像素分辨率与css像素分辨率的比率，简单的说，该比例为4，则代表1个css像素由4个实际物理像素组成。

var value = window.devicePixelRatio;

value是一个double类型的值，使用window.devicePixelRatio属性最常见的使用是可以矫正canvas的使用分辨率；

<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>devicePixelRatio</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
        var canvas = document.querySelector('#canvas');