有时候，我们希望在Vue.js应用中为移动浏览器展示不同的内容。我们可以通过检查浏览器的用户代理来确定浏览器是否为移动浏览器，并相应地显示内容，在Vue.js应用程序中为移动浏览器显示不同的内容。
例如，我们可以写：

<!-- 堆代码 duidaima.com --->
<template>
  <div id="app">
    <div v-if="!isMobile()">desktop</div>
    <div v-else>mobile</div>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    isMobile() {
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
      );
    },
  },
};
</script>

我们添加了一个方法，该方法检查 isMobile 字符串属性，以查看它是否包含任何移动浏览器的关键字。然后在模板中，我们调用 v-if 指令中的 isMobile 方法来判断浏览器是否为非移动设备。如果不是，则显示“desktop”，否则使用 v-else 指令显示“mobile”。

此外，我们可以检查屏幕的宽度，并相应地显示内容。例如，我们可以写成：

<template>
  <div id="app">
    <div v-if="!isMobile">desktop</div>
    <div v-else>mobile</div>
  </div>
</template><script>
export default {
  name: "App",
  data() {
    return {
      isMobile: true,
    };
  },
  mounted() {
    this.onResize();
    window.addEventListener("resize", this.onResize, { passive: true });
  },
  methods: {
    onResize() {
      this.isMobile = window.innerWidth < 600;
    },
  },
  beforeDestroy() {
    if (typeof window !== "undefined") {
      window.removeEventListener("resize", this.onResize, { passive: true });
    }
  },
};
</script>

我们使用 addEventListener 来监听 'resize' 的resize事件。如果触发了，那么我们就运行 onResize 方法，根据屏幕大小设置 isMobile 响应式属性。如果 window.innerWidth 小于600，则将其设置为 true 。否则，我们将其设置为 false 。

在 beforeDestroy 钩子中，我们调用window.removeEventListener 来移除resize事件监听器。