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.

该viewportmeta标签,似乎还不够:

<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 */
}