反应规模错误
React scale bug
您好，
几天前我创建了新的 React App，但遇到了问题。
虽然尺寸相同 (1920x1080)，但所有元素都比设计上的大。那是因为我的默认系统比例是 125%。当我将其更改为 100% 时，它工作正常。但我希望我的应用程序能够在所有用户设备上正常显示（即使它们的系统默认比例为 125%）。
在我的 index.html 中有这一行：
<meta name="viewport" content="width=device-width, initial-scale=1" />
你知道它有什么问题吗？
当您更改比例时，它会更新系统的逻辑分辨率。将它从 100% 设置为 125% 会减少媒体查询的屏幕宽度。
尝试使用 CSS 媒体查询处理 ot。
正如 Codesigner 所提到的，通过网络浏览器更改比例会更改 window 的宽度和高度（即 window.innerWidth 和 window.innerHeight）。然后浏览器将网页呈现到 window 上并缩放它以匹配视口的尺寸。
从您网站的角度来看，这相当于浏览器 window 大小的变化，这意味着您应该使用 CSS 媒体查询来处理它。
但请记住，使用浏览器缩放功能的用户很可能有这样做的理由（例如视力不好），这意味着您不应该在用户实际使用时缩小您的网站想扩大规模。
此外，无法检测用户是否使用缩放功能或实际使用具有不同物理屏幕分辨率的设备。您可能会破坏网站的响应能力。
您好，
几天前我创建了新的 React App，但遇到了问题。
虽然尺寸相同 (1920x1080)，但所有元素都比设计上的大。那是因为我的默认系统比例是 125%。当我将其更改为 100% 时，它工作正常。但我希望我的应用程序能够在所有用户设备上正常显示（即使它们的系统默认比例为 125%）。
在我的 index.html 中有这一行：
<meta name="viewport" content="width=device-width, initial-scale=1" />
你知道它有什么问题吗？
当您更改比例时，它会更新系统的逻辑分辨率。将它从 100% 设置为 125% 会减少媒体查询的屏幕宽度。 尝试使用 CSS 媒体查询处理 ot。
正如 Codesigner 所提到的，通过网络浏览器更改比例会更改 window 的宽度和高度（即 window.innerWidth 和 window.innerHeight）。然后浏览器将网页呈现到 window 上并缩放它以匹配视口的尺寸。
从您网站的角度来看，这相当于浏览器 window 大小的变化，这意味着您应该使用 CSS 媒体查询来处理它。 但请记住，使用浏览器缩放功能的用户很可能有这样做的理由（例如视力不好），这意味着您不应该在用户实际使用时缩小您的网站想扩大规模。
此外，无法检测用户是否使用缩放功能或实际使用具有不同物理屏幕分辨率的设备。您可能会破坏网站的响应能力。