iPhone 6s加上字体大小

Question

当我在XCode /模拟器和旧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)