iPhone 6s plus 上的字体大小

Question

当我在 XCode/Simulators 和旧 iPad 设备上测试我的第一个 iOs/React Native 应用程序时，应用程序看起来不错，大小都很好。但是在新的 iPhone 6s plus 设备上，一切都超级小，文本、边距、填充比应有的小两倍。是响应能力问题吗？我想使用PixelRatio API，它会解决一切吗？在我将我的应用移植到 Android 上后，它还能正常工作吗？这是否意味着现在我所有的样式都需要写成这样：

var myStyle = {
  Post: {
    width: PixelRatio.getPixelSizeForLayoutSize(200),
    margin: PixelRatio.getPixelSizeForLayoutSize(100),
  }
}

而不仅仅是：

var myStyle = {
  Post: {
    width: 200,
    margin: 100,
  }
}

?

Answer 1

简短的回答是肯定的，您必须考虑所有字体的响应能力。我用过几种方法。

正如您所提到的，您可以使用getPixelSizeForLayoutSize。 getPixelSizeForLayoutSize 基本上看起来像这样：

static getPixelSizeForLayoutSize(layoutSize: number): number {
    return Math.round(layoutSize * PixelRatio.get());
}

问题在于 PixelRatio.get 将返回以下值：

   * PixelRatio.get() === 1
   *     - mdpi Android devices (160 dpi)
   *   - PixelRatio.get() === 1.5
   *     - hdpi Android devices (240 dpi)
   *   - PixelRatio.get() === 2
   *     - iPhone 4, 4S
   *     - iPhone 5, 5c, 5s
   *     - iPhone 6
   *     - xhdpi Android devices (320 dpi)
   *   - PixelRatio.get() === 3
   *     - iPhone 6 plus
   *     - xxhdpi Android devices (480 dpi)
   *   - PixelRatio.get() === 3.5
   *     - Nexus 6

这基本上意味着它将在 iPhone6 上返回传入的数字 * 2，在 iPhone6 Plus 上返回 * 3，这通常不会完全正确缩放，因为 iPhone6Plus 字体大小最终太大了。 iPhone6 和 iPhone4 也将接受相同的处理，这不是最优的。

我们解决这个问题的方法是编写一个辅助函数来计算设备的高度并返回一个大小。

虽然这个确切的实现可能不是您想要的，但下面的一些变体可能会像我们一样为您解决这个问题：

var React = require('react-native')
var {
  Dimensions
} = React

var deviceHeight = Dimensions.get('window').height;

export default (size) => {
    if(deviceHeight === 568) {
        return size
    } else if(deviceHeight === 667) {
        return size * 1.2
    } else if(deviceHeight === 736) {
        return size * 1.4
    }
    return size
}

然后像这样使用它：

var normalize = require('./pathtohelper')

fontSize: normalize(14),
borderWidth: normalize(1)

这是另一种方式，基于更接近 getPizelRatioForLayoutSize 的原始实现。唯一的问题是你仍然得到 iPhone6 和 iPhone4 的值返回相同，所以它有点不太准确，但比原生 getPizelRatioForLayoutSize 工作得更好：

var React = require('react-native')
var {
  PixelRatio
} = React

var pixelRatio = PixelRatio.get()

export default (size) => {
    if(pixelRatio == 2) {
        return size
    } 
    return size * 1.15
}

然后像这样使用它：

var normalize = require('./pathtohelper')

fontSize: normalize(14),
borderWidth: normalize(1)