发表新帖
发表新帖

Why does a CSS border look different on Android?

后端 未结
关注
3 1356
我在风中等你
我在风中等你 2021-01-01 21:00

I have a box with a border.

border: 1px solid #000;

I am using the following viewport setup:
相关标签:
3条回答
  • 既然无缘
    2021-01-01 21:09

    The meta tag that targeted pixel-density specifically has been depreciated and now both Android and iPhone seem to be just using the one metatag:

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

    But, if you try to make a 1px border, it will be thicker and thinner on different sides depending on the mobile device's pixel density.

    How some devices render '1px' with multiple pixels and it is not always pretty because they are using different pixel ratios (dpr) such as 1.5, 2 and 3. Sometimes, all 4 sides of a 1px border will not match.

    This is some CSS to make 1px display properly on 2dpr iPhone by dividing 1px by half:

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

div {

border-width: 0.5px;

}

    And similar techniques are shown here: http://n12v.com/css-retina-and-physical-pixels/ https://developer.android.com/guide/webapps/targeting.html

    0 讨论(0)
  • 北海茫月
    2021-01-01 21:12

    Unless you have a very good reason for it (doubtful), disabling user-zoom is a very bad idea. See user-scalable=no … Evil or Slightly Not Evil? for examples of why this is bad. It also gives some examples where user-scalable=no is perfectly acceptable.

    for a 1.5 pixel-ratio, try

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  div {
    border-width: 0.75px;
  }
}
    0 讨论(0)
  • 余生分开走
    2021-01-01 21:31

    "Could you modify your answer to make it working for all devices, regardless the DPI? Would be super useful! – Basj"

    i dont know how much this helpfull here i added a custom function to get border size on almost all 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>
    0 讨论(0)
 看不清?
提交回复
热议问题