Найти devicePixelRatio в соответствии с уровнем масштабирования страницы и настройками Windows 10 DPI

Question

Мне нужно расширить canvas до полного экрана, когда я перехожу в полноэкранный режим в моей игре.Я использую screen.width и screen.height, чтобы определить размер экрана.Проблема заключается в том, что если настройки масштаба экрана в Windows 10 установлены не на 100%, screen.width меньше фактического размера экрана.Например, если в настройках Windows это масштаб 150%, то screen.width составляет 1280, но в пространстве страницы оно все равно 1920 px.

Я могу использовать window.devicePixelRatio, что в данном случае возвращает 1,5., для корректировки размера.Но масштабирование страницы также влияет на значение devicePixelRatio.

Итак, если страница увеличена до 67%, а масштабирование экрана Windows составляет 150%, devicePixelRatio вернет 1,0, но screen.width вернет 1280. НоМне нужен способ узнать, что размер экрана составляет 1920.

Настройки масштаба Windows 10, о которых я говорю:

Answer 1

После разговора с разработчиком Chromium, связанным с функцией dpi, кажется, что лучшее, что вы можете сделать, это:

canvas.width = Math.round(window.screen.width * window.devicePixelRatio / (window.outerWidth / window.innerWidth) / 80) * 80
canvas.height = Math.round(window.screen.height * window.devicePixelRatio / (window.outerWidth / window.innerWidth) / 60) * 60

Это работает в Chrome и Firefox.Вы можете задаться вопросом, что там делают 60 и 80 числа.Оказывается, что 60 - это общее кратное всех обычных разрешений по высоте, а 80 имеет одинаковую роль для ширины.Таким образом, мы можем использовать эти значения для исправления странных десятичных знаков, возникающих во время этих операций.

Затем, если холст находится в полноэкранном режиме, вы также можете сделать:

canvas.style.width = window.innerWidth;
canvas.style.height = window.innerHeight;

Что бы работать "почти" идеально,В моем случае я заметил, что для некоторых значений масштабирования значения canvas.style могут быть на один пиксель слишком короткими или слишком длинными.В связи с этим я рекомендую иметь body.style.overflow = 'hidden' при использовании полноэкранного режима и соответствующего цвета фона.