html - Android 浏览器中错误的边框宽度

Question

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

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

但是在 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