@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .iphonex {
        padding-top: 44px;
        padding-bottom: 34px;
        height: 100%;
    }

    .iphonex:before {
        content: '';
        display: block;
        position: fixed;
        width: 100%;
        height: 44px;
        background-color: #000;
        top: 0;
        left: 0;
        z-index: 9999;
    }

    .iphonex:after {
        content: '';
        display: block;
        position: fixed;
        width: 100%;
        height: 34px;
        bottom: 0;
        left: 0;
        z-index: 9999;
    }
}


@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    .iphonex {
        padding-top: 44px;
        padding-bottom: 34px;
        height: 100%;
    }

    .iphonex:before {
        content: '';
        display: block;
        position: fixed;
        width: 100%;
        height: 44px;
        background-color: #000;
        top: 0;
        left: 0;
        z-index: 9999;
    }

    .iphonex:after {
        content: '';
        display: block;
        position: fixed;
        width: 100%;
        height: 34px;
        bottom: 0;
        left: 0;
        z-index: 9999;
    }
}