# Device Utils

*Category:* Utilities
*Section:* Helper
*Source:* https://uikit.developers.rio.cloud/#/utilities/deviceUtils
*Captured:* 2026-04-27T14:59:27.950Z

Set of utility functions which helps detecting certain devices or functionality.

## Device Utils

### Example: Example 1

No touch support

isMobileScreen: false

isMobile: false

isDesktop: true

isRetinaDevice: false

isMac: true

Loaded in iFrame: false

Zoom is: enabled
Note
Because Apple does not allow to disable zoom on touch devices, isZoomDisabled has no effect when using iOS.

#### React (tsx)

```tsx
import { useEffect, useState } from 'react';

import { Note } from '../../../components/Note';

import {
    hasTouch,
    isMobile,
    isMobileScreen,
    isDesktop,
    isRetinaDevice,
    toggleZoomOnMobile,
    inIframe,
    isMac,
} from '@rio-cloud/rio-uikit/DeviceUtils';
import useWindowResize from '@rio-cloud/rio-uikit/useWindowResize';

const DeviceUtilsExample = () => {
    const [isZoomDisabled, setIsZoomDisabled] = useState(false);
    const [isMobileScreenSize, setIsMobileScreenSize] = useState(isMobileScreen());

    useEffect(() => {
        // Disables the Zoom for the mobile devices.
        // This is not good for accessibility but makes the webpage
        // feel more like a native app.
        toggleZoomOnMobile();
        const viewportMeta = document.head.querySelector<HTMLMetaElement>('[name="viewport"]');
        setIsZoomDisabled(viewportMeta?.content.includes('user-scalable=0') ?? false);
    }, []);

    useWindowResize(() => setIsMobileScreenSize(isMobileScreen()));

    return (
        <div>
            <p>{hasTouch() ? 'Device has touch. Treat it well!' : 'No touch support'}</p>
            <hr />
            <p>isMobileScreen: {`${isMobileScreenSize}`}</p>
            <hr />
            <p>isMobile: {`${isMobile()}`}</p>
            <hr />
            <p>isDesktop: {`${isDesktop()}`}</p>
            <hr />
            <p>isRetinaDevice: {`${isRetinaDevice()}`}</p>
            <hr />
            <p>isMac: {`${isMac()}`}</p>
            <hr />
            <p>Loaded in iFrame: {`${inIframe()}`}</p>
            <hr />
            <p>Zoom is: {isZoomDisabled ? 'disabled' : 'enabled'}</p>
            <Note>
                Because Apple does not allow to disable zoom on touch devices, <code>isZoomDisabled</code> has no effect
                when using iOS.
            </Note>
        </div>
    );
};

export default DeviceUtilsExample;
```

#### HTML (html)

```html
<div>
    <p>No touch support</p>
    <hr>
    <p>isMobileScreen: false</p>
    <hr>
    <p>isMobile: false</p>
    <hr>
    <p>isDesktop: true</p>
    <hr>
    <p>isRetinaDevice: false</p>
    <hr>
    <p>isMac: true</p>
    <hr>
    <p>Loaded in iFrame: false</p>
    <hr>
    <p>Zoom is: enabled</p>
    <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0">
        <div>
            <span class="label label-info label-condensed label-filled">Note</span>
        </div>
        <div class="width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1">Because Apple does not allow to disable zoom on touch devices, <code>isZoomDisabled</code> has no effect when using iOS.</div>
    </div>
</div>
```