सीएसएस मोबाइल: बॉक्स-छाया सही ढंग से काम नहीं करता

Question

जब मैंने क्रोम मोबाइल 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 उपसर्ग का उपयोग करने की कोशिश की है लेकिन कुछ भी नहीं बदला गया है। px के बजाय वैकल्पिक इकाई em का उपयोग करके कोई भी 0.5px जैसे कुछ भी आंशिक मान लाता है।

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

इसका समाधान कैसे कर और मोबाइल ब्राउज़रों पर ठीक से प्रदर्शित करने के लिए box-shadow संपत्ति जाने के लिए:

viewport मेटा टैग के लिए पर्याप्त नहीं है?

Answer 1

क्या आप किसी भी प्रकार का सीएसएस रीसेट का उपयोग कर रहे हैं? इससे आपकी मदद हो सकती है।

आप media queries कुछ इस तरह का उपयोग कर की कोशिश की है: (http://www.mydevice.io/)

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