【问题标题】:React scale bug反应规模错误
【发布时间】:2020-10-18 19:12:48
【问题描述】:

您好,

我几天前创建了新的 React 应用程序,但遇到了问题。

尽管尺寸相同 (1920x1080),但所有元素都比设计上的要大。那是因为我的默认系统比例是 125%。当我将其更改为 100% 时,它运行良好。但我希望我的应用能够很好地显示在我的所有用户设备上(即使他们的系统默认比例为 125%)。

在我的 index.html 中有这一行:

<meta name="viewport" content="width=device-width, initial-scale=1" />

你知道它有什么问题吗?

【问题讨论】:

    标签: html reactjs web scale display


    【解决方案1】:

    正如 Codesigner 所述,通过 Web 浏览器更改比例会更改窗口的宽度和高度(即 window.innerWidthwindow.innerHeight)。然后浏览器将网页渲染到窗口上并对其进行缩放以匹配视口的尺寸。

    从您网站的角度来看,这相当于改变了浏览器窗口的大小,这意味着您应该使用 CSS 媒体查询来处理它。 但请记住,使用浏览器缩放功能的用户可能有这样做的理由(例如视力不好),这意味着当用户真正想要缩放时,您不应该缩小您的网站起来吧。

    此外,无法检测用户是否使用缩放功能或实际使用具有不同物理屏幕分辨率的设备。您可能会破坏网站的响应能力。

    【讨论】:

      【解决方案2】:

      当您更改比例时,它会更新系统的逻辑分辨率。将其从 100% 设置为 125% 会减少媒体查询的屏幕宽度。 尝试使用 CSS 媒体查询来处理 ot。

      【讨论】:

      • 好的,谢谢。我想,有办法使用 html . 中的一些标签来处理它
      猜你喜欢
      • 1970-01-01
      • 2018-12-19
      • 2018-10-05
      • 1970-01-01
      • 1970-01-01
      • 2019-11-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多