Question

所以基本上我已经谷歌搜索并研究了如何做到这一点，但是还没有设法让它发挥作用。我已经宣布了一个名为width的变量。我希望我的JS检查，如果屏幕的宽度小于660px，那么宽度应为140px，否则应为100px。变量宽度只应在我旋转设备＆＃34; phone＆＃34;时才会改变，但它不起作用？我希望变量应该在我旋转设备时检查屏幕的宽度。我已经工作了很长时间但无法解决它。我知道媒体查询，但我想在其他原因改变JS中的变量。

JS

var width = 0;
   function check()
   {

if (window.innerWidth < 660) 
  {
     width = 140;
  }
  else{
    width = 100;
  }
}


window.addEventListener("orientationEvent", check);
document.write(width);

Answer 1

该事件被称为deviceorientation，因此您的代码将是：

window.addEventListener('deviceorientation', check);

请记住，javascript中的事件都是小写的。

Answer 2

实际上你应该列出orientationchange MDN

var width = 0;

function check(){ 
  if (window.innerWidth < 660) {
    width = 140;
  } else {
    width = 100;
  }
  
  // Just for demo
  document.querySelector('body').innerHTML = width;
}


window.addEventListener("orientationchange", check);

Answer 3

我建议您查看 window.matchMedia 和 MediaQueryList 。

但请注意，这些是最新的实验性功能，可能并非所有浏览器都支持。

var mediaQueryList = window.matchMedia("(orientation: portrait)"); 
// Create the query list.
function handleOrientationChange(mql) { ... } 
// Define a callback function for the event listener.
mediaQueryList.addListener(handleOrientationChange); 
// Add the callback function as a listener to the query list.

handleOrientationChange(); // Run the orientation change handler once.

function handleOrientationChange(evt) {
  if (evt.matches) {
    /* The viewport is currently in portrait orientation */
  } else {
    /* The viewport is currently in landscape orientation */
  }
}

现在接下来的事情是在视口更改时调用changeWidth方法。

var width = 0;
function changeWidth() {

    if (window.matchMedia("(min-width: 600px)").matches) {
      /* the viewport is at least 600 pixels wide */
        width = 140;
    } else {
      /* the viewport is less than 600 pixels wide */
        width = 100;
    }

}

更多与文档相关的信息here。

在旋转Js上更改变量的值

3 个答案: