苹果手机6s加的字体大小

Question

当我在XCode/Simulators和旧iPad设备上测试我的第一个iOs/React原生应用程序时，该应用程序看起来不错，大小都很好。但在新的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() === 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)

这是另一种方式，更接近于< code > getpizelrerationforlayoutsize 的原始实现。唯一的问题是，iPhone6和iPhone4仍然返回相同的值，因此它的准确性稍差，但比原生的< code > getpizelrerationforlayoutsize 要好:

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)