@device

Description

The @device context query describes information about the device being use to view the ad.

Example Usage

There are many common uses for having content appear differently depending on the device it is being viewed as different form factors and capabilities can require dramatically different experiences. In the example below, we show a simple use-case of making text bigger when the @device type is smartphone.

CSS Example

.component {
	font-size: 16rem;
}

@device (type: smartphone) {
	.component {
		font-size: 18rem;
	}
	
	/* Other styles to apply when the device is smartphone go here... */
	
}

Available Features

Feature Name	Javascript Name	Value	Example Value	Description
type	deviceType	desktop tablet smartphone other	smartphone	The form-factor of the current device.
os-family	deviceOsFamily	string	mac_os_x	The name of the current operating system. All lower-case, spaces should be replaced by an underscore (e.g. mac_os_x).
os-version	deviceOsVersion	number	10.11.1	The current version of the user's browser.
browser-family	deviceBrowserFamily	string	chrome	The name of the current browser type. All lower-case, spaces should be replaced by an underscore (e.g. internet_explorer).
browser-version	deviceBrowserVersion	number	49.0.2623	The current version of the user's browser.
screen-width	deviceScreenWidth	number	480	The width in (pixel density neutral) pixels of the device's screen.
screen-height	deviceScreenHeight	number	640	The height in (pixel density neutral) pixels of the device's screen.
screen-aspect-ratio	deviceScreenAspectRatio	number	0.75	The aspect ratio of the device's screen as calculated by width/height.
screen-orientation	deviceScreenOrientation	portrait landscape	landscape	Describes if the shape of the viewport is current in portrait or landscape orientation.
screen-pixel-density	deviceScreenPixelDensity	number	2	The pixel density of the device's screen.
viewport-width	deviceViewportWidth	number	480`	The width of the viewable content area of the screen in pixels.
viewport-height	deviceViewportHeight	number	640	The height of the viewable content area of the screen in pixels.
viewport-aspect-ratio	deviceViewportAspectRatio	number	0.75	The aspect ratio of the viewable content area of the screen as calculated by width/height
viewport-orientation	deviceViewportOrientation	portrait landscape	portrait	Describes if the shape of the viewport is current in portrait or landscape orientation.
mobile	deviceMobile	boolean	true	A boolean representing if the user's device is mobile device - (a smartphone or tablet).
alpha	deviceAlpha	number	5	The alpha value of the device's orientation in space, as determined by the device's accelerometer.
beta	deviceBeta	number	0	The beta value of the device's orientation in space, as determined by the device's accelerometer.
gamma	deviceGamma	number	9.2	The gamma value of the device's orientation in space, as determined by the device's accelerometer.