时间戳

首页 > 解决方案 > 如何根据设备字体大小增加离子应用程序的字体大小

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

问题描述

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

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

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

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

有没有办法根据用户设备的字体大小在离子中增加应用程序的字体大小？

标签： androidcssionic-frameworksassfonts

解决方案

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），您可以看到它正在添加一个-webkit-text-size-adjust到 body 元素：

document.body.style.webkitTextSizeAdjust = value;

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

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

推荐阅读