JS 如何根据 CSS media query 的不同结果动态地更新？

Question

vue官方文档中有下面一段

<Teleport :disabled="isMobile">
  ...
</Teleport>

这里的 isMobile 状态可以根据 CSS media query 的不同结果动态地更新。

请问这句意思是用何种方式判断 isMobile 的值，我查了下有一个matchMedia()函数，
但是不确定，
判断 isMobile 是判断 window.innerWidth 好一点还是别的？
感谢。

Answer 1

比较有意思，matchMedia 这个函数也不错，但是就是需要把 CSS 中的媒体查询又拿到 JS 中再写一次，如果 CSS 里面的改了的话，又要改 JS 里面的，如果漏掉了就不对了。

搜索了一下，发现有个方案，就是在媒体查询给一个元素，添加一个 CSS 属性，然后用 JS 去获取这个属性，从而来判断，比如下面这样，创建一个 CSS ，然后用 JS 创建一个元素并设置成对应的 class 然后获取计算后的样式中的 z-index 从而判断。

/* default state */
.state-indicator {
  position: absolute;
  top: -999em;
  left: -999em;

  z-index: 1;
}

/* small desktop */
@media all and (max-width: 1200px) {
  .state-indicator {
    z-index: 2;
  }
}

/* tablet */
@media all and (max-width: 1024px) {
  .state-indicator {
    z-index: 3;
  }
}

/* mobile phone */
@media all and (max-width: 768px) {
  .state-indicator {
    z-index: 4;
  }
}

// Create the state-indicator element
var indicator = document.createElement('div')
indicator.className = 'state-indicator'
document.body.appendChild(indicator)

// Create a method which returns device state
function getDeviceState () {
  return parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10)
}

window.addEventListener('resize', function () {
  console.log(getDeviceState())
})

这样有一些缺陷，就是可能这些属性会产生一些副作用，因为这些都是有效的的 CSS 属性，可能会影响到你的页面，如果你不考虑过旧设备的兼容性的话， CSS 自定义属性（变量） 是个不错的选择。

参考

• Device State Detection with CSS Media Queries and JavaScript
• css - Detect dynamic media queries with JavaScript without hardcoding the breakpoint widths in the script? - Stack Overflow