为什么在安卓设备上CSS边框看起来不同？

Question

为什么在安卓设备上CSS边框看起来不同？

14

我有一个带边框的盒子。

border: 1px solid #000;

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

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

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

补充说明：除了宽度和高度之外，没有其他CSS规则。

- diolemo

你确定这是视口的问题吗？尝试移除视口，看看问题是否还存在。检查该元素，确保它没有继承任何CSS规则。 - Andy

盒子上还有哪些CSS规则适用？ - Anirudh Ramanathan

这与设备的像素比有关。尝试使用 em 值，它应该会变得更清晰一些。 - Kyle

@KyleSevenoaks 这里 em 和 px 之间的关系是什么？0.1em 在安卓和桌面版 Firefox 上看起来都像是 1px。这种情况总是发生吗？ - diolemo

似乎是子像素精度的问题。您是使用内置浏览器还是其他浏览器？ - Mario

显示剩余6条评论

3个回答

0

除非你有非常充分的理由（可疑的），禁用用户缩放是一个非常糟糕的想法。请参见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;
  }
}

- Chris J. Zähller

1

用户可缩放性为否或是对边框问题没有影响，如果我没记错的话。 - Basj

正确；只是试图为OP的用户节省可能存在的不良实践。 - Chris J. Zähller

0

你能修改一下你的答案，让它在所有设备上都能工作，无论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>

- Arunbal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arunbal · Accepted Answer

以像素密度为目标的meta标签已经被弃用，现在安卓和iPhone似乎只是使用了一个meta标签：

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

但是，如果您尝试制作1像素边框，它将在不同的侧面上变得更粗或更细，这取决于移动设备的像素密度。

某些设备使用不同的像素比率（dpr），如1.5、2和3，用多个像素呈现“1px”并不总是美观的。有时，一个1像素边框的四条边都不匹配。

这是一些CSS代码，可以通过将1px除以2来使1像素在2dpr iPhone上正确显示：

@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