为什么 CSS 边框在 Android 上看起来不一样？答案

【问题标题】：Why does a CSS border look different on Android?为什么 CSS 边框在 Android 上看起来不一样？
【发布时间】：2012-11-16 11:10:15
【问题描述】：

我有一个带边框的盒子。

border: 1px solid #000;

我正在使用以下视口设置：

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

边框在顶部和右侧似乎是 2 个像素。这是什么原因？

附加：除了宽度和高度之外没有其他 CSS 规则。

【问题讨论】：

您确定这是视口故障吗？尝试移除视口以查看它是否存在。检查元素以确保它没有继承任何 CSS 规则
还有哪些 css 规则适用于盒子？
这与设备的像素比率有关。尝试使用 em 值，它应该会清理一下。
当我移除视口线时，边框仍然存在问题，但随着我放大和缩小，它会有所不同。
@KyleSevenoaks 这里的 em 和 px 是什么关系？ 0.1em 在 android 和桌面 Firefox 上看起来都像 1px。总是这样吗？

标签： android html css mobile

【解决方案1】：

专门针对像素密度的元标记已被贬低，现在 Android 和 iPhone 似乎都只使用一个元标记：

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

但是，如果你尝试制作一个 1px 的边框，根据移动设备的像素密度，它的不同边会越来越粗。

某些设备如何使用多个像素呈现“1px”，但并不总是很漂亮，因为它们使用不同的像素比率 (dpr)，例如 1.5、2 和 3。有时，1px 边框的所有 4 个边都不匹配。

这是一些通过将 1px 除以一半来使 1px 在 2dpr iPhone 上正确显示的 CSS：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

div {

border-width: 0.5px;

}

这里展示了类似的技术： http://n12v.com/css-retina-and-physical-pixels/ https://developer.android.com/guide/webapps/targeting.html

【讨论】：

谢谢！这仅适用于 2dpr+ 设备，对吗？是否有适用于所有设备的通用解决方案？还有一种方法可以在 HTML 页面上显示 dpr（也许用 JS？这样我就可以调试这个问题？）
我认为下面的链接对你有用stackoverflow.com/questions/5063489/…
developer.mozilla.org/en-US/docs/Web/API/Window/…
您能否修改您的答案以使其适用于所有设备，无论 DPI 是什么？会超级有用的！
在我的设备上存在边界问题@Arunbal，我有window.devicePixelRatio = 1.5。如果是1.5，你会使用什么解决方案？

【解决方案2】：

“您能否修改您的答案以使其适用于所有设备，无论 DPI 是多少？会非常有用！- Basj”

我不知道这有多大帮助在这里我添加了一个自定义函数来获取几乎所有 dpr 的边框大小

 <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Pixel Ratio</title>
    <style>
    .bord {
        width: 300px;
        height: 300px;
        border: 10px solid #000;
    }
    </style>
    </head>

    <body>
    <div class="bord"> </div>
    <script>

    dprof("bord"); 
    function dprof(elmclass){
        var z =document.getElementsByClassName(elmclass).length;
        var dpr = window.devicePixelRatio;
        for(i=0;i<z;i++){
            document.getElementsByClassName(elmclass).item(i).classList.add("dpr-"+dpr);
            var bw =getComputedStyle(document.getElementsByClassName(elmclass).item(i),null).getPropertyValue('border-width');   
            var nw =bw.replace("px","");


            var nbw=nw/dpr;
            console.log(nbw);
            if(nbw!=0){
                document.getElementsByClassName(elmclass).item(i).style.borderWidth=nbw+"px";
            }

        }



    }

    </script>
    </body>
    </html>

【讨论】：

【解决方案3】：

除非您有充分的理由（值得怀疑），否则禁用用户缩放是一个非常的坏主意。请参阅 user-scalable=no … Evil or Slightly Not Evil? 了解为什么这很糟糕的示例。它还给出了一些user-scalable=no 完全可以接受的例子。

对于 1.5 像素比率，请尝试

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  div {
    border-width: 0.75px;
  }
}

【讨论】：

User-scalable=no 或 yes 不会改变边界问题 IIRC。
正确；只是试图将 OP 用户从潜在的不良做法中拯救出来。