Здравствуйте!
http://nds.nika-llc.pw/
Проблема следующая. Друг попросил адаптировать под мобильные устройства сайт. Все работает, НО:
На главной странице есть заголовок, который масштабируется. И на маленьком экране просто исчезает.
Я решил сделать просто: сделать скриншот экрана и добавить его вместо текста, который не получается масштабировать.
Логика такая: на большом экране текст работает, видео фоном тоже.
На маленьком экране видео и текст отключаются (display: none), и вместо них включается изображение (скриншот) текста вместе с фоном. Работает на опере, на хроме почему-то нет.
Я уже голову сломал, не понимаю.
У кого есть какие мысли?
<div id="home">
<div class="fullscreen-bg">
<div class="overlay">
<h1>ЗАКОННАЯ ОПТИМИЗАЦИЯ НДС<br></h1>
<h2><div class="maintext">комиссия 1%, оплата после подтверждения</div></h2>
<h4><div class="maintext">специализируемся на отраслях: строительство, ремонт, стройматериалы</div><br></h4>
</div>
<video loop muted autoplay poster="video/plane.jpg" class="fullscreen-bg__video">
<source src="video/plane.mp4" type="video/mp4">
<source src="video/plane.webm" type="video/webm">
</video>
</div>
</div>
/* Главная страница */
.fullscreen-bg {
overflow: hidden;
z-index: -100;
position: relative;
height: 100%;
width: 100%;
padding-top:45%;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.overlay {
background: rgba(0,0,0,0.6);
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
z-index: 4;
}
.overlay h1 {
text-align:center;
color:#fff;
margin-top:17%;
}
.maintext {
text-align:center;
color:#fff;
}
@media (max-width: 800px) {
.fullscreen-bg {
background-image: url(../images/plane.JPG);
background-position: center center;
background-size: cover;
}
.fullscreen-bg__video { display: none; }
.overlay { display: none;}
}
