Calculate the physical size of an HTML element on the screen of a specific device

screen_size.r

# Calculate the size of an HTML element, whose size is specified with CSS, on
# the screen of a specific device (laptop, tablet, phone, ...).
#
# Where to get the needed information?
#   - ppi:      https://www.gsmarena.com/ or http://dpi.lv/
#   - dpr:      http://devicepixelratio.com/
#   - linres:   https://www.gsmarena.com/
#   - viewport: default viewport width for mobile only, first line of:
#               http://whatsmy.browsersize.com/
#
# Daniel Weibel <[email protected]> 17 October 2017
#------------------------------------------------------------------------------#

# Calculate the size of an HTML content on the screen of a specific device
# based on the device pixel ratio used by the device web browser.
#
# The device pixel ratio of the device is used by the browser, if the viewport
# is set to "device-width" (the "device-width" being the result of applying the
# device pixel ratio: <meta name="viewport" content="width=device-width">.
#
# Arguments:
#   ppi: the pixel density of the device in PPI (pixels per inch)
#   dpr: the device pixel ratio used by the web browser on this device
#   px:  the size of the content in the 'px' CSS unit
# Returns:
#   The size of the content (as if measured with a ruler on the screen) in cm.
SizeFromDPR <- function(ppi, dpr, px) {
  # 1/ppi:        physical size of a device pixel (in inches)
  # ..... * dpr:  physical size of a CSS px unit on the screen (in inches)
  # ..... * px:   physical size of the content on the screen (in inches)
  # ..... * 2.54: conversion inches to centimetres
  1/ppi * dpr * px * 2.54
}

# Calculate the size of an HTML content on the screen of a specific device.
# based on the viewport width or height used by the device web browser.
#
# This can be useful if a <meta name="viewport"> tag is NOT set, that is, the
# device pixel ratio is NOT taken in account, and the browser applies the
# default viewport width (e.g. 990 px for Chrome).
#
# Arguments:
#   ppi:      pixel density of the device in PPI (pixels per inch)
#   linres:   linear resolution of screen in desired direction (width or height)
#   viewport: size of browser's viewport in CSS pixels (px) in width or height
#   px:       size of the content in CSS pixels (px)
# Returns:
#   The size of the content (as if measured with a ruler on the screen) in cm.
SizeFromVP <- function(ppi, linres, viewport, px) {
  # linres/viewport: effective (implicit) device pixel ratio
  SizeFromDPR(ppi, linres/viewport, px);
  # Alternative equivalent calculation:
  # linres / ppi:            size of screen (in inches)
  # ............ / viewport: size of a CSS pixel (in inches)
  # ............ * px:       size of the content (in inches)
  # ............ * 2.54:     conversion inches to centimetres
  #linres / ppi / viewport * px * 2.54
}