📊 实时测量数据
视口布局宽度 (layout viewport / CSS像素宽度):
{{ viewportWidth }}px
屏幕物理宽度: {{ screenWidth }}px | 设备像素比 dpr: {{ devicePixelRatio }}
视口缩放系数(布局宽度与物理宽度关系): 1 CSS 像素 ≈ {{ pixelToPhysicalRatio }} 物理像素
视口缩放系数(布局宽度与物理宽度关系): 1 CSS 像素 ≈ {{ pixelToPhysicalRatio }} 物理像素
🎨 视觉效果对比
⚠️ 固定宽度元素 (500px)
如果视口宽度小于500px，会出现横向滚动条
如果视口宽度小于500px，会出现横向滚动条
✅ 百分比宽度元素 (100%)
始终适应父容器宽度
始终适应父容器宽度
📝 文字大小测试
这是16px大小的文字，用于测试缩放效果。
这是20px大小的文字
💡 提示：当 initial-scale 不为 1 时，文字会整体缩放，可能影响可读性
🔲 响应式网格
项目 {{ i }}
💡 测试建议
🔍 测试方法：
1. 打开 Chrome DevTools (F12) → 点击手机图标
2. 选择不同设备（iPhone、Pixel 等）
3. 点击右上角「打开配置」按钮调整viewport
4. 观察Canvas黑白线条是否清晰锐利：线条模糊/锯齿严重 → 像素未对齐
5. 尤其测试无viewport时(移除meta)浏览器默认980px布局，线条数量显示980，观察显示是否模糊。
1. 打开 Chrome DevTools (F12) → 点击手机图标
2. 选择不同设备（iPhone、Pixel 等）
3. 点击右上角「打开配置」按钮调整viewport
4. 观察Canvas黑白线条是否清晰锐利：线条模糊/锯齿严重 → 像素未对齐
5. 尤其测试无viewport时(移除meta)浏览器默认980px布局，线条数量显示980，观察显示是否模糊。
📐 像素级对齐检测 | 黑白相间细线 (1px 实线)
🎨 线条数量:
{{ lineCount }}
条 (每根线宽1px)
📐 canvas.width (实际像素):
{{ canvasWidthActual }}
px
🖥️ canvas.style.width (CSS宽度):
{{ canvasStyleWidth }}
px
⚖️ 比率 (物理/CSS):
{{ scaleRatio }}
💡 检测原理: canvas 的实际像素宽度(canvas.width)根据CSS渲染尺寸自动设定(浏览器默认行为)。
绘制线条数量 = canvas.width (每个逻辑像素内绘制一条1px实线)。如果线条出现模糊、重影或宽度不均匀，说明当前viewport缩放导致CSS像素未与物理像素对齐(非整数倍缩放)。
默认无viewport时布局宽度980px → canvas实际宽度通常为980px，缩放至手机物理屏幕若不对齐即模糊。
绘制线条数量 = canvas.width (每个逻辑像素内绘制一条1px实线)。如果线条出现模糊、重影或宽度不均匀，说明当前viewport缩放导致CSS像素未与物理像素对齐(非整数倍缩放)。
默认无viewport时布局宽度980px → canvas实际宽度通常为980px，缩放至手机物理屏幕若不对齐即模糊。