CSS mobile: box-shadow работает неправильно

Question

Когда я открыл свой сайт в chrome mobile v48, я обнаружил, что свойство box-shadow: 1px ведет себя странно: ширина тени плавает из стороны в сторону и ain ' t то же самое. Я предполагаю, что это из-за дробного отношения пикселя устройства 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 */ 
}