Обеспечение единообразного внешнего вида веб-приложения React при различных настройках масштабирования Windows. ⇐ CSS

[Anonymous]

Я разрабатываю веб-приложение с использованием React и Tailwind CSS. Я заметил, что внешний вид приложения меняется при просмотре на разных экранах, особенно из-за разных настроек масштабирования в операционной системе. Например, на некоторых ноутбуках рекомендованное масштабирование составляет 125%.
Настройка масштабирования в Windows.
Я видел предложения использовать rem, а не px, но я использую Tailwind и Tailwind по умолчанию определяет размер с помощью rem. Я также попробовал настроить параметры области просмотра в App.jsx с помощью следующего кода:

Код: Выделить всё

useEffect(() => {
const adjustViewport = () => {
const viewport = document.querySelector("meta[name=viewport]");
if (viewport) {
const scale =
window.devicePixelRatio > 1.25 ? 1 / window.devicePixelRatio : 1;
viewport.setAttribute(
"content",
`width=device-width, initial-scale=${scale}`,
);
}
};

adjustViewport();

window.addEventListener("resize", adjustViewport);

return () => {
window.removeEventListener("resize", adjustViewport);
};
}, []);

Этот подход не решил проблему. На самом деле ничего не изменилось... Поскольку приложение будет распространяться среди многих пользователей, на компьютерах некоторых из них может быть настроено масштабирование на 125 %, мне нужно решение, обеспечивающее единообразный внешний вид независимо от настроек масштабирования.
Как это можно сделать? Я уверен, что мое приложение будет таким же с разными настройками масштабирования?

Подробнее здесь: https://stackoverflow.com/questions/787 ... dows-scali