在具有高密度屏幕(devicePixelRatio 为 1.5)的 android 设备上,html 元素的边框有错误的边框宽度。
这里的两个框:jsbin sample , 正确显示在桌面上
但是在 android 上——在 chrome 和堆栈浏览器中——它们看起来像这样:
现在我明白为什么它们看起来像这样了,但我找不到任何 CSS 解决方案 - 只有 js。
js 解决方案是将元素的宽度和高度以及顶部/左侧属性更改为奇数。
最佳答案
没有标准的解决方案,太糟糕了。
您可以使用下一个技巧来避免宽度为 1px 的边框显示不一致。
- 使边框的颜色稍微透明,即 alpha <= 0.5。例如
border-color: rgba(169, 0, 52, 0.5)
我在 Android 4.4.2 Chrome 和 Yabrowser 浏览器上测试了这个。工作正常!; 使边框元素的宽度/高度为奇数,并移动元素位置。这里需要自己试验和使用JS,比如:
$('div.elemWithBadBorders').each(function(){ var $el = $(this); var width = $el.width(); if(width % 2 == 0){ $el.css('width', (width+1)+'px'); } });
如果显示在 Retina 显示屏或其他雇用屏幕上,请禁用边框。您需要像这样在 css 中使用媒体查询:
@media (-webkit-min-device-pixel-ratio: 1.5) { div.elemWithBadBorders { border: none; } }
1.5
是像素密度。在 Retina 显示屏上显示为2
关于html - Android 浏览器中错误的边框宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20050743/