UNPKG

@artsy/detect-responsive-traits

Version:
65 lines (64 loc) 2.57 kB
/** * 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;