@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;