iPhone 6s plus 上的字体大小 [英] Font size on iPhone 6s plus

问题描述

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

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),
  }
}

而不仅仅是:

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

?

推荐答案

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

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.

正如您提到的，您可以使用 getPixelSizeForLayoutSize.getPixelSizeForLayoutSize 基本上是这样的:

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());
}

问题在于 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

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

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
}

然后像这样使用它:

var normalize = require('./pathtohelper')

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

这是另一种方法，它更接近于 getPizelRatioForLayoutSize 的原始实现.唯一的问题是你仍然得到相同的 iPhone6 和 iPhone4 返回值，所以它有点不准确，但比原生 getPizelRatioForLayoutSize 效果更好:

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
}

然后像这样使用它:

var normalize = require('./pathtohelper')

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

这篇关于iPhone 6s plus 上的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！