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

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>

Nguồn

2013-08-09 fresskoma

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

Đối với thiết bị DPI thấp tôi thấy cách giải quyết tiếp theo:

.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>

cho chính xác thiết bị dpi thấp nên sử dụng truy vấn phương tiện truyền thông cho trường hợp ngoại lệ. Ví dụ @media (tối đa độ phân giải: 190dpi) hoặc một điều kiện

Có vẻ hơi khác so với 1px biên giới nhưng rất gần và không nghe trộm với chiều rộng ngẫu nhiên

Nguồn

2015-08-18 09:26:30 DrZumbel

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

Trả lời

Các vấn đề liên quan