Неправильная ширина границ в браузере android

В устройствах Android с экранами с высокой плотностью (devicePixelRatio 1.5) границы элементов html имеют неправильную ширину границы.

Здесь два поля: jsbin sample, отображаются на рабочем столе правильно

но на андроиде - как в хроме, так и в браузере стека - они выглядят так:

теперь я понимаю, почему они выглядят так, но я не могу найти какое-либо решение CSS - только js.

решение js должно было бы изменить ширину и высоту элементов как нечетные, а также свойства top/left.

Ответ 1

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

сделать цвет границ немного прозрачным, то есть с альфа = 0,5. Например, border-color: rgba(169, 0, 52, 0.5) я тестировал это на браузерах Android 4.4.2 Chrome и Yabrowser. Прекрасно работает!;
сделать ширину/высоту граничного элемента нечетным и положение элемента сдвига. Здесь вам нужно поэкспериментировать и использовать JS, например:
```
$('div.elemWithBadBorders').each(function(){
    var $el = $(this);
    var width = $el.width();
    if(width % 2 == 0){
        $el.css('width', (width+1)+'px');
    }
});
```

Отключить границы, если они отображаются на дисплеях Retina или других экранах найма. Вы должны использовать медиа-запрос в css следующим образом:
```
 @media (-webkit-min-device-pixel-ratio: 1.5) {
    div.elemWithBadBorders {
        border: none;
    }
 }
```
где 1.5 - плотность пикселей. На дисплеях Retina оно отображается как 2

Ответ 2

Похоже, вы хотите применить медиа-запрос на основе соотношения пикселей. Попробуйте следующее чистое решение для CSS:

@media only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (-webkit-min-device-pixel-ratio: 1.5), 
       only screen and (min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 1.5dppx),
       only screen and (min-resolution: 240dpi) {
          /* High density screen fixes go here */
       }

Первая строка не является опечаткой (я знаю, это weird). Как написано, в приведенном выше вопросе также будут применены соответствующие правила для дисплеев Retina с более высокой плотностью, поэтому измените их, если вы хотите что-то более целенаправленное.

Надеюсь, это поможет!

Ответ 3

Ответ находится рядом с строкой width=device-width. Удалите его, и я думаю, все будет хорошо.

Теоретически:

Например, вы используете Samsung Galaxy S или S2 с разрешением 480 пикселей на 800 пикселей (пиксели css) и devicePixelRatio 1,5. Но ширина устройства составляет 480/1,5 = 320 (высота 800/1,5 = 533).

Итак, тогда вы скажете браузеру Samsung Galaxy S "Нарисуйте мне 1px в строке css пикселей", тогда строка width=device-width включена - вы говорите ей "Нарисуйте 1px в пикселях устройства". И с width=device-width строкой пиксель устройства равен 1.5px css пикселей. И тогда вы рисуете 1.5px height (например), браузер использует антиалиасинг для не целочисленных значений, а затем запускается из не целочисленных координат. Это означает, что линия с высотой 1.5px от 1.5px до 3px по вертикали может быть нарисована как высота 2px (или высота 1px)

Ответ 4

Используйте <meta name="viewport" content="initial-scale=1.0,width=device-width"> вместо <meta name="viewport" content="width=device-width">