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

Question

The page I am working on has a tilt effect, which affects the orientation of the site body. I want to turn this off when the page reaches a mobile viewport; I have looked and tried a few thing but can't seem to get the effect I want. The code below is what i am using. This script runs separate from my main JS code.

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 changes won't remove themselves, so you'll have to remove the transform manually if the browser window is under your desired size.

Check on window resize,

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

And also make sure not to reapply it if the user moves their mouse.

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