если у меня на телефоне не загружается фреймы сайта в chrome, то на телефоне жены работает отлично - PullRequest
Новая
       0

если у меня на телефоне не загружается фреймы сайта в chrome, то на телефоне жены работает отлично

0 голосов
/ 19 апреля 2020

Я создал веб-сайт (мой первый, так как я новичок во всем, что касается веб-кодирования), и по какой-то причине веб-сайт работает странно на моем телефоне.

При открытии моего сайта с помощью Google chrome mobile загружает все элементы, но через пару секунд мигает, и все кадры становятся белыми, с серой квадратной гранью в левом верхнем углу. (у меня есть плюс 6). Я пробовал другие мобильные браузеры, и firefox - единственный, у которого нет проблемы на моем телефоне. На телефоне моей жены мой веб-сайт работает плавно, и она не сталкивается с этой проблемой, также на рабочем столе он работает нормально.

Я использовал 2 фрейма в карусели (bootstrap) и один фрейм в элементе div. Ясно, что фреймы вызывают проблему, но почему только на моем телефоне, и почему только с chrome?

Вы можете просмотреть веб-сайт здесь: https://www.kijkrond.in/testwebsite

/* CAROUSEL CSS */

/* aligning iFrame on top of image in carousel */
.posRelative{
    position: relative;
    overflow: hidden;
}

.posAbsolute{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.margintopcarousel{
    margin-top: -7rem;
}

.center-captions{
    top: 50%;
    transform: translateY(-50%);
    bottom: initial;
    background-color: rgba(0,0,0,0.7);
}

.center-captions2{
    background-color: rgba(0,0,0,0.7);
}

.center-captions h1{
    font-size: 450%;
    font-family: 'Thasadith', sans-serif;
}

.center-captions p{
    font-size: 150%;
}


@media screen and (max-width: 1500px){
    
    .center-captions h1{
    font-size: 300%;
    font-family: 'Thasadith', sans-serif;
    }
    
    .margintopcarousel{
    margin-top: 3.5rem;
    }
    
    .center-captions p{
    font-size: 120%;
    }
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    filter: invert(1);
    
}

@media screen and (max-width: 1000px){
    
    .center-captions h1{
    font-size: 200%;
    font-family: 'Thasadith', sans-serif;
    }
    
    .margintopcarousel{
    margin-top: 3.5rem;
    }
    
    .center-captions p{
    font-size: 80%;
    }
}

@media screen and (max-width: 500px){
    
    .center-captions h1{
    font-size: 80%;
    font-family: 'Thasadith', sans-serif;
    }
    
    .margintopcarousel{
    margin-top: 3.5rem;
    }
    
    .center-captions p{
    font-size: 40%;
    }
    
    .center-captions2{
    background-color: rgba(0,0,0,0.7);
    font-size: 40%;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: .5rem;
}
}


/* LATEST PROJECT */

.project-image {
    height: 800px;
    position: relative;
    padding-left: 0;
    padding-right: 0;
    background-color: #1e1e1e;
}

.project-iframe{
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    margin-left: 
}

.project-iframe-textoverlay{
    position: absolute;
    background-color: rgba(0,0,0,0.7);
    color: white;
    height: 50%;
    width: 50%;
    top: 25%;
    left: 25%;
    box-shadow: 0px 7px 8px -1px rgba(0,0,0,0.75);
    border-radius: 15px;
    
}

.project-iframe-textoverlay:hover{
    position: absolute;
    background-color: rgba(0,0,0,0.7);
    color: white;
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
    transition: 0.2s;
    padding: 25%;
    border-radius: 0px;
}

.project-iframe-textoverlay h2{
    margin-top: 3rem;
    margin-bottom: 1rem;
    margin-right: 2rem;
    margin-left: 2rem;
}

.project-iframe-textoverlay p{
    margin-top: 3rem;
    margin-right: 2rem;
    margin-left: 2rem;
    vertical-align: middle;
    text-decoration: none;
    color: white;
}


/* 4 Reasons 360 CSS */

.reasons360{
    background-color: white;
    
    padding-left: 8%;
    padding-right: 8%;
    padding-top: 4%;
    padding-bottom: 4%;
}

.reasons360 img{
    margin-top: 3rem;
}

.reasons360 p{
    margin-top: 1.8rem;
}

.reasons360 h2{
    margin-bottom: 8%;
}
 <!-- HEADER -->
      <header id="Header">
            <div id="carouselExampleControls" class="carousel slide margintopcarousel" data-ride="carousel" data-interval="9000" data-touch="true">
                
                <ol class="carousel-indicators">
                <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                </ol>
                
                <div class="carousel-inner">
                    <!-- Carousel item 1 -->
                    <div class="carousel-item active">
                        <div class="posRelative">
                            <!-- Background image for size -->
                            <img src="img/pictures/Empty_web.png" class="d-block w-100" alt="Loading 360 image...">
                            <!-- iFrame element -->
                            <iframe class="posAbsolute" src="https://www.kijkrond.in/stationroeselare/" alt="360 foto" >
                            </iframe>
                        </div>
                        <div class="carousel-caption center-captions">
                            <h1>WELKOM bij KIJKROND</h1>
                            <p>360° &amp; interieur/architectuur fotografie</p>
                        </div>
                    </div>
                    <!-- Carousel item 2 -->
                    <div class="carousel-item">
                        <img src="img/pictures/_MG_8272-Editnaamloos.jpg" class="d-block w-100" alt="Interieur foto keuken">
                        <div class="carousel-caption center-captions2">
                            <p>Interieurfoto keuken</p>
                        </div>
                    </div>
                    <!-- Carousel item 3 iFrame -->
                    <div class="carousel-item">
                        <div class="posRelative">
                            <!-- Background image for size -->
                            <img src="img/pictures/Empty_web.png" class="d-block w-100" alt="Loading 360 image...">
                            <!-- iFrame element -->
                            <iframe class="posAbsolute" src="https://www.kijkrond.in/laatsteproject/" alt="360 foto" >
                            </iframe>
                        </div>
                        <div class="carousel-caption center-captions2">
                            <p>360° foto electro zaak</p>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
      </header> 
      
      
<!-- Latest Project & 4 REASONS 4 360 -->
      
      <div class="container-fluid">
          <div class="row">
              
              <!-- LATEST PROJECT -->
              <div id="laatsteproject" class="col-lg-6 project-image">
                  <iframe class="project-iframe" src="https://www.kijkrond.in/laatsteproject/" alt="360 foto">    
                        </iframe>
                  <a href="https://kijkrond.in/dumoulinservice/" target="_blank">
                      <div class="project-iframe-textoverlay text-center">
                      <div class="row">
                          <div class="col-sm-12">
                              <h2>Laatste Project</h2>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-sm-12">
                              <p>Electrozaak <b>Dumoulin Service</b> te Torhout koos voor een volledige virtual tour van hun zaak. Klanten kunnen zelfs online shoppen op hun webwinkel terwijl ze virtueel in de winkel staan. Ontdek het zelf!</p>
                              <!--<p> <a class="divLink" href="https://kijkrond.in/dumoulinservice/" target="_blank">Bezoek Dumoulin Service virtueel</a></p>-->
                          </div>
                      </div>
                  </div>
                  </a>
              </div>
              
              <!-- WAAROM 360 -->
              <div id="waarom" class="col-lg-6 reasons360">
                  <div class="row">
                      <div class="col-sm-12">
                          <h2>Waarom 360° foto's</h2>
                      </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-2">
                        <img src="img/icons/WebsiteMiddel%204.png" alt="Website-Icon">
                    </div>
                    <div class="col-sm-10">
                        <p>Deze beelden zijn perfect integreerbaar in uw bestaande website. Unieke beelden als deze zorgen ervoor dat klanten langer op uw website vertoeven. Dit resulteert in een grotere interesse in uw zaak.</p>
                    </div>
                  </div> 
                  <div class="row">
                    <div class="col-sm-2">
                        <img src="img/icons/StreetviewMiddel%203.png" alt="Streetview-Icon">
                    </div>
                    <div class="col-sm-10">
                        <p>Ze zijn een grote meerwaarde op Google Streetview. Allemaal hebben we al het poppetje op de straten geplaatst om te zien waar we exact moeten zijn of hoe de streek eruitziet. Laat klanten uw zaak ervaren alsof ze er zelf staan</p>
                    </div>
                  </div> 
                  <div class="row">
                    <div class="col-sm-2">
                        <img src="img/icons/SocialmediaMiddel%206.png" alt="Share-Icon">
                    </div>
                    <div class="col-sm-10">
                        <p>Uitpakken met 360° beelden op social media trekt aandacht. Ideaal om een campagne mee in de verf te zetten.</p>
                    </div>
                  </div> 
                  <div class="row">
                    <div class="col-sm-2">
                        <img src="img/icons/BelevingMiddel%205.png" alt="Beleving-Icon">
                    </div>
                    <div class="col-sm-10">
                        <p>360° foto's kunnen verwerkt worden in een virtuele tour van uw bedrijf. Deze is tevens naadloos integreerbaar in uw website en zorgt voor een beleving voor de klant doormiddel van de aanwezig interactieve elementen. Zie ons laatste project als voorbeeld.</p>
                    </div>
                  </div> 
              </div>
          </div>
      </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...