Границы двойной ширины на устройствах Android с соотношением пикселей CSS 1,5

Учитывая простую страницу (источник ниже), которая содержит элемент с рамкой 1px, она будет выглядеть так на Android по сравнению с iOS:

http://f.cl.ly/items/0h2Y0v0u1v1L120m0X0s/Untitled-2.png

Как видите, граница Android не имеет одинаковой ширины, иногда она равна 1px, а иногда - 2px. Насколько я смог протестировать, это происходит только на устройствах с соотношением пикселей CSS 1,5 (включая эмулятор Android), но не с отношением пикселей 2 (включая iOS). Я полагаю, что эта проблема вызвана субпиксельным сглаживанием и / или проблемами округления, но я, честно говоря, понятия не имею, как бы я решил это исправить.

<!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>
Источник

1 ответ

Для устройств с низким DPI я нашел следующий обходной путь:

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

для устройств с точно низким dpi следует использовать медиазапрос для исключений. Например @media (максимальное разрешение: 190 точек на дюйм) или другое условие

Это выглядит немного отличающимся от границы 1px, но так близко и не прослушивается со случайной шириной

Источник
Другие вопросы по тегам