Processing
 

wrong borders' width in android browser

18/11/2013 14:53#1

memical

Member

Joined at: 12 months ago

Post: 2

Thank: 0

Thanked: 0

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:

wrong borders width in android browser

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.

20/11/2013 23:46Top#2

Joined at: 11 months ago

Post: 2

Thank: 0

Thanked: 0

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!

26/11/2013 06:01Top#3

Pinal

Member

Joined at: 12 months ago

Post: 24

Thank: 0

Thanked: 0

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)

27/11/2013 12:22Top#4

Joined at: 8 months ago

Post: 1

Thank: 0

Thanked: 0

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

14/07/2016 15:39Top#5

Yan Pak

Member

Joined at: 8 months ago

Post: 1

Thank: 0

Thanked: 0

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

Similar articles

Chrome, THREE.js: Cross-origin image load denied

5 years ago - Reply: 5 - Views: 271

Prevent Google Chrome Log XMLHttpRequest

3 years ago - Reply: 5 - Views: 277

How can I include ChromeDriver in a JAR?

3 years ago - Reply: 3 - Views: 83

Chrome geolocation not working on any site

3 years ago - Reply: 1 - Views: 49

wrong borders' width in android browser

3 years ago - Reply: 4 - Views: 207

Uncaught SyntaxError: Unexpected token < On Chrome

3 years ago - Reply: 10 - Views: 472

Flashdata not getting cleared in Codeigniter

4 years ago - Reply: 5 - Views: 58

Illegal access Javascript error in Chrome

3 years ago - Reply: 1 - Views: 53

ng-repeat not updating in Chrome

3 years ago - Reply: 1 - Views: 82

Applying border to a checkbox in Chrome

4 years ago - Reply: 2 - Views: 119

open browser plugin using access vba

3 years ago - Reply: 1 - Views: 26

vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re