CSS 移动 : box-shadow doesn't work correctly

Question

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

下一个代码片段并不总是给我所需的 1px 阴影，但它有时在移动浏览器上 float 在 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(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 
    /* CSS stuff here */
}