Iphone X Platform Support - Excessive upper margin

italiancoder

Goodmorning everyone,
I want to bring to your attention a strange behavior that is occurring in my development process, it’s driving me crazy.

Development environment:

Cordova Installed platforms:
android 7.1.1
ios 4.5.5
Cordova Available platforms:
browser ~5.0.1
osx ~4.0.1
windows ~5.0.0
www ^3.12.0

Cordova requirements checked:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-27
Gradle: installed /usr/local/Cellar/gradle/4.9/bin/gradle

Requirements check results for ios:
Apple macOS: installed darwin
Xcode: installed [object Object]
ios-deploy: installed [object Object]
CocoaPods: installed [object Object]

iOS platform:
Xcode 9.4.1
Build version 9F2000

Cordova version: 8.0.0
Onsen UI: 2.14.4

TEST CODE

<!DOCTYPE html>
<html>
  <head>
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" href="vendor/onsenui/css/onsenui.min.css">
    <link rel="stylesheet" href="vendor/onsenui/css/onsen-css-components.min.css">
    <link rel="stylesheet" href="vendor/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css">

    
    <script type="text/javascript"  src="vendor/onsenui/js/onsenui.min.js"></script>
    <script type="text/javascript"  src="vendor/swiper/js/swiper.min.js" defer async></script>
    <script type="text/javascript" src="js/index.js" defer async></script>

    <style type="text/css">

    </style>

  </head>
  <body>
<ons-page id="helloworld-page">
  <ons-toolbar>
    <div class="left">
      <ons-toolbar-button icon="md-face"></ons-toolbar-button>
    </div>

    <div class="center">Title</div>

    <div class="right">
      <ons-toolbar-button>-</ons-toolbar-button>
      <ons-toolbar-button>+</ons-toolbar-button>
    </div>
  </ons-toolbar>

  <p style="text-align: center">Some content.</p>
</ons-page>

    <script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
if (ons.platform.isIPhoneX()) { // Utility function
  // Add empty attribute to the <html> element
  document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
}
</script>
  </body>
</html>

PREVIEW IMAGE
0_1534504608232_Simulator Screen Shot - iPhone X - 2018-08-17 at 12.48.28.png
Highlighted in yellow you can see the added area that really should not be there, since the JS code has been added to detect the presence of the iPhone X and correct the area.

PREVIEW IMAGE in DEV TOOLS
0_1534505617866_Schermata 2018-08-17 alle 12.49.01.png

Any ideas on how to correct this behavior?

Thanks in advance.

italiancoder

Solution founded here:

https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator;

Added following code in index.html:

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

navalrobin

nice

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Iphone X Platform Support - Excessive upper margin