如何根据设备字体大小增加离子应用程序的字体大小答案

【问题标题】：how to increase font size of ionic app according the device font size如何根据设备字体大小增加离子应用程序的字体大小
【发布时间】：2021-03-25 02:25:14
【问题描述】：

我正在开发 Ionic 4 应用程序，我在应用程序中定义了 font-size 或 14px，但有一个名为“font-size”的 android 原生设置，用户可以在其中将手机上的文本大小放大或更小。

人们可以选择“大”甚至“巨大”的文字大小，不幸的是，这会影响手机上应用的文字大小并破坏布局。

例如：如果设备字体大小，按钮上的文本会超出定义的框很大。

我知道有一个可用的accessibility plugin 可以帮助我保持应用程序的 font-size 大小不变，但我不希望这样。

有没有办法根据用户设备在ionic中的字体大小来增加app的字体大小？

【问题讨论】：

是否有任何选项可以将大小设置为 14sp，就像在 android 的 xml 中一样？
不，我们在 ionic 应用中使用 CSS/SCSS，所以没有像 sp 这样的选项，我们可以使用 em、px、rem 等。

标签： android css ionic-framework sass fonts

【解决方案1】：

！警告！

我可能只是在黑暗的房间里瞄准鸟眼，答案可能非常错误。

你可以试试这个绅士的回答

你可以找到插件here:

platform.ready().then(() => {
    [...]
    if(window.MobileAccessibility){
       window.MobileAccessibility.usePreferredTextZoom(false);
    }
    [...]
});

原文来源：IonicFramwork Forms

原回答者：hersonls

【讨论】：

我知道...这可以帮助我防止应用程序的字体大小增加，但我不想要这个...我想以适当的方式增加字体大小。跨度>

【解决方案2】：

Capacitor v3有一个@capacitor/text-zoom插件，我发现只需要在iOS上使用即可。在 Android 上，设置应用中调整后的文本大小会自动应用于我的 ionic 应用。

所以在 iOS 上，我调用 getPreferred() 从设置中获取调整后的文本大小。如果不是 === 1，我会调用 set() 来应用缩放。

import { TextZoom } from '@capacitor/text-zoom';
setTextZoom(value: number): void {
   void TextZoom.set({ value });
}

如果你查看插件的源代码（https://github.com/ionic-team/capacitor-plugins/blob/main/text-zoom/src/ios.ts），你可以看到它在 body 元素中添加了一个-webkit-text-size-adjust：

document.body.style.webkitTextSizeAdjust = value;

这仅在移动浏览器上受支持（不会对桌面产生任何影响）它控制文本膨胀算法如何应用于 Web 控件上的文本元素。

这可能很难调试。我所做的是在 iOS 模拟器（从 XCode 启动）中的 Mac 笔记本电脑上运行 ionic 应用程序，然后使用 Safari Technical Preview 应用程序附加调试器。在开发菜单下，您可以找到 iOS 模拟器并连接到您正在运行的应用程序。然后您可以查看应用程序中的 DOM 并查看应用于 body 元素的 -webkit-text-size-adjust 设置。然后您可以在开发工具中更改它以查看对应用程序的影响。

【讨论】：