The title's full phrase is Dots Per Inch versus Pixels Per Inch versus Device Dots Per Pixel.

  • Dots Per Inch (DPI): only used for physical printing, which specifies how many color dots are printed in one-pixel length. This number mostly presents the ability of a printer.
  • Pixels Per Inch (PPI): shows how much detail a digital screen can display, inferred from the term's name: the number of pixels can be displayed within one pixel of the screen.
    What is the screen resolution? Screen resolution presents the number of pixels that can be shown on that screen (full width, full height). This does not relate to how well it can display.

    And we have Resolution / PPI = screen's physical size in inch.

The standard screen's PPI is 72PPI. The human eye retina's PPI in an average condition is 300PPI. This is why Apple calls a class of its displays Retina display.

  • Device Dots Per Pixel (DDPP): device pixel ratio. This is an application-specific term, usually comes in terms of 1x, 2x, 3x, or @1x, @2x, @3x. You typically see it while developing a website or a mobile/desktop application. Why do we need this?

Suppose that there are two devices with precisely the same physical screen sizes, but one is more recent and has a higher PPI (also, higher screen resolution), i.e., more pixels in the same physical area.

Usually, this means that the newer device can show more stuff in its screen, of course, in a smaller physical area. However, this is not what you want in your application/website. This is where the device pixel ration comes from.

In your application, you specify the image's display size as 200px x 300px. The number of pixels used to display this 200px x 300px is different from device to device. A 2x device uses double of number pixels (in a single dimension) as of a 1x device to have the same displaying effect.

Definition of reference pixel from css specs.

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).