0

I'm loading a page in a Android app with a WebView (=embedded browser in app), with standard settings:

mywebView = (WebView) findViewById(R.id.activity_main_webview);
...
mywebView.loadUrl("http://example.com/test");

Everything works correctly except the following minor issue:

Problem: The 1-pixel-wide border is not displayed correctly: one or two of the four sides of the border are 2px instead of 1px. It looks like this:

enter image description here

  • I noticed that window.devicePixelRatio = 1.5 on my device

  • Here is the HTML code (I don't use a code snippet, because they are not runnable on mobile devices anyway):

    <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#test { display: inline-block; border: 1px solid #c4c4c4; padding: 9px; }
</style>
</head>
<body>
<a id="test">Test</a>
</body>
</html>

  • The solutions given in this question (I have put a bounty there, so I already tested the answers) don't work: border: 0.5px solid black; or border: 0.75px solid black; show no border at all, so this is not a duplicate. This is a specific question when devicePixelRatio = 1.5 (it behaves different than 1 or 2)

  • Live demo here, I cannot reproduce the problem in Chrome for Android, but only in a Android app using WebView and displaying the same page (strange, isn't WebView using the same rendering engine as Chrome?)

Basj
  • 41,386
  • 99
  • 383
  • 673

1 Answers1

1

I just have a similar problem and it is fixed, I do not if this solution will help you or not:

It helped by give a margin to the div

.brand .col-8 {
    padding-right:0;
    margin-right:-1px;
}
.brand .col-4 {
    border-left:1px solid #d8d8d8;
}
Jiang yongmin
  • 11
  • 1
  • 3