Monaca Onsen UI Discord Chat Github Repo

iPhone X screen



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


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