HTML页面毫米转px/rem/em跨设备适配求助：实现对应尺寸矩形

要实现跨设备的毫米到像素准确转换，核心是获取设备的实际DPI（每英寸像素数），因为1英寸=25.4毫米，通过这个物理换算关系就能得到精准的像素值。以下是具体实现方案：

核心思路 #

1. 通过创建一个CSS宽度为1in的隐藏元素，获取其实际像素宽度，以此得到设备的DPI（1英寸对应的像素数）。
2. 利用公式 像素值 = 毫米值 × (DPI / 25.4) 完成单位转换。
3. 监听输入框变化，实时计算并更新矩形尺寸。

完整代码实现 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>毫米转矩形</title>
    <style>
        .dpi-detector {
            width: 1in;
            height: 1px;
            position: absolute;
            left: -100%;
            top: 0;
            visibility: hidden;
        }
        .rectangle {
            margin-top: 20px;
            border: 2px solid #333;
            background-color: #f0f0f0;
        }
        .input-group {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="input-group">
        <label>宽度（毫米）：</label>
        <input type="number" id="widthInput" min="1" value="50">
    </div>
    <div class="input-group">
        <label>高度（毫米）：</label>
        <input type="number" id="heightInput" min="1" value="30">
    </div>
    <div class="rectangle" id="rect"></div>
    <div class="dpi-detector" id="dpiDetector"></div>

    <script>
        // 获取设备DPI
        const dpiDetector = document.getElementById('dpiDetector');
        const dpi = dpiDetector.offsetWidth;

        // 监听输入框变化，更新矩形尺寸
        function updateRectangle() {
            const widthMm = parseFloat(document.getElementById('widthInput').value) || 0;
            const heightMm = parseFloat(document.getElementById('heightInput').value) || 0;
            
            // 毫米转像素计算
            const widthPx = widthMm * (dpi / 25.4);
            const heightPx = heightMm * (dpi / 25.4);
            
            const rect = document.getElementById('rect');
            rect.style.width = `${widthPx}px`;
            rect.style.height = `${heightPx}px`;
        }

        // 初始化及绑定事件
        document.getElementById('widthInput').addEventListener('input', updateRectangle);
        document.getElementById('heightInput').addEventListener('input', updateRectangle);
        updateRectangle();
    </script>
</body>
</html>

关键说明 #

• DPI获取逻辑：CSS中的1in单位对应物理世界的1英寸，因此隐藏元素的offsetWidth就是设备的实际横向DPI（大部分设备横竖DPI一致，若需更精准可分别检测纵向）。
• 兼容性：该方法支持所有现代浏览器，无需额外依赖，能适配不同显示器、笔记本、移动设备。
• 输入校验：代码中加入了默认值和非数字过滤，避免无效输入导致的尺寸异常。
• 你之前尝试的window.innerHtml/outerHTML是错误的API，正确的视口尺寸API是window.innerWidth，但这类API仅能获取像素尺寸，无法直接关联物理毫米，因此无法解决跨设备转换问题。

内容的提问来源于stack exchange，提问作者Hector Mauvecin