CSS mobile：box-shadow无法正常工作

Question

当我在chrome mobile v48中打开我的网站时，我发现box-shadow: 1px属性表现得很奇怪：阴影的宽度从一侧到另一侧浮动并且不一样。我假设它是因为分数设备像素比1.5：

下一个代码片段并不总是向我提供所需的1px阴影，但有时会在移动浏览器上浮动1-3px：

div {
   margin: 10px;
   height: 10px;
   padding: 20px;
   width: 40%;
   box-shadow: 0 0 1px #000;
}
...
<div></div>
<div></div>

JSFiddle

我尝试使用-webkit前缀，但没有任何更改。使用替代单位em代替px，只会带来像0.5px这样的小数值。

viewport元标记似乎还不够：

<meta name="viewport" content="width=device-width, initial-scale=1">

如何解决此问题并让box-shadow属性在移动浏览器上正确显示？

Answer 1

您使用的是什么类型的CSS重置？这可能会帮助你。

您是否尝试使用media queries，如下所示：

@media(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 
    /* CSS stuff here */
}