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

Question

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

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

最后我在一个方法中检查了设备类型。

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

并且我使用 isMobile() 方法为每个设备定义我的条件。我的问题是如何将此 isMobile() 方法用作 computed 属性因为我只有 return 一个布尔值。在没有 even listener 的情况下可以这样使用吗？因为它到目前为止工作正常。但我正在寻找一个更统一的解决方案，因为我是 VueJs 的新手。提前致谢。

Answer 1

很棒的文章，在 JavaScript right here

中展示了执行此操作的几种不同方法

Answer 2

您可以使用 created 挂钩代替 methods，它将执行 isMobile DOM 加载之前的函数意味着您可以在加载网格数之前识别设备类型

像这样：

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

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

VueJs way to detect a mobile device, when we need to render two different views, with respect to the device type

vuejs3