如何禁用具有内部窗口宽度的 JavaScript

Question

我正在处理的页面具有倾斜效果，这会影响站点正文的方向。 当页面到达移动视口时，我想关闭它； 我已经查看并尝试了一些东西，但似乎无法获得我想要的效果。 下面的代码是我正在使用的。 该脚本与我的主要 JS 代码分开运行。

window.addEventListener("mousemove",function(e) {

  var width = window.innerWidth;
  var height = window.innerHeight;
  var clientHeight = document.body.clientHeight;
  var skew = {};
  skew.y = (20 * ((e.x / width) - 0.5));
  skew.x = -(20 * ((e.y / height) - 0.5));

  document.body.style.webkitTransform = "perspective("+clientHeight+"px) rotateX("+skew.x+"deg) rotateY("+skew.y+"deg)";

});

Answer 1

CSS 更改不会自行删除，因此如果浏览器窗口低于您所需的大小，您必须手动删除转换。

检查窗口调整大小，

window.addEventListener('resize', function() {
  if (window.innerWidth < 568) {
    document.body.style.webkitTransform = '';
  }
});

如果用户移动鼠标，还要确保不要重新应用它。

// This is the function you already have
window.addEventListener('mousemove', function(e) {
  if (window.innerWidth < 568) {
    return;
  }
  ...
}