React移动端渲染1px正方形时的像素失真问题

问题根源 #

1. 设备像素比（DPR）差异：移动端设备普遍DPR>1，CSS中的1px对应多个物理像素，浏览器的亚像素渲染逻辑会让小尺寸div/span出现拉伸变形；而桌面端DPR通常为1，1个CSS像素直接对应1个物理像素，渲染更精准。
2. 无效属性：imageRendering: pixelated仅作用于图片、视频等媒体元素，对div/span这类块级元素完全无效。
3. viewport设置不严谨：默认的viewport允许用户缩放，会进一步破坏像素的1:1映射关系。

解决方案 #

方案1：基于DPR校准CSS像素渲染 #

通过设备像素比调整元素的尺寸与定位，确保每个元素对应1个物理像素：

1. 获取设备DPR：

const DPR = window.devicePixelRatio || 1;

2. 调整像素组件的样式：

<div
    style={{
        position: "absolute",
        // 用Math.round确保定位为整数CSS像素，避免亚像素插值
        top: `${Math.round(pixelPosition.y / DPR)}px`,
        left: `${Math.round(pixelPosition.x / DPR)}px`,
        // 1个物理像素对应 1/DPR CSS像素
        width: `${1 / DPR}px`,
        height: `${1 / DPR}px`,
        backgroundColor: selectedColor,
        boxSizing: "border-box",
        pointerEvents: "none",
        // 优化渲染精度，避免模糊拉伸
        shapeRendering: "crispEdges",
        // WebKit内核设备的额外优化
        imageRendering: "-webkit-optimize-contrast"
    }}
/>

3. 锁定viewport缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />

方案2：改用Canvas渲染（推荐） #

Canvas的渲染逻辑直接映射物理像素，是解决像素失真最可靠的方案，同时性能更优（尤其像素数量较多时）：

import { useRef, useEffect } from 'react';

const PixelCanvas = ({ pixelPosition, selectedColor }) => {
    const canvasRef = useRef(null);

    useEffect(() => {
        const canvas = canvasRef.current;
        const DPR = window.devicePixelRatio || 1;
        const containerRect = canvas.parentElement.getBoundingClientRect();
        
        // 设置Canvas物理像素尺寸
        canvas.width = containerRect.width * DPR;
        canvas.height = containerRect.height * DPR;
        // 设置Canvas的CSS显示尺寸
        canvas.style.width = `${containerRect.width}px`;
        canvas.style.height = `${containerRect.height}px`;
        
        const ctx = canvas.getContext('2d');
        ctx.scale(DPR, DPR); // 校准坐标系，确保绘制精准
        
        // 绘制单个像素
        ctx.fillStyle = selectedColor;
        ctx.fillRect(pixelPosition.x, pixelPosition.y, 1, 1);
    }, [pixelPosition, selectedColor]);

    return <canvas ref={canvasRef} style={{ position: 'relative' }} />;
};

export default PixelCanvas;

额外注意事项 #

• 避免使用transform: scale缩放像素元素，会触发浏览器模糊处理；
• 容器元素不要设置transform、filter等属性，这类属性会开启GPU加速，改变亚像素渲染逻辑；
• 若需渲染大量像素，Canvas方案的性能远优于多div/span方案。

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