vue 页面设置meta标签

最新推荐文章于 2024-08-28 00:18:03 发布

原创最新推荐文章于 2024-08-28 00:18:03 发布 · 3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #html

vue 同时被 3 个专栏收录

18 篇文章

订阅专栏

javascript

11 篇文章

订阅专栏

html

6 篇文章

订阅专栏

该博客介绍了如何在移动端页面中实现及取消双指缩放功能。在页面加载时，通过设置`<meta>`标签的`viewport`属性允许双指缩放；而在离开页面时，修改`viewport`内容以禁止缩放，确保用户体验的一致性。

created () {
    // 当前页面允许双指缩放
    document
      .querySelector('meta[name="viewport"]')
      .setAttribute('content', 'width=device-width, initial-scale=1')
  },
  beforeRouteLeave (to, from, next) {
    // 离开页面取消双指缩放
    document
      .querySelector('meta[name="viewport"]')
      .setAttribute(
        'content',
        'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
      )
    next()
  },