На устройствах Android с экранами высокой плотности (devicePixelRatio 1,5) границы html-элементов имеют неправильную ширину.
Два поля здесь: пример jsbin, правильно отображаются на рабочем столе.
а вот на андроиде - и в хроме и в браузере стека - они выглядят так:
теперь я понимаю, почему они так выглядят, но я не могу найти никакого решения CSS - только js.
решение js состояло бы в том, чтобы изменить ширину и высоту элементов на нечетные, а также свойства top/left.
Стандартного решения нет, очень жаль.
Вы можете использовать следующие приемы, чтобы избежать несогласованного отображения границ шириной 1 пиксель.
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
Похоже, вы хотите применить медиа-запрос на основе соотношения пикселей. Попробуйте следующее чистое решение 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 */
}
Первая строка не опечатка (я знаю, это странно). Как написано, приведенный выше запрос также будет применять связанные правила к дисплеям Retina с более высокой плотностью, поэтому измените его, если вы хотите что-то более целенаправленное.
Надеюсь это поможет!
Ответ находится рядом с width=device-width строкой. Удалите его, и я думаю, все будет в порядке.
Теоретически:
Например, вы используете Samsung Galaxy S или S2 с областью просмотра от 480 до 800 пикселей (пиксели css) и параметром devicePixelRatio, равным 1,5. Но ширина устройства 480/1,5 = 320 (высота 800/1,5 = 533).
Затем вы говорите браузеру Samsung Galaxy S «Нарисуй мне 1 пиксель в строке пикселей CSS», затем включается строка width=device-width - ты говоришь ему «Нарисуй мне 1 пиксель в пикселях устройства». И с width=device-width строкой пиксель устройства равен 1,5 пикселям css. И затем вы рисуете строки высотой 1,5 пикселя (например), браузер использует сглаживание для нецелочисленных значений, а затем начинается с нецелочисленных координат. Это означает, что линия высотой 1,5 пикселя от 1,5 пикселя до 3 пикселей по вертикали может быть нарисована как высота 2 пикселя (или высота 1 пиксель).
Используйте <meta name="viewport" content="initial-scale=1.0,width=device-width"> вместо <meta name="viewport" content="width=device-width">
