@artsy/detect-responsive-traits
Version:
Get responsive size traits from a user agent
65 lines (64 loc) • 2.57 kB
TypeScript
/**
* Notes:
* - Mobile Safari does not include device identifier. We can try to limit somewhat by looking at OS supported versions.
* - The Facebook app does include device identifiers when using its builtin webview, so prefer that.
*
* Links to gather data from:
* - https://artsy.looker.com/sql/z3zhf9crpbxqcw
* - https://artsy.looker.com/sql/ybq76vhnzk9dgs
* - https://www.theiphonewiki.com/wiki/Models
* - https://en.wikipedia.org/wiki/List_of_iOS_devices
* - http://vizdevices.yesviz.com/devices.php
* - http://www.tera-wurfl.com/explore/index.php
* - https://www.mydevice.io
* - http://responsivechecker.net/responsive
* - https://medium.com/@hacknicity/how-ipad-apps-adapt-to-the-new-11-and-12-9-ipads-pro-cabd1c0e5f20
*/
/**
* The responsive traits of a device (which can span multiple models) and how to recognize it from a user-agent.
*/
export interface Device {
/**
* A human readable description of the device(s)
*/
description: string;
/**
* A regular-expression that matches the client’s user-agent.
*/
userAgent: RegExp;
/**
* The minimum display width of the device, which is either the total width of the device’s viewport when held in its
* portrait orientation, or the smallest size the window can be resized to if the device supports window resizing.
*/
minWidth: number;
/**
* The maximum display width of the device, which is the height of the device’s viewport when held in its portrait
* orientation.
*/
maxWidth: number;
/**
* Wether or not the device supports resizing of windows.
*
* In case resizing is supported, the device should be considered as being able to display at any size between
* `minWidth` and `maxWidth`. In case resizing is not supported, `minWidth` and `maxWidth` should be considered as the
* only two possible width values.
*
* Devices that support resizing are iPads that support iOS >= 11 and all Android devices that support OS >= 7.
*/
resizable: boolean;
/**
* The number of pixels along an axis that make up 1 point.
*/
pixelRatio: number;
/**
* Whether or not the device is a touch-screen based device.
*/
touch: boolean;
}
export declare const Devices: Device[];
/**
* Returns the first device entry from `devices` that matches the given user-agent.
*
* @param userAgent The client’s user-agent, usually taken from a HTTP request header.
*/
export declare function findDevice(userAgent: string): Device | undefined;