为什么Android边框上的CSS边框看起来有所不同？
[英]Why does a CSS border look different on Android?
问题描述
I have a box with a border. 
我有一个带边框的盒子。
border: 1px solid #000;
I am using the following viewport setup: 我正在使用以下视口设置：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
The border seems to be 2 pixels on the top and right side. 边框似乎是顶部和右侧的2个像素。 What is the reason for this? 这是什么原因？
Additional: there are no other CSS rules other than a width and height. 附加：除了宽度和高度之外，没有其他CSS规则。
3 个解决方案
解决方案1
13 2018-03-14 06:38:19
The meta tag that targeted pixel-density specifically has been depreciated and now both Android and iPhone seem to be just using the one metatag: 专门针对像素密度的元标记已被折旧，现在Android和iPhone似乎只使用了一个元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
But, if you try to make a 1px border, it will be thicker and thinner on different sides depending on the mobile device's pixel density. 但是，如果您尝试制作1px边框，则根据移动设备的像素密度，它会在不同侧面变得更厚更薄。
How some devices render '1px' with multiple pixels and it is not always pretty because they are using different pixel ratios (dpr) such as 1.5, 2 and 3. Sometimes, all 4 sides of a 1px border will not match. 一些设备如何使用多个像素渲染“1px”并且它并不总是很漂亮，因为它们使用不同的像素比率（dpr），例如1.5,2和3.有时，1px边框的所有4个边都不匹配。
This is some CSS to make 1px display properly on 2dpr iPhone by dividing 1px by half: 这是一些CSS，通过将1px除以一半，在2dpr iPhone上正确显示1px：
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
div {
border-width: 0.5px;
}
And similar techniques are shown here: http://n12v.com/css-retina-and-physical-pixels/ https://developer.android.com/guide/webapps/targeting.html 此处显示了类似的技术： http ： //n12v.com/css-retina-and-physical-pixels/ https://developer.android.com/guide/webapps/targeting.html
解决方案2
0 2018-03-19 17:37:35
Unless you have a very good reason for it (doubtful), disabling user-zoom is a very bad idea. 除非你有充分的理由（可疑），禁用用户缩放是一个非常糟糕的主意。 See user-scalable=no … Evil or Slightly Not Evil? 请参阅user-scalable = no ... Evil或Slightly Not Evil？ for examples of why this is bad. 举例说明为什么这是坏事。 It also gives some examples where user-scalable=no is perfectly acceptable. 它还给出了一些user-scalable=no完全可以接受的示例。
for a 1.5 pixel-ratio, try 对于1.5像素比，请尝试
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
div {
border-width: 0.75px;
}
}
解决方案3
0 2018-03-20 10:58:01
"Could you modify your answer to make it working for all devices, regardless the DPI? Would be super useful! – Basj" “你可以修改你的答案，让它适用于所有设备，不管DPI吗？会非常有用！ - Basj”
i dont know how much this helpfull here i added a custom function to get border size on almost all dpr 我不知道这有多大帮助我在这里添加了一个自定义函数来获得几乎所有dpr的边框大小
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pixel Ratio</title>
<style>
.bord {
width: 300px;
height: 300px;
border: 10px solid #000;
}
</style>
</head>
<body>
<div class="bord"> </div>
<script>
dprof("bord");
function dprof(elmclass){
var z =document.getElementsByClassName(elmclass).length;
var dpr = window.devicePixelRatio;
for(i=0;i<z;i++){
document.getElementsByClassName(elmclass).item(i).classList.add("dpr-"+dpr);
var bw =getComputedStyle(document.getElementsByClassName(elmclass).item(i),null).getPropertyValue('border-width');
var nw =bw.replace("px","");
var nbw=nw/dpr;
console.log(nbw);
if(nbw!=0){
document.getElementsByClassName(elmclass).item(i).style.borderWidth=nbw+"px";
}
}
}
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.