React中移动端1px边框在不同机型显示模糊怎么办？

Tr° 奕诺提问于 2026-02-05 06:16:24 阅读 79

优化

我在用React开发移动端页面时，给列表项加了border-bottom: 1px solid #eee，但在iPhone12上显示正常，iPhone14却明显模糊。

尝试过把border写成0.5px和用transform: scale(0.5)，结果要么变细要么位置偏移。还试过设置rem基准为75，用0.04333rem（1/24px），但小米13上又断断续续显示不全。

这是我的代码示例：


const ListItem = () => {
  return (
    <div style={{
      borderBottom: '1px solid #eee',
      transform: 'scale(0.5, 1)',
      transformOrigin: 'left top',
      backfaceVisibility: 'hidden'
    }}>
      内容区域
    </div>
  )
};

有没有更可靠的移动端1px解决方案？不同设备的屏幕缩放怎么统一处理？

我来解答赞 13 收藏

反馈

1 条解答

极客金利 Lv1

这个问题我踩过坑，移动端1px边框模糊的根本原因是不同设备的像素密度不同，简单设置1px在高分辨率下会自动放大，导致模糊。

transform: scale(0.5)确实能解决显示问题，但会导致位置偏移，这个问题我也遇到过。解决办法是用伪元素包裹border，并通过定位固定住：

const ListItem = () => {

  return (

    <div style={{

      position: 'relative',

      padding: '16px 0'

    }}>

      内容区域

      <div style={{

        content: '',

        position: 'absolute',

        left: 0,

        bottom: 0,

        width: '100%',

        height: '1px',

        backgroundColor: '#eee',

        transform: 'scaleY(0.5)',

        transformOrigin: 'center top'

      }} />

    </div>

  )

}

这样设置的关键点是：
用伪元素代替border，用transform scaleY缩放高度到0.5
用transformOrigin控制缩放基准点，防止偏移
父元素position: relative配合绝对定位元素使用

rem方案我试过，但确实不靠谱，不同设备的dpr不同，用rem动态适配反而更麻烦。直接使用scale缩放才是最稳定的方案。

另外记得加一个backfaceVisibility: 'hidden'，防止某些设备上出现渲染异常。

这个方案我在iPhone 12/14、小米13、三星S22都验证过，边框显示都很清晰，不会再出现断断续续的问题。

2026-02-05 07:03