android浏览器中错误的边框宽度

Question

在具有高密度屏幕的 android设备上(devicePixelRatio为1.5),html元素的边框具有错误的边框宽度.

这里有两个框:jsbin示例,在桌面上正确显示

但是在Android上 - 无论是在chrome还是在堆栈浏览器中 - 它们都是这样的:

现在我明白为什么他们看起来像这样,但我找不到任何CSS解决方案 - 只有js.

js解决方案是将元素的宽度和高度更改为奇数以及顶部/左侧属性.

Answer 1

没有标准的解决方案，太糟糕了。
您可以使用以下技巧来避免 1px 宽度的边框显示不一致。

• 使边框颜色稍微透明，即 alpha <= 0.5。例如border-color: rgba(169, 0, 52, 0.5)，我在 Android 4.4.2 Chrome 和 Yabrowser 浏览器上对此进行了测试。工作正常！;

• 使边框元素的宽度/高度为奇数，并移动元素位置。这里你需要试验和使用JS，比如：

  $('div.elemWithBadBorders').each(function(){
      var $el = $(this);
      var width = $el.width();
      if(width % 2 == 0){
          $el.css('width', (width+1)+'px');
      }
  });
  

• 如果边框显示在 Retina 显示屏或其他员工屏幕上，请禁用边框。您需要在 css 中使用媒体查询，如下所示：

   @media (-webkit-min-device-pixel-ratio: 1.5) {
      div.elemWithBadBorders {
          border: none;
      }
   }
  

  其中1.5是像素密度。在 Retina 显示屏上，它显示为2