Медиа-запросы применяются, но не работают на смартфонах. Почему? - PullRequest
Новая
       16

Медиа-запросы применяются, но не работают на смартфонах. Почему?

0 голосов
/ 25 октября 2019

Я добавил медиазапросы для удаления анимации при просмотре моей страницы на мобильном устройстве. Для моего планшета Samsung проблем нет. Все применяется и работает отлично.

Для двух смартфонов (HTC U Ultra и старого Samsung) применяются медиазапросы (я вижу, что в режиме разработчика в качестве удаленного устройства), как показано animation: none !important;, но анимация все еще сохраняетсяиграл. Итак, у кого-нибудь есть предположение, почему это происходит?

Я пытался добавить (max-width: 1200px), но это тоже не сработало.

Вы можете увидеть весь проект на http://priceless -hopper-df066a.netlify.com или как git-репозиторий https://github.com/lime-11/osteopathie-mehl.git

@media (any-hover: none) {
  #landing-wrapper-index {
    #parallax-img1 {
      display: none;
    }
    #parallax-img2 {
      display: none;
    }
    button {
      animation: none !important;
      opacity: 1;
    }
    .landing-index {
    img {
      animation: none !important;
      opacity: 1;    
      }
    .text-logo {
      animation: none !important;
      opacity: 1;
    }
  } 
  } 
}

 if(typeof window !== "undefined" && window.innerWidth > 1199.99) {
        return (
            <div id="landing-wrapper-index">
                <img id="parallax-img1" className="parallax" parallax="-0.025" src={require('../../img/Landing_bg_paralax.png')} alt="bg first"/>
                <img id="parallax-img2" className="parallax" parallax="0.05" src={require('../../img/Landing_bg_paralax_gespiegelt.png')} alt="bg second"/>
                <div className="landing-index parallax" parallax="-0.15" id="landing">           
                    <img id="enzo" src={require('../../img/Enzo_white.svg')} alt="Enzo Logo"/>
                    <div className="text-logo">
                        <span className="text-logo-osteo">OSTEOPATHIE</span>
                        <div className="text-logo-green">
                            <hr></hr>
                            <span className="text-logo-and">by</span>
                            <hr></hr>
                        </div>                
                        <span className="text-logo-name">LISA-MARIE MEHL</span>
                    </div>                       
                </div>
                <Link to="/kontakt"><button className="btn">GET STARTED</button></Link>
            </div>       
        )
    } else {
        return (
            <div id="landing-wrapper-index">
                <div className="landing-index" id="landing">           
                    <img id="enzo" src={require('../../img/Enzo_white.svg')} alt="Enzo Logo"/>
                    <div className="text-logo">
                        <span className="text-logo-osteo">OSTEOPATHIE</span>
                        <div className="text-logo-green">
                            <hr></hr>
                            <span className="text-logo-and">by</span>
                            <hr></hr>
                        </div>                
                        <span className="text-logo-name">LISA-MARIE MEHL</span>
                    </div>                       
                </div>
                <Link to="/kontakt"><button className="btn">GET STARTED</button></Link>
            </div>       
        )
    }
...