Font size on iPhone 6s plus

Question

When i'm testing my first iOs/React Native app in XCode/Simulators and on old iPad device the app looks good, sizes are all fine. But on a new iPhone 6s plus device everything is super small, text , margins, paddings are like twice less than they should be. Is it the responsiveness issue? Am i suppose to use the PixelRatio API and it will solve everything? Will it still work properly after i will port my app on Android? And does it mean that now all of my styles i will need to write like:

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

instead of just:

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

?

Answer 1

The short answer is yes, you will have to factor in the responsiveness for all of your fonts. There are a few methods that I have used.

As you mentioned, you can use the getPixelSizeForLayoutSize. getPixelSizeForLayoutSize basically looks like this under the hood:

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

The problem with that is that PixelRatio.get will return the following values:

   * 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

That basically means that it will return the passed in number * 2 on an iPhone6, and * 3 on an iPhone6 Plus, which doesn't usually scale exactly right because the iPhone6Plus font size ends up being too big. The iPhone6 and the iPhone4 will also receive the same treatment, which is not optimal.

What we've done to fix this is write a helper function which calculates the height of the device and returns a size.

While this exact implementation may not be exactly what you want, some variation of the following would probably solve this for you as it has for us:

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
}

Then use it like this:

var normalize = require('./pathtohelper')

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

Here is another way, based closer to the original implementation of the getPizelRatioForLayoutSize . The only problem is you are still getting the iPhone6 and iPhone4 values returned the same, so it is a little less accurate, but works better than the native 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
}

Then use it like this:

var normalize = require('./pathtohelper')

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