Question

我目前正在尝试让一个网站在台式机和移动浏览器上显示一些具有适当字体大小的纯文本。尝试同时选择两种字体的大小，会导致台式机上的文本太大，而移动设备上的文本则由于显示方式不同而过小。

我尝试使用媒体查询来根据屏幕宽度更改字体大小。

@media screen and (max-width: 900px) {
  body {
    font-size: 2em;
  }
}

这是“有效的”方法，但需要注意的是，如果宽度达到或小于900像素，则调整桌面上浏览器窗口的大小将导致更改字体大小。我从不希望字体大小能够动态响应浏览器大小。无论是否调整窗口大小，它都应始终保持相同大小。由于这一要求，我不会将vh和vw视为解决方案。

在寻找解决方案时，我偶然发现在媒体查询中使用dpi作为替代方案。由于我认为绝大多数移动设备的dpi都比大多数台式机显示器的dpi高，因此这可能是更改移动设备上字体大小的好方法。

@media screen and (min-resolution: 150dpi) {
  body {
    font-size: 2em;
  }
}

但是，如果有一台显示器超过此dpi怎么办？该功能适用于我正在测试的3种设备，但我不确定在更多情况下是否可以使用。

总体而言，我的目标是获得类似Wikipedia的设置。 https://en.wikipedia.org/wiki/Dots_per_inch调整浏览器大小时，字体大小不会改变，它在移动和桌面浏览器上始终以可读的大小显示，并且我认为它在高dpi显示器上也能很好地工作，但是我没有测试方式。

那么获得我想要的功能的合适方法是什么？

Answer 1

在写了这个问题之后但在发布之前，我一直在寻找解决方案，然后找到了。它实际上非常简单，但是很容易遗漏。希望以后发布对大家有帮助。一切都归结为html开头的这一行。

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