Question

我在JavaScript中加了个勾号，以使我的网站在移动chrome上正确呈现。问题在于，虽然在IE中不需要，但反引号却会导致IE的javascript中的所有内容出错并停止工作。

我试图简单地用双引号代替它，但这没有用。我还考虑过制作一个仅在IE或台式机上运行的单独的javascript页面，但这似乎不是最佳选择。最好更改代码行，使其具有相同的效果，并在所有浏览器中都可以使用。

有问题的代码行是：

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/the-trick-to-viewport-units-on-mobile/

这是一种设置vh的方法，以使其在chrome和firefox中更加静态。

Answer 1

模板文字语法是let关键字的ES6功能。 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）仅在使用polyfill的情况下才能在IE等古老的浏览器中使用也是

Internet Explorer中的反引号替代

1 个答案: