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



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

我主要是一个后端人员,偶尔会涉足前端工作,但我以前从未处理过如此广泛的移动视口。我已经尝试了很多基于谷歌搜索的解决方案(remvw/vh、媒体查询等(,但都没有成功——文本大小从微小到巨大不等,几乎没有韵律或理由。我确信我在尝试过程中使用了正确的成分,但我无法正确地将它们组合在一起。

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

这必须是一个解决的问题,对吧?有人能告诉我什么是正确的CSS咒语吗?

不幸的是,似乎没有办法自愿将我的问题标记为"无效";或";"冗余";,因为这不是一个答案。

问题是我的HTML中没有<meta name="viewport" content="width=device-width" />标头。一旦我添加了这一点,并删除了之前所有针对像素比例的媒体查询技巧,HTML在我们测试的每一台设备上都显得合理。

最新更新