如何为React Native开发的WebApp适配不同屏幕尺寸的字体大小

以下是几种实用的适配方案，能解决不同屏幕尺寸下的字体大小适配问题：

1. 基于屏幕宽度的动态比例计算 #

以设计稿基准宽度（比如常见的375px）为参照，计算当前屏幕宽度与基准宽度的比例，再用该比例缩放设计稿中的字体大小。

创建工具函数：

import { Dimensions } from 'react-native';

const BASE_WIDTH = 375; // 设计稿的基准宽度
const screenWidth = Dimensions.get('window').width;
const scale = screenWidth / BASE_WIDTH;

export const getScaledFontSize = (size) => {
  return size * scale;
};

使用示例：

import { getScaledFontSize } from './utils';
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  titleText: {
    fontSize: getScaledFontSize(24),
  },
  bodyText: {
    fontSize: getScaledFontSize(16),
  },
});

2. 结合系统字体缩放设置适配 #

用户可能在系统设置中调整了字体大小，需结合PixelRatio的字体缩放比例做二次适配，避免字体显示异常：

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

const BASE_WIDTH = 375;
const screenWidth = Dimensions.get('window').width;
const scale = screenWidth / BASE_WIDTH;
const fontScale = PixelRatio.getFontScale();

export const getScaledFontSize = (size) => {
  const scaledSize = size * scale;
  // 限制字体最小/最大值，避免极端屏幕下的显示问题
  return Math.min(Math.max(scaledSize * fontScale, 12), 32);
};

3. 借助第三方工具库简化操作 #

可以用成熟的适配库减少重复代码，比如react-native-size-matters，它内置了字体缩放逻辑，直接调用即可：

import { scaleFont } from 'react-native-size-matters';
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  subtitleText: {
    fontSize: scaleFont(18),
  },
});

4. 针对大屏设备单独适配 #

如果需要对平板等特殊屏幕做精细调整，可通过判断屏幕宽度设置不同的缩放系数：

import { Dimensions } from 'react-native';

export const getScaledFontSize = (size) => {
  const screenWidth = Dimensions.get('window').width;
  let scale = 1;
  if (screenWidth > 768) { // 平板宽度阈值
    scale = 1.2; // 平板字体放大比例
  } else {
    scale = screenWidth / 375;
  }
  return size * scale;
};

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