[!IMPORTANT]
This project is no longer maintained.
Introduction
Dimmmensions collects dimensions as objects for each device.
interface Dimensions {
device: "iPhone" | "iPad"
name: string
radius: number
scale: number
landscape: OrientedDimensions
portrait: OrientedDimensions
}
landscape and portrait both contain orientation-specific dimensions and size classes.
interface OrientedDimensions {
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
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 and iPadOS with the generate command—using Xcode and Simulator.