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

Posted 2023-02-22

【中文标题】Android浏览器中的错误边框宽度

【英文标题】：wrong borders' width in android browser

【发布时间】：2013-12-01 18:39:57

【问题描述】：

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

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

但在 android 上 - 在 chrome 和堆栈浏览器中 - 它们看起来像这样：

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

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

【问题讨论】：

setUseWideViewPort - 也不起作用

使用 0.1em 而不是 1px 或许可行

不，这也不起作用。

您的预期结果是什么？

将所有边框设为 1px

【参考方案1】：

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

使边框颜色略微透明，即 alpha 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

【参考方案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 显示器，因此如果您想要更有针对性的内容，请更改它。

希望这会有所帮助！

【讨论】：

当然，但是用 1px 显示边框的 css 是什么。问题不是使用媒体查询，而是获得一些在 1.5 设备上显示 1px 边框的 CSS

【参考方案3】：

答案在width=device-width 字符串附近。删除它，我认为一切都会好起来的。

理论上：

例如，您使用三星 Galaxy S 或 S2，视口为 480 像素到 800 像素（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 到 3px 的高度为 1.5px 的线可以绘制成 2px 高度（或 1px 高度）

【讨论】：

@memical：我写了删除字符串。我知道是在jsbin源码中

没有设备宽度，页面的宽度为 980px。用户需要放大才能查看内容。

【参考方案4】：

使用<meta name="viewport" content="initial-scale=1.0,width=device-width"> 而不是<meta name="viewport" content="width=device-width">

【讨论】：

抱歉，我没有高密度安卓手机