> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Introduction

## Article: Introduction

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/accessibility-and-devices/device-info/introduction.md

## Article Content:

# About the Device Info API

The Device Info API tells you what class of device the site visitor is using, such as a smartphone or a tablet, and whether they've asked their system to minimize motion. Use it to adapt a component's behavior to the site visitor's device, and to skip animations and autoplaying video for site visitors who prefer reduced motion.

With the Device Info API, you can:

- Retrieve the class of device the site visitor is using.
- Check whether the site visitor prefers reduced motion.

## Before you begin

It's important to note the following points before starting to code:

- Both values can change while the page is open. Read them while a component renders, so the component updates when they change.

## Use cases

- [Skip animations for site visitors who prefer reduced motion](https://dev.wix.com/docs/sdk/site-sdk/accessibility-and-devices/device-info/sample-flows.md)
- [Adapt a component for site visitors on phones](https://dev.wix.com/docs/sdk/site-sdk/accessibility-and-devices/device-info/sample-flows.md)

## SDK setup

@package_metadata:@wix/site-service-device-info

To use the API, install the `@wix/site-service-device-info` package:

```bash
npm install @wix/site-service-device-info
```

#### Import the package

```ts
import { DeviceInfoDefinition } from '@wix/site-service-device-info/definition'
```

#### Import types

Import any type shown in these docs from `@wix/site-service-device-info/types`:

```ts
import type { <TypeName> } from '@wix/site-service-device-info/types'
```

#### Resolve the service

In a React component, resolve the service with the `useService` hook:

```tsx
import { useService } from '@wix/services-manager-react'
import { DeviceInfoDefinition } from '@wix/site-service-device-info/definition'

function PlayHint() {
    const deviceInfoService = useService(DeviceInfoDefinition)

    return <p>{deviceInfoService.deviceType === 'Smartphone' ? 'Tap to play' : 'Click to play'}</p>
}
```