CSS Handy: Box-Schatten funktioniert nicht richtig

Question

Wenn ich meine Website in Chrome Mobile V48 geöffnet habe, habe ich festgestellt, dass box-shadow: 1px Eigenschaft seltsam verhält: die Breite des Schattens schwebt von Seite zu Seite und ain ' t das gleiche. Ich nehme an, es wegen der fraktionierten Gerätepixelverhältnis 1.5:

Das nächste Codefragment gibt nicht immer zu mir 1px Schatten erforderlich, aber es schwimmt um 1-3px manchmal auf mobilen Browsern:

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

Ich habe versucht, -webkit Vorwahl zu verwenden, aber nichts wurde geändert. Unter Verwendung einer alternativen Einheit em anstelle von px bringt man nichts so gut wie Bruchwerte wie 0.5px.

Der viewport Meta-Tag scheint nicht genug:

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

Wie dieses Problem zu beheben und box-shadow Eigenschaft läßt auf mobilen Browsern korrekt angezeigt werden?

Answer 1

Verwenden Sie irgendeine Art von CSS-Reset? Das könnte dir helfen.

Haben Sie versucht, media queries verwenden, etwa so:

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