3. iPhone X screen

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 screen

  • A

    Hi i have updated my app using the code below (added it to /www/lib/onsen/css/onsenui-core.css) Is there some other code i need to add as well as cant seem to find it

    }
    html[onsflag-iphonex-landscape] ons-splitter-side[side=“right”] .page__content > .list:not(.list–inset) > .list-header {
    padding-left: 15px;
    }
    html[onsflag-iphonex-landscape] ons-splitter-side[side=“right”] .page__content > .list:not(.list–inset) > .list-item {
    padding-left: 14px;
    }

    /* Suppress right safe area support for pages in left splitter sides */
    html[onsflag-iphonex-landscape] ons-splitter-side[side=“left”] .page__content > .list:not(.list–inset) {
    margin-right: 0;
    }
    html[onsflag-iphonex-landscape] ons-splitter-side[side=“left”] .page__content > .list:not(.list–inset) > .list-item–chevron:before {
    right: 16px;
    }
    html[onsflag-iphonex-landscape] ons-splitter-side[side=“left”] .page__content > .list:not(.list–inset) > .list-item > .list-item__center:last-child {
    padding-right: 6px;
    }
    html[onsflag-iphonex-landscape] ons-splitter-side[side=“left”] .page__content > .list:not(.list–inset) > .list-item > .list-item__right {
    padding-right: 12px;
    }
    html[onsflag-iphonex-landscape] ons-splitter-side[side=“left”] .page__content > .list:not(.list–inset) > .list-item > .list-item–chevron__right {
    padding-right: 30px;
    }
    }

    but when i build and run the app on my own iPhone X, the screen is just the same as the normal iphone (black bar at the top and the bottom). What else do I need to add to make the app full screen on the iPhone X?

    0
  • Onsen UI

    You also need to set viewport-fit=cover in your viewport meta tag.

    For example,

    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1,minimum-scale=1,viewport-fit=cover">
    0
  • A

    Many thanks, its now working correctly… But just one more question… My app now fits the whole iphone x screen, but my apps colour is red and now at the top of the screen is, just below the notch, its white, if you get me… How can i change that part from white to red so it fills the top part?

    Many Thanks

    0