Недавно я добавил масштабирование DPI в проект, чтобы гарантировать, что элементы пользовательского интерфейса в проекте (нарисованные с помощью canvas) имеют одинаковый размер для всех устройств. Поначалу это работало, но через день после добавления кода я неожиданно получил массивные элементы пользовательского интерфейса на своем ноутбуке 4k. Мое мобильное устройство с высоким DPI и обычный настольный монитор с отображением нужного размера. Меня удивляет то, что ночью я реализовал window.devicePixelRatio, значение, которое выводилось, было «1». Но сегодня значение равно «2,5», и я не изменил никаких настроек.
На машине установлена ОС Windows, масштаб по умолчанию установлен на% 250, и с тех пор, как я приобрел ноутбук, если я установил его на% 100, вывод DPI вернется к «1». Это не очень полезно, потому что все крошечные, включая элемент пользовательского интерфейса. Все это также относится к изменению масштаба страницы.
Проблема в конечном итоге, кажется, заключается в том, что шкалы применяются дважды, поэтому вместо желаемого скаляра n я получаю n ^ 2. Я подозреваю, что проблема лежит ниже уровня браузера, потому что все браузеры на этом компьютере (Chrome, Opera, Edge, IE) отображают одинаково над завышенными элементами пользовательского интерфейса.
Мне нужно выяснить, как вернуть мой компьютер в состояние, когда для параметра основного дисплея установлено значение% 250, но window.devicePixelRatio возвращает значение «1». Я также очень хотел бы знать, почему это изменилось в первую очередь, чтобы я мог избежать этого в будущем.