如何让Cordova/Ionic web元素尺寸适配Android系统字体大小

为什么rem没有生效 #

rem的计算基准是根元素<html>的font-size值，你的场景下rem失效通常是两个原因：

• 项目全局样式里固定了根元素的font-size为px单位常量（很多Ionic项目默认会写html { font-size: 16px }），系统字体大小调整时，根font-size没有同步变化，rem计算出的固定高度自然不会适配
• Cordova Android默认可能关闭了系统字体缩放同步，你可以检查config.xml里是否缺少配置<preference name="AndroidEnableSystemFontScale" value="true" />，没有这个配置的话WebView不会把系统字体大小的变化同步到CSS字体属性中

解决方案（满足所有卡片高度统一+自适应系统字体大小的需求） #

1. 先修复rem适配基础
   • 移除全局样式中根元素的固定font-size配置，让根字体大小跟随系统默认值变化
   • 在Cordova的config.xml中添加上述AndroidEnableSystemFontScale配置，开启系统字体缩放同步
2. 替换固定高度为弹性布局方案
   不要给.card-inner设置固定height，改用以下方案实现统一高度：
   • 给卡片列表的外层容器添加grid布局配置：

   .card-list-container {
     display: grid;
     grid-auto-rows: 1fr;
     gap: 0.5rem; /* 可根据需要调整卡片间距 */
   }
   

   grid-auto-rows: 1fr会自动让所有卡片的高度和当前列表中最高的卡片保持一致，内容少的卡片不会变矮，内容多的卡片（系统字体放大时）会自动撑开高度，所有卡片始终保持统一高度
   • 给.card-inner添加min-height: 5.75rem，保证默认字体大小下的基础高度和你之前的效果一致
3. 可选优化：如果希望文本始终最多显示1行不溢出，可以给.card-text补充相对单位行高配置：

   .card-text {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     line-height: 1.5; /* 相对单位，会跟随字体大小自动调整行高 */
   }
   

内容的提问来源于stack exchange，提问作者peterc