android - 当 devicePixelRatio = 1.5 时,Webview 中的 CSS 1px 边框在某些方面给出 2px 边框

标签 android html css android-webview border

我正在使用标准设置在带有 WebView(=应用程序中的嵌入式浏览器)的 Android 应用程序中加载页面:

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

除以下小问题外,一切正常:

问题:1像素宽的边框显示不正确:边框的四个边中有一个或两个是2px而不是1px。看起来是这样的:

enter image description here

  • 我注意到我的设备上有 window.devicePixelRatio = 1.5

  • 这是 HTML 代码(我没有使用代码 fragment ,因为它们无论如何都无法在移动设备上运行):

    <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>
    
  • this question 中给出的解决方案(我在那里悬赏,所以我已经测试了答案)不起作用:border: 0.5px solid black;border: 0.75px solid black; 显示完全没有边框,所以这不是重复的。这是devicePixelRatio = 1.5 时的特定问题(它的行为不同于12)

  • Live demo here我无法在 Android 版 Chrome 中重现问题,但只能在使用 WebView 并显示相同页面的 Android 应用程序中重现(奇怪,不是 WebView 使用与 Chrome 相同的渲染引擎?)

最佳答案

我只是有一个类似的问题并且已经解决了,我不知道这个解决方案是否对您有帮助:

它通过给 div 留出边距来帮助

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

关于android - 当 devicePixelRatio = 1.5 时,Webview 中的 CSS 1px 边框在某些方面给出 2px 边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49415733/

相关文章:

java - Android - 将数据从 fragment 传递到新的java类

安卓。 Facebook SDK 好友列表

jquery 灯箱事件未触发

javascript - 检测 HTML 输入表的更改输入值

css - Sprite 回退

java - W/System.err : java.net.ConnectException:连接超时

java - 使用支持库时以编程方式覆盖操作栏

jquery - 我想使用 custome css 更改我的 wordpress 网站的大型菜单中 Font Awesome 图标的大小

javascript - 在另一个模板中使用 HTML5 CSS3 Bootstrap 模板的特定部分

html - 无法隐藏与 z-index 的链接