iPhone 6s plus 上的字体大小

Posted 2023-02-22

【中文标题】iPhone 6s plus 上的字体大小

【英文标题】：Font size on iPhone 6s plus

【发布时间】：2016-04-22 14:20:52

【问题描述】：

当我在 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,
  

?

【参考方案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)

【讨论】：

哇，非常感谢。我会尽快测试并通知您。

太棒了，希望对您有所帮助。

它给了我一个很好的方向，但最后我使用的代码有点不同：jsfiddle.net/97ty7yjk