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＆amp; 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
  

Answer 2

看起来您想要根据像素比率应用媒体查询。尝试以下纯CSS解决方案：

@media only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (-webkit-min-device-pixel-ratio: 1.5), 
       only screen and (min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 1.5dppx),
       only screen and (min-resolution: 240dpi) {
          /* High density screen fixes go here */
       }

第一行不是拼写错误（我知道，它是weird）。如上所述，上面的查询也会将相关规则应用于更高密度的Retina显示，因此如果您想要更具针对性的内容，请更改它。

希望这有帮助！

Answer 3

答案是width=device-width字符串附近。删除它，我想一​​切都会好的。

理论上：

例如，您使用Samsung Galaxy S或S2，视口为480px到800px（css像素），devicePixelRatio为1.5。但设备宽度为480 / 1.5 = 320（高度800 / 1.5 = 533）。

那么你对三星Galaxy S的浏览器说“在css像素行中画出1px”，然后启用width=device-width字符串 - 你说它“在设备像素中画出1px”。带有width=device-width字符串设备像素的等于1.5px css像素。然后你绘制1.5px高度（例如）行浏览器使用抗锯齿而不是整数值然后从非整数坐标开始。这意味着高度为1.5px的线从1.5px到3px的垂直线可以绘制成2px高度（或1px高度）

Answer 4

使用<meta name="viewport" content="initial-scale=1.0,width=device-width">代替<meta name="viewport" content="width=device-width">