Search code examples
react-nativescalescreen-resolutionretina

What do 'scale' and 'fontScale' values stand for in Dimensions object?


Dimensions.get() returns an object like

Object {
  "screen": Object {
    "fontScale": 1,
    "height": 375,
    "scale": 2,
    "width": 667,
  },
  "window": Object {
    "fontScale": 1,
    "height": 375,
    "scale": 2,
    "width": 667,
  },
}

Height and width are probably screen/window height and width in dp (density-independent pixels), but what do fontScale and scale stand for? I'm trying to figure out if I could use the scale value for responsive layout on Retina screens. Thanks!


Solution

  • A bit late to the party, but this question came up when Googling, so I thought I might as well answer it.

    fontScale

    The scale of the font currently used. Some operating systems allow users to scale their font sizes larger or smaller for reading comfort. This property will let you know what is in effect.

    scale

    The pixel ratio of the device your app is running on.

    A value of 1 indicates PPI/DPI of 96 (76 on some platforms). 2 indicates a Retina or high DPI display.

    Reference link

    https://reactnative.dev/docs/usewindowdimensions