dimmmensions

A collection of dimensions from iOS and iPadOS devices.

Usage no npm install needed!

<script type="module">
  import dimmmensions from 'https://cdn.skypack.dev/dimmmensions';
</script>

README

Dimmmensions

📏 A collection of dimensions from iOS and iPadOS devices.

version build npm size coverage license

Introduction

Dimmmensions collects dimensions as objects for each device.

{
  device: "iPhone" | "iPad"
  name: string
  radius: number
  scale: number
  landscape: Orientation
  portrait: Orientation
}

landscape and portrait both contain orientation-specific dimensions and size classes.

{
  screen: {
    width: number
    height: number
  }
  layoutMargins: {
    top: number
    left: number
    right: number
    bottom: number
  }
  readableContent: {
    top: number
    left: number
    right: number
    bottom: number
  }
  safeArea: {
    top: number
    left: number
    right: number
    bottom: number
  }
  sizeClass: {
    horizontal: "compact" | "regular"
    vertical: "compact" | "regular"
  }
}

Examples

iPhone 11 

{
  "device": "iPhone",
  "name": "iPhone 11",
  "radius": 41.5,
  "scale": 2,
  "landscape": {
    "screen": {
      "width": 896,
      "height": 414
    },
    "layoutMargins": {
      "top": 0,
      "left": 64,
      "right": 64,
      "bottom": 21
    },
    "readableContent": {
      "top": 0,
      "left": 116,
      "right": 116,
      "bottom": 21
    },
    "safeArea": {
      "top": 0,
      "left": 48,
      "right": 48,
      "bottom": 21
    },
    "sizeClass": {
      "horizontal": "regular",
      "vertical": "compact"
    }
  },
  "portrait": {
    "screen": {
      "width": 414,
      "height": 896
    },
    "layoutMargins": {
      "top": 48,
      "left": 20,
      "right": 20,
      "bottom": 34
    },
    "readableContent": {
      "top": 48,
      "left": 20,
      "right": 20,
      "bottom": 34
    },
    "safeArea": {
      "top": 48,
      "left": 0,
      "right": 0,
      "bottom": 34
    },
    "sizeClass": {
      "horizontal": "compact",
      "vertical": "regular"
    }
  }
}

iPad mini 

{
  "device": "iPad",
  "name": "iPad mini (6th generation)",
  "radius": 21.5,
  "scale": 2,
  "landscape": {
    "screen": {
      "width": 1133,
      "height": 744
    },
    "sizeClass": {
      "horizontal": "regular",
      "vertical": "regular"
    },
    "layoutMargins": {
      "top": 24,
      "left": 20,
      "right": 20,
      "bottom": 20
    },
    "readableContent": {
      "top": 24,
      "left": 234.5,
      "right": 234.5,
      "bottom": 20
    },
    "safeArea": {
      "top": 24,
      "left": 0,
      "right": 0,
      "bottom": 20
    }
  },
  "portrait": {
    "screen": {
      "width": 744,
      "height": 1133
    },
    "sizeClass": {
      "horizontal": "regular",
      "vertical": "regular"
    },
    "layoutMargins": {
      "top": 24,
      "left": 20,
      "right": 20,
      "bottom": 20
    },
    "readableContent": {
      "top": 24,
      "left": 20,
      "right": 20,
      "bottom": 20
    },
    "safeArea": {
      "top": 24,
      "left": 0,
      "right": 0,
      "bottom": 20
    }
  }
}

Installation

Skypack

import { dimensions } from "https://cdn.skypack.dev/dimmmensions"

Yarn

yarn add dimmmensions

npm

npm install dimmmensions

Usage

dimensions

Import dimensions.

import { dimensions } from "dimmmensions"

// dimensions: [Dimensions, Dimensions, Dimensions...]

getDimensions

Import getDimensions.

import { getDimensions } from "dimmmensions"

Given no arguments, getDimensions will also return all dimensions.

const dimensions = getDimensions()

// dimensions: [Dimensions, Dimensions, Dimensions...]

Given a specific width and height, getDimensions will return dimensions that match the specified screen size, either in portrait or landscape.

const dimensions = getDimensions(320, 568)

// dimensions: [Dimensions]

Automation

Dimensions are extracted from iOS with the generate command—using Xcode and Simulator.