---
title: Cordova
description: Use touchcn in an Apache Cordova app — status bar setup and the WebView feature-support matrix that sets the minimum supported OS versions.
sidebar:
  label: Cordova
  icon: '<svg viewBox="0 0 256 245" width="100%" height="100%" fill="currentColor" aria-hidden="true"><path d="M232.727 244.364h-41.454l2.909-34.91h-20.364l-2.909 34.91H85.091l-2.91-34.91H61.819l2.91 34.91H23.272L0 93.09L58.182 0h139.636L256 93.09zM186.182 46.545h-37.403L151.273 64h-46.546l2.494-17.455H69.818L46.545 93.091l11.637 93.09h139.636l11.637-93.09zm-20.364 108.742c-3.213 0-5.818-9.69-5.818-21.643S162.605 112 165.818 112s5.818 9.69 5.818 21.644s-2.605 21.643-5.818 21.643m-73.454 1.804c-3.213 0-5.819-9.69-5.819-21.644s2.606-21.643 5.819-21.643s5.818 9.69 5.818 21.643s-2.605 21.644-5.818 21.644"/></svg>'
---

touchcn is web-first, so it installs into an [Apache Cordova](https://cordova.apache.org) app the same
way as any other web project — follow [Getting started](/docs/getting-started) for the engine packages,
Tailwind wiring, provider, and CLI. The important part of this guide is the **WebView support matrix**:
touchcn's styling relies on a handful of modern CSS features, and Cordova apps can run on older WebViews
than a typical browser audience, so the floor matters.

## Setup

The only Cordova-specific pieces are the viewport meta tag and the status bar plugin.

Add `viewport-fit=cover` to the viewport meta in `index.html` so the WebView extends into the safe
areas and touchcn's `env(safe-area-inset-*)` chrome (navbar, tabbar, sheets) can reserve space for the
notch and home indicator:

```html index.html
<meta
  name="viewport"
  content="viewport-fit=cover, width=device-width, initial-scale=1.0"
/>
```

For the status bar, use the official [`cordova-plugin-statusbar`](https://github.com/apache/cordova-plugin-statusbar):

```bash
cordova plugin add cordova-plugin-statusbar
```

It exposes `StatusBar.overlaysWebView(true)` (draw content under the status bar, so touchcn's top
safe-area padding takes over), `StatusBar.styleDefault()` / `StatusBar.styleLightContent()` (dark vs
light status-bar text), and `StatusBar.backgroundColorByHexString('#...')`. The matching startup
preferences in `config.xml` are `StatusBarOverlaysWebView`, `StatusBarStyle`, and
`StatusBarBackgroundColor`. Call `styleLightContent()` when touchcn's color scheme is dark and
`styleDefault()` when it is light to keep the status-bar text legible.

On iOS, Cordova runs on **WKWebView** (the default engine in current `cordova-ios`), so the WebView's
capabilities track the version of Safari shipped with the device's iOS — which is the basis for the
matrix below.

## WebView support matrix

touchcn's compiled CSS uses four modern features: the `:has()` selector, dynamic viewport units
(`dvh`), `color-mix()`, and `backdrop-filter` (iOS glass only, always emitted with the `-webkit-`
prefix). A WebView must support all four for the components to render correctly.

| Feature                    | Min Android WebView / Chrome | Min iOS Safari / WKWebView |
| -------------------------- | ---------------------------- | -------------------------- |
| `:has()` selector          | 105                          | 15.4                       |
| `dvh` viewport units       | 108                          | 15.4                       |
| `color-mix()`              | 111                          | 16.2                       |
| `backdrop-filter` (`-webkit-`) | 76                       | 9                          |

The binding constraint on both platforms is **`color-mix()`**, which raises the floor to:

- **Android System WebView / Chrome 111+** (released March 2023)
- **iOS 16.2+** — WKWebView's engine is tied to the OS, so iOS 16.2 is the first release with all four
  features (released December 2022)

:::warning
Cordova fleets on devices below these versions are **not supported** — touchcn will render with broken
colors and layout, since `color-mix()` and `:has()` fail silently on older engines. On Android the
System WebView updates independently of the OS through Google Play, so many older Android devices can
still reach a current WebView; on iOS the WebView only advances with the OS, making **iOS 16.2** a hard
minimum. If you must support older devices, touchcn is not a fit for that build.
:::

## A note on Capacitor

Cordova's own maintainers point to [Capacitor](https://capacitorjs.com) as the modern successor, and
Capacitor can reuse many existing Cordova plugins, so an incremental migration is often feasible — see
the [Capacitor guide](/docs/guides/capacitor) if you go that route.