Skip to content

Instantly share code, notes, and snippets.

@weibeld
Created October 17, 2017 19:24
Show Gist options
  • Save weibeld/dc15ce0a72f04b3abbe16a24ee6acd57 to your computer and use it in GitHub Desktop.
Save weibeld/dc15ce0a72f04b3abbe16a24ee6acd57 to your computer and use it in GitHub Desktop.
Calculate the physical size of an HTML element on the screen of a specific device
# 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 <danielmweibel@gmail.com> 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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment