Monaca Onsen UI Discord Chat Github Repo

Iphone X Platform Support - Excessive upper margin



  • 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.



  • 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">
    


  • nice