反应本机响应字体大小[重复]

Question

我正在用Expo和React Native开发平板电脑应用程序（Android和iOS）。

我设法使布局响应而又没有遇到任何问题。在不同大小的设备上运行该应用程序后，我注意到我忘记了字体大小的响应能力。

我尝试了我能找到的所有npm库（react native responsive fontsize、react national cross platform respondive dimensions）。对于其中任何一个，我遇到了相同的问题：在应用程序启动时，根据设备的方向，字体大小呈现不同的效果。（即，如果我在纵向模式下按住设备时打开应用程序，与在横向模式下打开应用程序时相比，字体大小明显更大，横向模式是我的应用程序的默认方向）。我试图在启动时将应用程序的屏幕方向锁定在横向，并在安装第一个组件后将其重置为默认值，但这也无济于事。

我得出的结论是，之所以会发生这种情况，是因为所有这些库都使用设备的维度来生成我传递给它们的内容的过程值，但只引用一个维度（宽度或高度），这根据初始设备方向不同而不同。

我试图实现我自己的解决方案，考虑一些基于宽度和高度的东西，而不仅仅是其中一个，并且我提出了这个功能：

const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;

export function proportionalSize(size) {
     let aspectRatioSize = width * height;
     let aspectRatioUnit = aspectRatioSize * 0.00001;

     return parseFloat(size) * 0.1 * aspectRatioUnit;
}

这仅适用于我开发应用程序的设备……字体大小不会在其他屏幕大小不同的设备上保持相同的比例。

我失去了足够的时间来修改整个代码中的字体大小，尝试在库之间切换。你对我如何克服这个问题有什么想法，或者我错过了什么吗？我最初教导说，这将是我最小的问题，但我错了。

后期编辑:我注意到我的问题在重新加载应用程序后消失了。它只发生在第一次渲染，重新加载后，字体大小工作正常。




Answer 1

最好的方法是有两个秤，一个用于手机，另一个用于平板电脑

Answer 2

匿名用户

我认为基础计算是错误的...我无法让它在手机和平板电脑之间完全缩放，所以我改变了计算方法，使用基于< code >宽度/高度的纵横比...这修复了它在两个设备上显示完全相同。

import { Dimensions, Platform, PixelRatio } from 'react-native';

const {
  width,
  height,
} = Dimensions.get('window');

export function normalize(size, multiplier = 2) {
  const scale = (width / height) * multiplier;

  const newSize = size * scale;

  return Math.round(PixelRatio.roundToNearestPixel(newSize));
}