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.

Wendiewendin

setUseWideViewPort - did not work either – Wendiewendin

use 0.1em instead of 1px maybe it's work – Upstroke

nope, that does not work either. – Wendiewendin

What is your expected result? – Denny

to have all borders as 1px – Wendiewendin

memical, any solution? I'm facing the same issue. – Monagan

we went with borders of 2px :) – Wendiewendin

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
  

Tman

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!

Recitation

sure, but what is the css that would show the borders with 1px. the problem was not to use media queries, but to get some css that would show 1px border on 1.5 devices – Wendiewendin

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)

Mcgowen

@memical: I wrote remove string. I know that it is in jsbin source code – Mcgowen

without the device-width, the page gets a width of 980px. the user would need to zoom in to view the content. – Wendiewendin

Answer 4

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

Seleta

Sorry, I haven't got any high density android phone – Seleta