Display size metrics

Kamil Szymkowski
Unpacking React Native
4 min readDec 4, 2019

There are several terms commonly used in describing a smartphone’s display size. This post presents a disambiguation of terms as well as an overview of most common screen sizes available on the market.

BODY SIZE

Body size refers to the physical dimensions of the device, which includes the screen and any frame surrounding it. Commonly used units are mm (millimetres) and in (inches).

HEIGHT x WIDTH x DEPTH [mm or in]

DISPLAY SIZE

The word “screen” is used informally to refer to the physical component of a device capable of electronic visual display. It is often used interchangeably with the word “display”. There are several metrics used to describe the display of a mobile device. Some metrics describe the physical features of the display (screen to body ratio, screen size) while other metrics are used to describe the virtual features of the display (pixel density, resolution, aspect ratio, viewport).

SCREEN TO BODY RATIO

The screen to body ratio is a ratio between the display and body areas.

SCREEN TO BODY RATIO = DISPLAY AREA / BODY AREA × 100 [%]

SCREEN (PHYSICAL) SIZE

Screen size (aka physical size) is the most commonly used metric for describing the real size of the display. The screen size is often given in inches.

SCREEN SIZE [in]

The word “mobile device” is an umbrella term for smartphones, phablets and tablets, which differ in the physical size of the display. The display’s diagonal in most smartphones is less than 5 inches. Devices with screen size between 5 and 7 inches are classified as “phablets”, while devices with screen size exceeding 7 inches are called “tablets”.

PIXEL DENSTY

In the context of display devices the word “pixel” is used to refer to the smallest physical unit of the display that can be controlled with electronic signals. Different display technologies such as LCD (Liquid Crystal Display) and OLED (Organic Light-Emitting Diode)(most commonly used display technologies in smartphones) have varying levels of granularity. The measure used for describing it is called “pixel density” and is defined as the number of pixels per square inch.

PIXEL DENSITY [ppi] = NUMBER OF PIXELS / SQUARE INCH

NOTE: PPI (Pixel Per Inch) and DPI (Dots Per Inch) are often used interchangeably.

If both squares are taken to represent a square inch then the display to the left would have a higher pixel density and therefore images displayed on it would appear to have a better quality.

RESOLUTION

Resolution is a measure similar to pixel density, but instead of being confined to 1 square inch it describes the number of pixels a given display device has in its horizontal and vertical cross-sections.

WIDTH x HEIGHT [px]

In this exaggerated representation the device to the left would have a higher resolution as more pixels are stacked diagonally and vertically.

Display resolution can not be used as an indication of the physical size of the display device unless its PPI is known.

ASPECT RATIO

It is common in smartphone displays to have more densely stacked pixels in the horizontal than in the vertical direction. Most commonly, for every 16 pixels in the horizontal direction one will find 9 pixels diagonally.

This is done so that the quality of the displayed image stays the same when the user flips the view from portrait to landscape. The exaggerated image below shows that it was worthwhile having 4 pixels stacked vertically and only 2 horizontally.

Aspect ratio is often represented in the form:

WIDTH : HEIGHT

VIEWPORT

The viewpoint refers to the rectangular area dedicated to the display of a certain image. The term is most commonly used in situations when the display area is limited due to the presence of some GUI elements. For example in the image below the viewport is restricted in its vertical extent by the navbar.

--

--