В моем javascript есть обратная связь, чтобы мой веб-сайт правильно отображался на мобильном Chrome. Проблема в том, что обратный удар, хотя и не нужен в IE, приводит к тому, что все в javascript для IE приводит к ошибке и перестает работать.
Я попытался просто заменить его на двойную кавычку, но это не сработало. Я также подумал о создании отдельной страницы javascript, которая будет работать только в IE или на настольных компьютерах, но это кажется неоптимальным. Предпочтительно строку кода можно изменить так, чтобы она имела одинаковый эффект и работала во всех браузерах.
Проблемная строка кода:
document.documentElement.style.setProperty('--vh', `${vh}px`);
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
body {
background-color: #333;
}
.module {
height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
margin: 0 auto;
max-width: 30%;
}
.module__item {
align-items: center;
display: flex;
height: 20%;
justify-content: center;
}
.module__item:nth-child(odd) {
background-color: #fff;
color: #F73859;
}
.module__item:nth-child(even) {
background-color: #F73859;
color: #F1D08A;
}
<div class="module">
<div class="module__item">20%</div>
<div class="module__item">40%</div>
<div class="module__item">60%</div>
<div class="module__item">80%</div>
<div class="module__item">100%</div>
</div>
Этот сценарий отсюда: https://css -tricks.com / трюк для просмотра портов-на-мобильном /
Это способ установить vh так, чтобы он был более статичным в chrome и firefox.