Question

我有一个带边框的盒子。

border: 1px solid #000;

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

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

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

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

Answer 1

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

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

但是，如果您尝试制作1px边框，根据移动设备的像素密度，它会在不同的边上变得更厚更薄。

某些设备如何渲染具有多个像素的'1px'并且它并不总是很漂亮，因为它们使用不同的像素比率（dpr），例如1.5,2和3.有时，1px边框的所有4个边都不匹配。

这是一些CSS，可以通过将1px分成一半来在2dpr iPhone上正确显示1px：

@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

Answer 2

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

Answer 3

“你可以修改你的答案，让它适用于所有设备，不管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>

为什么Android边框上的CSS边框看起来有所不同？

3 个答案: