请说明移动端 Web 开发中常见的 1px 问题是什么，并给出至少两种解决方案，简述各自原理和适用场景。

回答思路

1. 【回答框架 1】1px 问题的根源在于设备像素密度。在 DPR 为 2 或更高的设备上，CSS 的 1px 对应多个物理像素，视觉上线条显得比设计稿更粗。
2. 【回答框架 2】常见解决方案包括使用 0.5px 边框，利用 media query 根据 DPR 调整边框宽度；使用 transform: scaleY(0.5) 对边框进行缩放；使用 viewport 缩放，配合 rem 或 vw 实现精确的 1 物理像素边框。
3. 【回答框架 3】另可使用 box-shadow 模拟边框，shadow 的模糊半径和扩散半径可以控制为 1 物理像素；也可使用 background-image 或 SVG 边框，利用线性渐变或 SVG 的精确控制来绘制边框。
4. 【回答框架 4】各方案适用场景不同：0.5px 边框简单但兼容性受限；transform 缩放适用广泛但需注意边框定位；viewport 缩放需整体适配，适合移动端重构；box-shadow 和 SVG 适合复杂边框场景，但实现相对繁琐。
5. 【关键点 1】1px 问题由 DPR 大于 1 导致，CSS 1px 大于物理 1px。
6. 【关键点 2】transform: scaleY(0.5) 是兼容性较好的常用方案。
7. 【关键点 3】viewport 缩放方案将布局视口设置为物理像素宽，但需要配合 rem 或 vw 进行整体适配。
8. 【易错点 1】使用 transform 缩放时需注意边框在缩放后可能出现模糊或位移，应配合定位调整。
9. 【易错点 2】0.5px 方案在部分 Android 设备上可能无法显示，需降级处理。
10. 【易错点 3】viewport 缩放方案改变布局视口，可能影响页面整体布局，需谨慎使用。