根据智能手机的屏幕大小调整字体大小 React 原生

Question

嘿，伙计们，我使用const {宽度，高度} = 尺寸.get（'窗口'）; 根据屏幕宽度大小调整我的字体。像这样使用....

fontSize:width/24

它在iPhone和android设备上看起来不错，比如5.5英寸的设备，但在我的Galaxy s9上看起来很糟糕。我想根据屏幕设置我的字体，它可以自行调整..我该怎么做

Answer 1

为了访问设备的像素密度和字体比例，您可以根据文档从PixelRatio中受益。

如文档所示，PixelRatio.get（）为您提供设备像素密度：

var dynamic_fontSize = 20;
if(PixelRatio.get() === 1) {  // mdpi Android devices
    dynamic_fontSize = 12; 
} else if(PixelRatio.get() === 1.5) {  // hdpi Android devices
    ... 
}
else { ...

另一个想法是使用roundToNearestPixel()来利用布局大小。假设您想要调整元素的大小，使其在dp中占据屏幕宽度的98%,在dp中占据屏幕高度的10%:

export const widthPercentageToDP = widthPercent => {
  const screenWidth = Dimensions.get('window').width;
  // Convert string input to decimal number
  const elemWidth = parseFloat(widthPercent);  
  return PixelRatio.roundToNearestPixel(screenWidth * elemWidth / 100);
};

export const heightPercentageToDP = heightPercent => {
  const screenHeight = Dimensions.get('window').height;
  // Convert string input to decimal number
  const elemHeight = parseFloat(heightPercent); 
  return PixelRatio.roundToNearestPixel(screenHeight * elemHeight / 100);
};

此线程为您提供了一个清晰的示例：https://stackoverflow.com/a/35074379/4687359

Answer 2

使用像这样的响应式图书馆，可以更好地处理事情。

反应原生大小问题

例如:

import { scale, verticalScale, moderateScale } from 'react-native-size-matters';

const Component = props =>
    <View style={{
        width: scale(30),
        height: verticalScale(50),
        padding: moderateScale(5)
    }}/>;

因此，所有设备看起来都会更好。使用verticalScale定义与设备高度相关的内容。规模可以用于正常的事情..然后有一个自定义选项moderateScale，您也可以手动定义缩放比例。

有关更多详细信息，请参阅：扩展React Native应用程序

PS：还有其他选项，您可以手动定义自定义类以获取PixelRatio和所有内容。但这是一种直接的方法。

参考像素比率法

Answer 3

那么最好的选择是使用vmax和vmin单位。

vmin： 最小边的 1/100， vmax： 最大边的 1/100

看看这里