Как установить фон на весь экран iPhoneX, включая выемку - PullRequest
Новая
       3

Как установить фон на весь экран iPhoneX, включая выемку

0 голосов
/ 12 марта 2020

Я новичок в html и css. Недавно. Я пишу страницу входа для iphoneX, но фон не покрывает весь экран. Я попробовал следующие методы, но не работал 

viewport-fit=cover
padding-left: env(safe-area-inset-left); 
padding-right: env(safe-area-inset-right);

Ни один из них не работает, он все еще оставляет белую область сверху, как показано на рисунке. Как сделать так, чтобы фон покрывал всю страницу, включая верхний левый и верхний правый угол на iPhoneX или более поздних версиях?

Благодарим вас за помощь.

введите описание изображения здесь 

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"/>
    <title>登陆页面</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
</head>
<style type="text/css">
    body{
        font-family: "Source Han Sans CN";
        background-color: #22222;
        overflow-x:hidden;
        overflow-y:hidden;
        padding-left: env(safe-area-inset-left);

        padding-right: env(safe-area-inset-right);
    }

    /*以下为背景装饰*/
    .middle-image {
        margin: 10vh auto 0 auto;
        text-align: center;
    }

    #girl {
        width: 30vh;
    }


    .circlex {
        background: #fdd100;
        position: fixed;
        overflow: hidden;
    }

    #circle2 {
        left: -5vh;
        top: -10vh;
        width: 18vh;
        height: 18vh;
        -moz-border-radius: 10vh;
        -webkit-border-radius: 10vh;
        border-radius:10vh;
    }

    #circle3 {
        left: -24vh;
        top: 0.5vh;
        width: 30vh;
        height: 30vh;
        -moz-border-radius: 24vh;
        -webkit-border-radius: 24vh;
        border-radius:24vh;
    }

    #circle4 {
        right: -5vh;
        top: -6vh;
        width: 18vh;
        height: 18vh;
        -moz-border-radius: 10vh;
        -webkit-border-radius: 10vh;
        border-radius:10vh;
    }

    #circle5 {
        right: -12vh;
        top: 4.5vh;
        width: 18vh;
        height: 18vh;
        -moz-border-radius: 10vh;
        -webkit-border-radius: 10vh;
        border-radius:10vh;
    }

    #circle6 {
        right: -11vh;
        bottom: 4.5vh;
        width: 15vh;
        height: 15vh;
        -moz-border-radius: 10vh;
        -webkit-border-radius: 10vh;
        border-radius:10vh;
    }

    #circle7 {
        right: -8vh;
        bottom: -8vh;
        width: 18vh;
        height: 18vh;
        -moz-border-radius: 10vh;
        -webkit-border-radius: 10vh;
        border-radius:10vh;
    }

    #circle8 {
        left: -2vh;
        bottom: -10vh;
        width: 18vh;
        height: 18vh;
        -moz-border-radius: 10vh;
        -webkit-border-radius: 10vh;
        border-radius:10vh;
    }

    #circle9 {
        left: -13vh;
        bottom: -1vh;
        width: 18vh;
        height: 18vh;
        -moz-border-radius: 10vh;
        -webkit-border-radius: 10vh;
        border-radius:10vh;
    }

    /*以下为内容区域，包括所有文字性内容*/
    .main_title {
        position: relative;
        margin: 6vh auto 5.76vh auto;
        text-align: center;
    }

    .circle {
        width: 1vh;
        height: 1vh;
        background: #fdd100;
        -moz-border-radius: 8vh;
        -webkit-border-radius: 8vh;
        border-radius: 8vh;
        margin: 1.44vh;
    }

    .main_title ul{
        width: 90%;
        list-style: none;
        display: flex;
        justify-content: center; 
        align-items: center;
    }

    .main_title a{
        color: #FDD100;
        font-size: 6vw;
    }

    .textbox {
        align-items: center;
        text-align: center;
        border-bottom: 0.12vh solid #CDCDCD;
        display: flex;
        width: 80%;
        margin: 1.2vh auto 0 auto;
    }

    .textbox input {
        border-style: none;
        outline: none;
        background: none;
        font-size: 3vw;
        color: #CDCDCD;
        margin: 0 auto;
        float: left;

    }

    #password::-webkit-input-placeholder {
        color: #cdcdcd;
    }

    #account::-webkit-input-placeholder {
        color: #cdcdcd;
    }

    i {
        color: #cdcdcd;
    }

    .btn {
        width: 80%;
        height: 6vh;
        background: #fdd100;
        border-radius: 4.8vh;
        border-style: none;
        color: #4b4a48;
        font-size: 4vw;
    }

    .btn-container {
        margin: 2.9vh auto 0vh auto;
        text-align: center;
    }

    .noaccount {
        border:0.12vh solid red;
        width: 80%;
        margin: 1.2vh auto 0vh auto;
        display: flex;
        text-align: center;
    }

    .link-area {
        display: block;
        margin-top: 3vh;
        text-align: center;
        align-items: center;
    }

    .link-area a{
        color: #cdcdcd;
        font-size: 3vw;
        font-weight: 200;
    }

    .spliter {
        color: #fdd100;
        padding: 0vh 1vh;
    }

    #logo {
        text-align: center;
        margin: 6vh auto 3.5vh auto;
    }

    #logo img{
        width: 7.2vh;
    }
</style>


<body>
    <div class="middle-image">
        <img src="img/undraw_unlock_24mb.svg" id="girl">
    </div>

    <div class="circle_container">
        <div id="circle2" class="circlex"></div>
        <div id="circle3" class="circlex"></div>
        <div id="circle4" class="circlex"></div>
        <div id="circle5" class="circlex"></div>
        <div id="circle6" class="circlex"></div>
        <div id="circle7" class="circlex"></div>
        <div id="circle8" class="circlex"></div>
        <div id="circle9" class="circlex"></div>
    </div>

    <div class="main_title">
        <ul>
            <div id="ufun"><li><a>Ufun</a></li></div>
            <div id="circle1" class="circle"></div>
            <div id="discover"><li><a>text</a></li></div>
        </ul>
    </div>

    <div class="form">
        <div class="textbox">
            <i class="material-icons">account_circle</i>
            <input id="account" type="tel" class="mui-input-clear mui-input" placeholder="Phone">
        </div>

        <div class="textbox">
            <i class="material-icons">lock</i>
            <input id="password" type="password" class="mui-input-clear mui-input" placeholder="Password">
        </div>

        <div class="btn-container">
            <button type="button" class="btn" href="#">login</button>
        </div>

        <div class="mui-content-padded">
            <div class="link-area">
                <a id='reg' href="#">register</a>
                <span class="spliter">|</span>
                <a id='forgetPassword' href="#">fotget</a>
            </div>
        </div>

        <div id="logo">
            <img src="img/logo.png">
        </div>

    </div>
</body>
...