在不同像素比例的 Android 和 iOS 设备的 Web 视图中获得统一字体大小的正确 CSS 方法?

The correct CSS method of getting uniform font sizes in the web views of Android and iOS devices of varying pixel ratios?

我的任务是构建一个简单的 HTML 模板,该模板具有关联的 CSS 样式,该样式显示在应用程序 运行 的嵌入式 Web 视图中 Android和 iOS。我在高 DPI 设备上遇到字体大小调整的大问题:我还没有找到一种方法让字体在所有设备上缩放到 合理地 一致的最终渲染大小。我在这里的目标不是完全统一的大小,只是文本在任何一个上都不会是微观的或巨大的。

我主要是一名后端人员,偶尔会涉足前端工作,但我以前从未需要处理如此广泛的移动视口阵列。我已经尝试了很多基于谷歌搜索的解决方案(remvw/vh、媒体查询等),但其中 none 工作正常——文本大小因人而异微观到大规模,几乎没有韵律或原因。我确定我在尝试过程中使用了正确的成分,但我一直无法正确组合它们。

我的需求,简而言之:无论是 Android WebView 还是 iOS WKWebView,无论设备上的像素比是多少,我都希望文本显示在这样一来,它在所有设备上 大致 最终渲染大小相同。

这个问题应该已经解决了吧?谁能告诉我正确的 CSS 咒语是什么?

不幸的是,似乎没有办法主动将我的问题标记为“无效”或“多余”,因为这不是答案。

问题原来是我的 HTML 中没有 <meta name="viewport" content="width=device-width" /> header。一旦我添加了它并删除了它之前的所有像素 ratio-specific 媒体查询黑客,HTML 在我们测试过的每台设备上看起来都很合理。