如何禁用具有內部窗口寬度的 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;
  }
  ...
}