Capacitor Foldable

Guidance for @erkamyaman/capacitor-foldable, which reports the fold to a Capacitor web view: where the crease is, the hinge angle, the posture, and which display the app is on.

This skill is new. Everything in it was checked against the plugin source and measured on the iPhone Duo simulator, but it has not been through much real use yet, so report anything that misleads you. It is maintained in the plugin's own repo, which is the copy that ships with the npm package.

Install

npm install @erkamyaman/capacitor-foldable
npx cap sync

Capacitor 8 uses the current major. Capacitor 7 apps install @erkamyaman/capacitor-foldable@7, which reports the fold on Android and size classes everywhere, but has no iPhone Duo support: a Capacitor 7 app built with Xcode 27 crashes at launch, because iOS 27 needs the scene lifecycle that Capacitor 8.5 and later adopted. The 7.x line also predates the --fold-* variables (8.1.0) and the Ionic tab stylesheets, so the CSS below needs Capacitor 8.

Start here: CSS before JavaScript

Install the polyfill once at startup, then lay out with CSS. Most foldable work needs no JavaScript at all.