Как отрисовать разделитель толщиной ровно в 1 физический пиксель?

Как отрисовать разделитель толщиной ровно в 1 физический пиксель?

• графика, рендеринг, frontend
• 1 физический пиксель — это не то же самое, что 1 CSS-пиксель на ретина-дисплеях
• для масштабирования следует учитывать devicePixelRatio
• при работе с canvas нужно учитывать pixel ratio
• в CSS можно задать border-width: 0.5px для HiDPI, если браузер это поддерживает
• в SVG масштаб линий настраивается с учётом viewBox и transform
• задача — исключить размытие и получить чёткий тонкий разделитель на экране любого типа

Подробный ответ

Основной ответ

Чтобы разделитель имел толщину ровно 1 физический пиксель на устройствах с разным DPI (плотностью пикселей), необходимо учитывать соответствие между логическими и физическими пикселями. Это особенно важно при создании UI: линия должна оставаться тонкой и резкой независимо от плотности и масштаба экрана.

Ключевые моменты

• CSS с учётом devicePixelRatio: при значении devicePixelRatio = 2, характерном для retina-дисплея, стандартная линия 1px занимает 2 физических пикселя. Поэтому для получения толщины в 1 физический пиксель следует указать 0.5px. В зависимости от ситуации может потребоваться transform либо отрисовка через Canvas.
• Canvas и devicePixelRatio: при рисовании разделителя на Canvas размер холста необходимо определить с учётом window.devicePixelRatio, а затем масштабировать контекст. Благодаря этому линия будет занимать ровно один физический пиксель.
• Border и transform scale: в UI-фреймворках для нужной толщины иногда используют CSS-приём с transform: scaleY(0.5) для элемента 1px.
• Кросс-платформенные нюансы: Android и iOS применяют собственные единицы — dp и pt, которые автоматически учитывают плотность дисплея. В Android толщину линии можно задать через 1dp, а в iOS использовать UIScreen.main.scale, чтобы вычислить фактическую толщину в пикселях.

Практический контекст

В веб-разработке на high-DPI устройствах в современных браузерах, например Chrome 70+, обычно подходит приём с border-width: 0.5px. В iOS (Swift) при рисовании средствами Core Graphics линия учитывает UIScreen.main.scale; например, lineWidth = 1 / scale. В Android применяется 1dp, который на дисплеях с mdpi должен соответствовать одному физическому пикселю.

Итак, необходимо учитывать плотность пикселей устройства (devicePixelRatio или scale) и правильно масштабировать толщину линии. Только так разделитель будет стабильно соответствовать одному физическому пикселю.