wrong borders' width in android browser

Question

On android devices with high density screens (devicePixelRatio of 1.5) the borders of html elements have wrong border width.

The two boxes here: jsbin sample, appear correctly on the desktop

but on the android - both in chrome and the stack browser - they look like this:

now i understand why they look like this, but i cannot find any CSS solution - only js.

the js solution would be to change the width and height of the elements to be odd as well as the top/left properties.

Answer 1

There is no standard solution, too bad.
You can make the next tricks to avoid an inconsistent displaying of borders with 1px width.

• make colour of borders slightly transparent, i.e. with alpha <= 0.5. For example border-color: rgba(169, 0, 52, 0.5) I tested this on Android 4.4.2 Chrome & Yabrowser browsers. Works fine!;

• make width/height of bordered element odd, and shift element position. Here you need to experiment and use JS, saying like:

  $('div.elemWithBadBorders').each(function(){
      var $el = $(this);
      var width = $el.width();
      if(width % 2 == 0){
          $el.css('width', (width+1)+'px');
      }
  });
  

• Disable borders if showed on Retina displays or other hires screens. You need to use media query in css like this:

   @media (-webkit-min-device-pixel-ratio: 1.5) {
      div.elemWithBadBorders {
          border: none;
      }
   }
  

  where 1.5 is pixel density. On Retina displays it appears as 2
  

Answer 2

It looks like you want to apply a media query based on pixel ratio. Try the following pure CSS solution:

@media only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (-webkit-min-device-pixel-ratio: 1.5), 
       only screen and (min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 1.5dppx),
       only screen and (min-resolution: 240dpi) {
          /* High density screen fixes go here */
       }

The first line is not a typo (I know, it's weird). As written, the query above will also apply the associated rules to higher-density Retina displays, so change it if you want something more targeted.

Hope this helps!

Answer 3

The answer is near width=device-width string. Remove it and I think all will be alright.

In theory:

For example, you use Samsung Galaxy S or S2 with viewport 480px to 800px (css pixels) and devicePixelRatio of 1.5. But device-width is 480/1.5 = 320 (height 800/1.5 = 533).

So then you say to browser of Samsung Galaxy S "Draw me 1px in css pixels line", then width=device-width string is enabled - you say to it "Draw me 1px in device pixels". And with width=device-width string device pixel is equal 1.5px css pixels. And then you draw 1.5px height(for example) lines browser use anti-aliasing for not integer values then the started from not integer coords. It means line with height 1.5px from 1.5px to 3px by vertical can be drawn like 2px height (or 1px height)

Answer 4

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