https://github.com/tobua/device-sizes
Collection of mobile device properties relevant for development.
https://github.com/tobua/device-sizes
Last synced: about 2 months ago
JSON representation
Collection of mobile device properties relevant for development.
- Host: GitHub
- URL: https://github.com/tobua/device-sizes
- Owner: tobua
- Created: 2022-10-16T21:28:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-12T18:10:10.000Z (12 months ago)
- Last Synced: 2025-03-19T06:53:00.232Z (2 months ago)
- Language: TypeScript
- Homepage: https://device-sizes.vercel.app/api
- Size: 32.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Device Sizes
Collection of various properties relevant for development of various popular mobile devices.
## Installation and Usage
```
npm install device-sizes
```
```ts
import { deviceSizes } from 'device-sizes'
console.log(deviceSizes.iphone15.name === 'iPhone 15') // true
const widths = Object.keys(deviceSizes).map((key) => deviceSizes[key].width)
const sumOfWidths = widths.reduce((previous, current) => previous + current, 0)
const averageWidth = sumOfWidths / Object.keys(deviceSizes).length
console.log(averageWidth)
```
## Available Properties
```ts
interface Device {
id: string
name: string
width: number
height: number
// Screen diagonal in inches
size: number
// In Pixels per Inch (ppi)
density: number
// Responsive scaling factor
scale: number
brand: Brand
camera: Camera
type: Type
}
enum Brand {
Apple,
Samsung,
Google,
Xiaomi,
Oppo,
Huawei,
}
enum Camera {
Notch,
DynamicIsland,
Center,
Left,
Right,
Outside,
Unknown,
}
enum Type {
Phone,
Tablet,
}
```
The types can be imported from the plugin when needed.
```ts
import { Device, Brand, Camera, Type } from 'device-sizes'
```
## GraphQL API
To avoid bundling all devices or download unnecessary properties the data can be queried through GraphQL. The API is reachable at `https://device-sizes.vercel.app/api`.
```ts
import { ApolloClient, InMemoryCache, gql, HttpLink } from '@apollo/client'
const client = new ApolloClient({
uri: 'https://device-sizes.vercel.app/api'
cache: new InMemoryCache(),
})
const response = await client.query({
query: gql`
query GetDevices {
devices {
id
name
width
height
}
}
`,
})
const { devices } = response.data
```