JavaScript devicePixelRatio — щільність пікселів екрана

Властивість devicePixelRatio показує, скільки фізичних пікселів екрана припадає на один CSS-піксель.

правити

Загальний опис

На звичайному екрані це 1. На Retina і більшості сучасних мобільних — 2 або 3.

Для тексту й CSS це не має значення: браузер усе робить сам. А от <canvas> — має, і дуже. Полотно шириною 300 CSS-пікселів на Retina фізично має 600 — і якщо не врахувати цього, малюнок вийде розмитим.

Рецепт один і той самий: фізичний розмір полотна множимо на devicePixelRatio, CSS-розмір лишаємо як був, а контекст масштабуємо.

правити

Порада

Розмитий графік чи діаграма на MacBook — майже завжди саме ця забута дрібниця.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
devicePixelRatio	1+	18+	3+	12.1+	12+	11+

Підтримка: мобільні переглядачі

Переглядач
devicePixelRatio	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<canvas id="chart" style="width:300px;height:150px"></canvas>

const canvas = document.getElementById('chart');
const ratio = window.devicePixelRatio || 1;

console.log(ratio); // 2 на Retina

// фізичних пікселів — більше
canvas.width = 300 * ratio;
canvas.height = 150 * ratio;

const ctx = canvas.getContext('2d');
// масштабуємо контекст — далі малюємо у звичних координатах
ctx.scale(ratio, ratio);

ctx.fillRect(10, 10, 100, 50); // чітко, без розмиття