Вопрос:
Это странно. Я тестирую одно и то же веб-приложение (Chrome, встроенное в Electron), и у меня есть две точные копии на двух компьютерах: Windows 10, один с дисплеем 1080p, а другой с дисплеем 4K (это должно быть неуместно, я думаю, это EDIT: теперь я начинаю думать, что это проблема).
Однако, когда я запускаю приложение на обоих сайтах, я вижу разницу, которую я не могу объяснить, и я не знаю, как исправить, кроме того, что не использовал параметр границы.
Проблема заключается в том, что с помощью border: 1px solid #000 в круге или квадрате, на одном компьютере он вычисляет как 1px, а в другом – как 0.667px.
Почему это происходит?
EDIT: Я вижу, что это происходит с любой границей, которую я пытаюсь. И я вижу, что если я ставлю 2px, тогда он вычисляет как 2px, но что-то в 1px вычисляет как 0.667px в 4K-компьютере
EDIT2: То же самое с em, em из 0.2 вычисляет как 2px, а 0.1 вычисляет как 0.667px. С 0.132 и 0.133 em он перескакивает с 0,6667 до 1,333 px, невозможно получить 1px (!!)
Влево → линии не выровнены, так как квадраты с рамкой не добавляют 2px, а 0.667×2 (компьютер 1)
Вправо → линии выравниваются, так как граница вычисляется как 2px (компьютер 2)
Ниже вы можете увидеть информацию о консоли консоли Chrome
Лучший ответ:
Я изо всех сил пытаюсь найти какую-то определенную информацию об этом, но я довольно уверен в том, почему это происходит.
Экран 4K имеет такую высокую плотность пикселей, что Chromium масштабирует элементы на странице, чтобы они не выглядели крошечными на экране 4K. В этом случае он, по-видимому, использует коэффициент масштабирования 1,5. Это видно из ваших скриншотов: как текст, так и поля отображаются примерно на 1,5 раза больше на экране 4K.
Итак, почему граница 1px не масштабируется до 1.5px? Потому что это не будет выглядеть хрустящим. Похоже, что существует предположение, что при указании границы 1px то, что вы действительно хотите, является самой маленькой границей, поддерживаемой экраном, поэтому вы по-прежнему получаете 1px на экране 4K и, таким образом, он по-прежнему выглядит резким.
Хром-шкалы для высокого DPI прозрачно, так что в веб-инспекторе вы все еще видите исходные значения CSS. Поэтому, хотя font-size 10px теперь действительно отображается как 15px, он все равно показывает 10px в инспекторе. Чтобы показать вам, что граница не была увеличена, 1px делится на 1.5, давая 0.667px.
Такое поведение кажется мне разумным, но, как побочный эффект, это путает ваше позиционирование. Вот несколько возможных обходных решений:
- Добавьте границу 1px ко всем ячейкам, сделав границу тем же цветом, что и поле, где не требуется черная рамка. Это гарантирует, что все они выстроились в очередь.
- Используйте box-sizing: border-box чтобы указанная ширина и высота ящиков включали границу. Значение по умолчанию (content-box) добавляет границу за пределами указанного размера поля, поэтому у вас в настоящее время проблема выравнивания.
Ответ №1
Почему бы вам не использовать экран @media и не приспособиться к вашей необходимости?
@media screen and (min-width: 2160px) {border:
