css - проблема выравнивания на мобильном устройстве, но не на эмуляторе chrome - PullRequest
Новая
       1

css - проблема выравнивания на мобильном устройстве, но не на эмуляторе chrome

1 голос
/ 18 марта 2020

Итак, я создал целевую страницу, которая выглядит так на chrome инструментах разработчика (iPhone X):

enter image description here

Однако, открытие ссылка на моем iPhone X имеет некоторые проблемы с выравниванием, как показано ниже:

enter image description here

Я не знаю, почему он так себя ведет iphone моделей, где, как я тестировал на других телефонах (android), он работает нормально, как на первом рисунке.

Код: 

<body>

    <div class="backgroundImage">
        <div class="text-right p-3">
            <a href="/register-dealer " class="btn  p-2"><b>{{ __('Be A Dealer') }}</b></a>
        </div>


        <div class="container mt-4 mb-4">
            <div class="row">
                <div class="col-4 col-md-4 mx-auto my-auto">
                    <img class="mw-100" src="{{ asset('storage/logo/Bujishu_logo.png') }}" alt="Bujishu">
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row mb-4">
                <div class="col-12 col-md-8 offset-md-2 text-center">
                    <h2 class="bujishu-motto">
                        A home is made of
                        <i>
                            <p class="bujishu-recursive">hopes</p>
                        </i>
                        and
                        <i>
                            <p class="bujishu-recursive">dreams</p>
                        </i>
                    </h2>
                    <h2 class="bujishu-motto">
                        Let us
                        <i>
                            <p class="bujishu-recursive">inspire</p>
                        </i>
                        you to build the perfect home!
                    </h2>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-6 col-md-4 offset-md-3 ">
                    <a href="/login " class="grad2"><img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login"></a>

                </div>

                <div class="col-6 col-md-4  ">

                    <a href="/register" class="grad2"><img class="landing_button"  src="{{ asset('storage/buttons/Sign-Up.png') }}" alt="Sign Up"></a>
                </div>
            </div>
        </div>

    </div>

    </div>
</body>

CSS: 

.backgroundImage {
    background-image: url(/images/Bujishu_Landing_Page_Desktop.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100vw 100vh;
    width: 100vw;
    height: 100vh;
}

* {
    box-sizing: border-box;
}

a.btn {
    color: black;
    border-radius: 10px;
    background-color: #fbcc34;
    border-color: #8b878d;
}

a.btn-dealer {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
}
.bujishu-motto {
    color: rgb(235, 232, 232);
}

.bujishu-recursive {
    display: inline;
    font-size: 75px;
    font-family: "Dancing Script" cursive;
    font-family: "Tangerine", cursive;
}

.content {
    text-align: center;
    position: relative;
    // top: 50%;
}

.logo {
    text-align: center;
}

.landing_button {
    height: 70%;
}

// Add media query for mobile devices
@media (max-width: 767px) {
    .bujishu-motto {
        font-size: 100%;
    }
    .bujishu-recursive {
        font-size: 200%;
    }

    .container {
        text-align: center;
        position: relative;
    }

    a.btn {
        font-size: 10px;
    }

    .backgroundImage {
        background-image: url(/images/Bujishu_Landing_Page_Mobile.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .logo {
        width: 300%;
        margin-left: 350%;
        margin-top: 200%;
    }
    .landing_button {
        height: 30%;
    }
}

Как мне решить эту проблему?

1 Ответ

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

вот мое решение, если вы используете bootstrap 4, то большая часть css уже написана, поэтому нам просто нужно найти className, чтобы использовать его. Также не забудьте добавить мета для окна просмотра устройства контроля размеров и масштабирования страницы. <meta name="viewport" content="width=device-width, initial-scale=1"> Я только что изменил некоторые из ваших работ, и вот, надеюсь, это сработает для вас. 

`<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
    .backgroundImage {
        background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsumav894Y7X6zV2MGvKK-GleoCQzvxWhpwAWYYHbbYIT6-b-USg&s);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
        min-height: 100vh;
    }

    * {
        box-sizing: border-box;
    }

    a.btn {
        color: black;
        border-radius: 10px;
        background-color: #fbcc34;
        border-color: #8b878d;
    }

    a.btn-dealer {
        float: right;
        margin-right: 20px;
        margin-top: 20px;
    }

    .bujishu-motto {
        color: rgb(235, 232, 232);
    }

    .bujishu-recursive {
        display: inline;
        font-size: 75px;
        font-family: "Dancing Script" cursive;
        font-family: "Tangerine", cursive;
    }

    .content {
        text-align: center;
        position: relative;
        // top: 50%;
    }

    .logo {
        text-align: center;
    }

    img.landing_button {
        height: 100px;
    }

    @media (max-width: 767px) {
        .bujishu-motto {
            font-size: 100%;
        }
        .bujishu-recursive {
            font-size: 200%;
        }
        img.landing_button {
            height: 70px;
        }
    }

    @media(min-width: 768px) {
        .bottom-logo-wrapper {
            width: 50%;
        }
    }
</style>

<section class="backgroundImage">
    <div class="container">
        <div class="text-sm-right text-center p-3">
            <a href="/register-dealer " class="btn  p-2"><b>{{ __('Be A Dealer') }}</b></a>
        </div>

        <div class="mt-4 mb-4">
            <div class="d-flex aligin-items-center justify-content-center m-auto">
                <img class="mw-100" src="https://i.pinimg.com/originals/a4/b9/53/a4b953b58aa7d733a7dc50d597955231.jpg" alt="Bujishu">
            </div>
        </div>

        <div class="row mb-5">
            <div class="col-12 col-md-8 offset-md-2 text-center">
                <h2 class="bujishu-motto">
                    A home is made of
                    <i>
                        <p class="bujishu-recursive">hopes</p>
                    </i>
                    and
                    <i>
                        <p class="bujishu-recursive">dreams</p>
                    </i>
                </h2>
                <h2 class="bujishu-motto">
                    Let us
                    <i>
                        <p class="bujishu-recursive">inspire</p>
                    </i>
                    you to build the perfect home!
                </h2>
            </div>
        </div>

        <div class="bottom-logo-wrapper aligin-items-center d-flex justify-content-around m-auto">
            <a href="/login " class="grad2"><img class="landing_button" src="https://i.pinimg.com/originals/a4/b9/53/a4b953b58aa7d733a7dc50d597955231.jpg" alt="Login"></a>
            <a href="/register" class="grad2"><img class="landing_button" src="https://i.pinimg.com/originals/a4/b9/53/a4b953b58aa7d733a7dc50d597955231.jpg" alt="Sign Up"></a>
        </div>
        <br>
        <br>
    </div>
</section>

`

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...