WebView中1px边框在devicePixelRatio=1.5时部分边显示为2px

嘿，这个问题我太熟了！本质是高DPI设备下CSS像素与物理像素的转换冲突——你的设备像素比是1.5，1px的CSS单位会被转换成1.5个物理像素，但屏幕没法显示“半个像素”，浏览器会自动做取整处理，结果某些边就被向上取整成2px物理像素，看起来就粗了一圈。

下面给你几个实测有效的解决办法：

方法1：用CSS Transform缩放模拟1px边框（最推荐） #

这是目前适配各种DPI设备最靠谱的方案，通过伪元素先画一个2倍大小的边框，再缩放到原尺寸，让边框的物理像素精确匹配屏幕：

/* 给需要1px边框的元素加这个类 */
.border-1px {
  position: relative;
  /* 如果元素有背景色，记得添加，避免伪元素透色 */
  background-color: #fff;
}

.border-1px::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #000; /* 这里的1px对应2倍尺寸的边框 */
  border-radius: inherit; /* 继承原元素圆角，保持样式一致 */
  transform: scale(0.5);
  transform-origin: 0 0; /* 从左上角缩放，避免偏移 */
  pointer-events: none; /* 不干扰原元素的点击交互 */
  box-sizing: border-box;
}

原理很简单：先创建一个比原元素大2倍的伪元素，边框设为1px，然后缩放到0.5倍，最终边框在屏幕上就是1物理像素，完美适配1.5、2.0等各种DPI设备。

方法2：针对特定DPI用媒体查询调整 #

如果只需要适配DPI=1.5的设备，可以直接通过媒体查询给边框设置小数像素：

/* 默认样式 */
.your-element {
  border: 1px solid #000;
}

/* 匹配DPI≥1.5的设备 */
@media screen and (-webkit-min-device-pixel-ratio: 1.5), 
       screen and (min-device-pixel-ratio: 1.5) {
  .your-element {
    border: 0.7px solid #000;
  }
}

这个方法更直接，不过要注意不同浏览器对小数像素的支持略有差异，但在Android WebView里基本没问题。

方法3：调整WebView的Viewport设置 #

可以在HTML的meta标签里优化viewport配置，让WebView的渲染更贴合设备DPI：

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

如果你的WebView版本比较旧，还可以试试已废弃但仍有效的target-densitydpi属性（不推荐长期使用）：

<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=device-dpi">

额外小技巧：关闭WebView硬件加速（极端情况） #

如果上面的方法都没效果，可能是硬件加速导致的渲染异常，可以试试关闭WebView的硬件加速：

mywebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

不过这个会影响WebView的性能，建议只在必要时使用。

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