当我们需要根据设备类型渲染两个不同的视图时，VueJs 检测移动设备的方法

Question

我需要根据设备类型更改要在网格视图中显示的元素数量。适用于移动视图和桌面视图。我经历了很多建议，比如

• 检查设备屏幕尺寸
• 检查设备类型

最后我最终检查了方法内的设备类型。

methods: {
  isMobile() {
    if (screen.width <= 760) {
      return true
    } else {
      return false
    }
  },
},

我使用 isMobile() 方法来定义每个设备的条件。我的问题是如何使用这个 isMobile() 方法作为计算属性，因为我只返回一个布尔值。在没有均匀监听器的情况下这样使用可以吗？因为到目前为止它运行良好。但我正在寻找一个更统一的解决方案，因为我是 VueJs 的新手。提前致谢。

Answer 1

您可以使用创建的钩子而不是方法，它会在 DOM 加载之前执行isMobile函数，这意味着您可以在加载网格数量之前识别设备类型

像这样：

created(){
 isMobile() {
    if (screen.width <= 760) {
      return true
    } else {
      return false
    }
  },    
}