I’m developing a web app using React and Tailwind CSS. I’ve noticed that the appearance of the app changes when viewed on different screens, particularly due to different scaling settings on operating system. For example, some laptops use a recommended scaling of 125%.
Scaling setting in Windows.

I saw there were suggestions to using rem, not px but I am using Tailwind and Tailwind makes the sizing with rem by default. And I’ve also tried adjusting the viewport settings in the App.jsx with the following code:

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);
  };
}, []);

This approach didn’t solve the problem. Actually nothing changed… Since the app will be distributed to many users, some of them may have their computers set to 125% scaling, I need a solution to ensure a consistent appearance regardless of the scaling setting.
How can I make sure that my app will be same with different scaling settings?