Сайт реагирует на ПК, но не на мобильный - PullRequest
Новая
       67

Сайт реагирует на ПК, но не на мобильный

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

(извините за мой плохой английский sh, это не мой родной язык)

Я работаю над этим сайтом: http://www.smartandwise.co.kr/home/

Работает хорошо в браузере настольного компьютера, но один элемент не работает на мобильном телефоне.

слева: представление рабочего стола <- -> справа: представление мобильного телефона

I'm с использованием <meta name="viewport" content="width=device-width, initial-scale=1.0">

И

<noscript> <iframe src="//www.googletagmanager.com/ns.html?id=GTM-PV4KQ8" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript>

#home > .carousel-inner > .bg1 {
    background-image: url('../img/home_picture5.jpg');
    background-position: 100% 100%;
    background-size: cover;
    border-radius: 0%;
    opacity: 1;
    filter: blur(0px);
}

#home > .carousel-inner > .item {
    height: 900px !important;
    border-radius: 0%;
    opacity: 1;
    filter: blur(0px);
    box-shadow: none;
}

#home > .carousel-inner > .item > .container > .carousel-caption {
    top: 10%;
    width: 100%;
    left: 0;
}
#home > .carousel-inner > .item > .container > .carousel-caption > h1 {
    font-family: 'NBG-bold';
    font-size: 30px;
    text-shadow: none;
    color: #4eae49;
    font-weight: bold;
}
#home > .carousel-inner > .item > .container > .carousel-caption > p {
    font-family: 'NBG-light';
    font-size: 45px;
    text-shadow: none;
}
#home > .carousel-indicators {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    top: 100%;
    bottom: 0;
}
#home > .container {
    position: absolute;
    width: 100%;
    z-index: 10;
    top: 35%;
    margin: 0;
    padding: 0;
    text-align: center;
}
#home > .container > .row {
    width: 75%;
    margin: 0 auto;
    color: #ffffff;
}

#home > .container > .row > div.col-lg-4 > img.img-circle {
    transition: all 0.3s ease-in-out;
    transform: translateY(0px);
    border-radius: 0% !important;
}

#home > .container > .row > div.col-lg-4 > img.img-circle:hover {
    transform: translateY(-50px);
}

#home > .container > .row > div.col-lg-4 > div.title {
    width: 250px;
    height: 46px;
    margin: 0 auto 16px auto;
}
#home > .container > .row > div.col-lg-4 > div.title > div.bg {
    z-index: -1;
    position: absolute;
    width: 250px;
    height: 46px;
    background-color: #FFB000;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=15);
    opacity: 0;
}
#home > .container > .row > div.col-lg-4 > div.title > h2 {
    padding-top: 7px;
    color: #FFB000;
    font-weight: regular;
}
#home > .container > .carousel-indicators {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 16px;
    margin-bottom: 0;
    top: 0;
    bottom: 0;
}

@media (max-width: 899px) {
    #home > .carousel-inner > .item > .container > .carousel-caption > p {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    #home > .carousel-inner > .item > .container > .carousel-caption {
        width: 100% !important;
        height: auto;
    }
        #home > .carousel-inner > .bg1 {
        background-size: auto;
        background-repeat: no-repeat ;
    }

    #home > .carousel-inner > .item > .container > .carousel-caption > p {
        font-size: 25px;
    }
}


@media (min-width: 1200px) {
    #home {
        height: 600px !important;
    }
    #home > .container {
        top: 70%;
    }
    #home > .carousel-inner > .item > .container > .carousel-caption {
        top: 10%;
        backdrop-filter: blur(0px);
    }

    #home > .carousel-inner > .item > .container > .carousel-caption > h1,
    #home > .carousel-inner > .item > .container > .carousel-caption > p {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
    }
    #home > .carousel-inner > .item > .container > .carousel-caption > h1.init {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
<!-- Home -->
<div id="home" class="carousel slide" data-ride="carousel">
    <!-- Background Images -->
    <div class="carousel-inner" role="listbox">
        <div class="item active bg1 ball">
            <div class="container">
                <div class="carousel-caption col-lg-6">
                    <h1>Grow With You</h1>
                    <div class="divider2 text-center">
                    <span></span></div>
                    <p>스마트앤와이즈는 연결중심의 미래 교육을 위한 </br>지능형 학습 시스템 솔루션을 제공합니다. </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Circular Images -->
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <img class="img-circle" src="img/icon8.png" alt="home-complete">
                <div class="title">
                    <div class="bg"></div>
                    <h2>미래 학습 환경</h2>
                </div>
                <p>
                    미래 환경에 요구되는 학습 시스템 및<br/>
                    도구를 직접 개발 합니다.
                </p>
            </div>
            <div class="col-lg-4">
                <img class="img-circle" src="img/icon9.png" alt="home-24h">
                <div class="title">
                    <div class="bg"></div>
                    <h2>학습자 중심 시스템</h2>
                </div>
                <p>
                    다양한 학습자의 수준과 경험을<br/>
                    고려한 환경을 개발합니다
                </p>
            </div>
            <div class="col-lg-4">
                <img class="img-circle" src="img/icon10.png" alt="home-speed">
                <div class="title">
                    <div class="bg"></div>
                    <h2>지능형 시스템</h2>
                </div>
                <p>
                    학습 데이터 기반<br/>
                    학습 멘토 인공지능 기술을 개발합니다.
                </p>
            </div>
        </div>

        <ol class="carousel-indicators">
            <li data-target="#home" data-slide-to="0" class="active"></li>
        </ol>

    </div>
</div>

Этот код использовался на детали, которая создает проблему.

Пожалуйста, помогите

Ответы [ 2 ]

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

Похоже, что вы можете решить свою проблему, добавив следующее правило: 

.navbar,
#home > .carousel-inner > .item {
    width: 100vw;
}

И, похоже, вам могут потребоваться дополнительные настройки для этих светящихся частиц на экранах определенных размеров.

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

try 

    background: url("../assets/images/admission/fototron_header.png")
      no-repeat center;
    background-size: cover;

Распространенной проблемой является размер изображения, которое не задано в мобильном окне просмотра, которое приводит к переполнению страницы, обязательно установите overflowX: hidden; к некоторому контейнеру с большой картинкой или вы можете сделать `` `

width:100%;
height:auto;
...