Why does a CSS border look different on Android?

Question

I have a box with a border.

border: 1px solid #000;

I am using the following viewport setup:

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

The border seems to be 2 pixels on the top and right side. What is the reason for this?

Additional: there are no other CSS rules other than a width and height.

Are you sure this is the viewports fault? try removing the viewport to see if it sticks around. Inspect the element to make sure it isn't inheriting any CSS rules — Andy, Nov 16 '12 at 11:11
It has to do with the device's pixel ratio. Try using an em value and it should clean up a bit. — Kyle, Nov 16 '12 at 11:14
When I remove the viewport line the border continues to be problematic but it varies as I zoom in and out. — diolemo, Nov 16 '12 at 11:14
@KyleSevenoaks what is the relationship between em and px here? 0.1em seems to look like 1px on both android and desktop firefox. Is this always the case? — diolemo, Nov 16 '12 at 11:17
Looks like an issue with sub pixel accuracy. Are you using the built in browser or an alternative? — Mario, Nov 16 '12 at 11:25
@diolemo: it is always the case. It is not sub-pixel rendering but the physical size of the pixels on each device. Using EM forces the browser on each device to measure it better. You should look up some articles on developing for mobile, there are much better explanations there :) — Kyle, Nov 16 '12 at 11:38
@KyleSevenoaks The em value seemed to help but it didn't remain fixed when I restored the scale 1 viewport. I found that `target-densitydpi=device-dpi` on the viewport would fix the behaviour. — diolemo, Nov 16 '12 at 12:00
@diolemo may be its getting boxshadow from some where please try by setting box-shadow:none; — Varun Malhotra, Mar 14 '18 at 08:22

score 13 · Answer 1 · edited Mar 19 '18 at 14:20

13

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

edited Mar 19 '18 at 14:20

GreyRoofPigeon

17,833
4
36
59

answered Mar 14 '18 at 06:38

Arunbal

346
3
16

Thanks! This will only work for 2dpr+ devices, is that right? Is there a general solution that works for all devices? Also is there a way to display the dpr on a HTML page (maybe with JS? so that I can debug this problem?) – Basj Mar 14 '18 at 08:02
i think below links usefull to you https://stackoverflow.com/questions/5063489/how-can-you-get-the-css-pixel-device-pixel-ratio – Arunbal Mar 15 '18 at 03:48
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio – Arunbal Mar 15 '18 at 03:55
Could you modify your answer to make it working for all devices, regardless the DPI? Would be super useful! – Basj Mar 19 '18 at 19:12
On my device where there is a border problem @Arunbal, I have `window.devicePixelRatio = 1.5`. What solution would you use when it's `1.5`? – Basj Mar 21 '18 at 18:29
i think u can use like below @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { div { border-width: 0.6px; } – Arunbal Mar 22 '18 at 03:45

score 0 · Answer 2 · edited Jan 31 '19 at 22:02

0

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;
  }
}

edited Jan 31 '19 at 22:02

Neuron

5,141
5
38
59

answered Mar 19 '18 at 17:37

Chris J. Zähller

123
11

1

User-scalable=no or yes doesn't change anything to the border question IIRC. – Basj Mar 19 '18 at 19:10
Correct; just trying to save the OPs users from potentially bad practices. – Chris J. Zähller Mar 21 '18 at 17:45

score 0 · Answer 3 · answered Mar 20 '18 at 10:58

"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>

Why does a CSS border look different on Android?

3 Answers3

Linked