Capacitor Safe Area Simulator

Simulates safe areas for Capacitor apps, including current phones, tablets, and foldables such as iPhone Duo

Check Capacitor safe-area layouts in Chrome DevTools without a phone. Open DevTools on the page you are building, select Capacitor Safe Area, pick a device, and turn the simulation on. The insets are applied for Ionic, Konsta UI, and Tailwind Capacitor. WHAT'S NEW IN 1.1.0 The device list now includes current phones, tablets, and foldables. iPhone 18 Pro and iPhone 18 Pro Max are at the top of the iPhone list. iPhone Duo, Galaxy Z Fold etc and Fold each have a cover view and an unfolded view. A search box filters the list. The crease is drawn on its own and is not added to the four edge insets. HOW TO USE 1. Install the extension. 2. Open DevTools on your app. 3. Open the Capacitor Safe Area panel. 4. Pick a device. For a foldable, pick Cover or Unfolded. 5. Turn the simulation on. The simulation does not change the browser's own safe-area values, so a page that only uses those will stay put. PRIVACY The chosen device for the tab you are inspecting stays on this computer. Nothing is sent to a server. The extension does not sell data or use analytics. SUPPORT https://github.com/Cap-go/chrome-ext-for-capacitor/issues support@capgo.app Made for https://capgo.app