Is there a way to detect I am running in Capacitor with CSS?

[aldo-roman]

When running in a PWA, I can detect the display mode standalone using a mediaquery (display-mode: standalone). This helps me change the CSS for the installed apps (eg, disable hover on certain elements).

However, this doesn't seem to work in Capacitor. I am aware of Capacitor.isNativePlatform, but I'd like a CSS solution. How can I tell when the app is running under Capacitor using CSS?

[angeloraso]

• Hi aldo-roman! Capacitor is not an OS. You app is not running under Capacitor. Your app is running on Android or IOS. I'd recommend using Javascript to detect the web browser / operating system, and attach classes to the of the page accordingly.
• If it is extremely necessary to do it from CSS code, you could add media-query tags to capture screen sizes

[aldo-roman]

you could add media-query tags to capture screen sizes

That would also capture the website running in mobile browsers. I need to apply styles for when I am running in native platform ("under Capacitor" 😉).

With PWAs this is done by running in standalone mode. Does Capacitor set any flag like this?

[onysko3]

To detect native application or standalone PWA and adapt your CSS styles, you can follow these steps:

1. Define a JavaScript Function to Detect the Environment:
   Create a function that checks if the application is running in standalone mode or as a native Capacitor app. This function uses both the CSS media query for detecting standalone mode and Capacitor's native platform check.

export const isNativeAppOrPWA = () => {
    return window.matchMedia('(display-mode: standalone)').matches || Capacitor.isNativePlatform();
}

2. Set an HTML Attribute Based on the Environment:
   Upon the initial loading of your webpage, use this to set a custom attribute on the root HTML element.
   document.documentElement.setAttribute('is-app', isNativeAppOrPWA().toString())

3. Utilize CSS to Apply Styles Based on the Attribute:
   In your CSS or Sass, use the custom attribute to conditionally apply styles. This method provides a clean separation of logic and style, making your code easier to maintain.

[is-app="true"] {
    --navbar-height: 70px;  // Example variable for navbar height adjustment
    // Additional style modifications can be added here
}

This approach ensures that your styles are dynamically adjusted based on the running environment of your application