CSS 移动设备：box-shadow 无法正常工作

Question

当我在 chrome 移动版 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>

我试过使用 -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 */
}

CSS mobile: box-shadow doesn't work correctly