Cho một simple page (nguồn dưới đây) có chứa một phần tử với một biên giới 1px, nó sẽ làm như thế này trên Android so với iOS:biên giới đúp chiều rộng trên các thiết bị Android với tỷ lệ CSS điểm ảnh là 1,5
http://f.cl.ly/items/0h2Y0v0u1v1L120m0X0s/Untitled-2.png
Như bạn có thể thấy, đường viền Android không có chiều rộng đồng nhất, đôi khi là 1px và đôi khi rộng 2px. Theo như tôi đã có thể kiểm tra nó, điều này chỉ xảy ra trên các thiết bị có tỷ lệ pixel CSS là 1,5 (bao gồm trình mô phỏng Android), nhưng không phải với tỷ lệ pixel là 2 (bao gồm iOS). Tôi tin rằng vấn đề này là do các vấn đề về antialias và/hoặc làm tròn subpixel, nhưng tôi thành thật không biết làm thế nào tôi sẽ sửa chữa nó.
<!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>
Tôi cũng phải đối mặt với vấn đề này trong trình duyệt Android. Có ý tưởng nào để giải quyết vấn đề này không? – Karthick