IOS not using display-mode: standalone

[nesbtesh]

Describe the bug When i generated my iOS app I noticed that is not using the display-mode: standalone feature in iOS

It works perfect in android but not in iOS

URL to app https://www.noritex.com/es/

Expected behavior I expect the layout to change using the standalone display-mode

Screenshots Result:

Expected:

Additional info (please complete the following information):

• OS: iOS

[nesbtesh]

Is there any to force webskit to use display-mode: stadalone?

[breautek]

I'm not really sure if I'm understanding your issue correctly. You don't need to force the webview to do anything, you just simply need to use the CSS.

Cordova doesn't force specific settings that is controllable by CSS because obviously that will take away control from the app developer.

So how are you setting the display-mode css rule?

I'm not sure what the pixel resolution value of iOS devices on top of my head, but is it possible that it doesn't fit the media query @media (max-width: 550px) and (display-mode:standalone)?

[dpogue]

As far as I know, there's no way for an app (or Cordova for that matter) to force WebKit to set the display-mode for CSS media queries 😞

[nesbtesh]

Is there a way at least to remove the empty space below and above the app

[nesbtesh]

@breautek @dpogue let me know what you think

[breautek]

The spacing is safe area insets. Apple has a webkit blog that explains how to manipulate your content around safe areas:

https://webkit.org/blog/7929/designing-websites-for-iphone-x/