Замена бэктиков в Internet Explorer

Question

В моем 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.

Answer 1

Литеральный синтаксис шаблона является функцией ES6, как и ключевое слово let. ES5 может сделать это вместо var и обычной конкатенации строк:

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
var 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');

Но это может быть очень утомительно, когда у вас есть значительное количество кода, и затрудняет чтение кода. Лучшим общим решением было бы сначала выполнить код через Babel , что автоматически переведет синтаксис ES6 + в синтаксис ES5. (Обратите внимание, что Babel по умолчанию передает только синтаксис - ES6 + объекты и методы , такие как Array.prototype.includes, будут работать в древних браузерах, таких как IE, только если вы также используете полифилл)