की एक सीएसएस पिक्सेल अनुपात एक simple page (नीचे स्रोत) यह देखते हुए कि 1px का बॉर्डर के साथ एक तत्व होता है के साथ Android उपकरणों पर दोगुने-चौड़े बॉर्डर, यह आईओएस की तुलना में एंड्रॉयड पर इस तरह प्रस्तुत करना होगा:1.5
http://f.cl.ly/items/0h2Y0v0u1v1L120m0X0s/Untitled-2.png
जैसा कि आप देख सकते हैं, एंड्रॉइड सीमा की एक समान चौड़ाई नहीं है, कभी-कभी 1px होती है और कभी-कभी 2px चौड़ी होती है। जहां तक मैं इसका परीक्षण करने में सक्षम हूं, यह केवल 1.5 के सीएसएस पिक्सेल अनुपात (एंड्रॉइड एमुलेटर सहित) वाले डिवाइसों पर होता है, लेकिन 2 के पिक्सेल अनुपात (आईओएस सहित) के साथ नहीं। मेरा मानना है कि यह समस्या उप-पिक्सेल-एंटीअलियास और/या राउंडिंग मुद्दों के कारण होती है, लेकिन मुझे ईमानदारी से पता नहीं है कि मैं इसे ठीक करने के बारे में कैसे जाऊंगा। वास्तव में कम डीपीआई उपकरणों अपवाद के लिए मीडिया क्वेरी का उपयोग करना चाहिए के लिए
.wrapper {
background-color: red;
padding: 1px;
display: inline-block;
}
.inner_text {
padding: 5px;
background-color: #fff;
display: inline-block;
}<div class="wrapper">
<span class="inner_text">Showing perfect one-sized border on low DPI devices</span>
</div>:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
div {
width: 100px;
text-align: center;
margin-left: 50%;
border: 1px solid magenta;
}
</style>
</head>
<body>
<div>Foobar</div>
</body>
</html>
मैं भी एंड्रॉयड ब्राउज़र में इस मुद्दे का सामना करना पड़ रहा के साथ bugged नहीं लग रहा है। क्या इस मुद्दे को हल करने का कोई विचार है? – Karthick