【NuxtJs】移动端禁止缩放

移动端禁止缩放问题

• 方法一:nuxt.config.js配置head
• 方法二：nuxt项目新建一个plugins文件

方法一:nuxt.config.js配置head

 head: {
meta: [
      { charset: 'utf-8' },
      { name: 'format-detection', content: 'telephone=no' },
      { name: 'viewport', content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0' }
    ],
}

核心代码 maximum-scale=1.0,user-scalable=0

user-scalable标识是否允许对页面进行缩放，取值有两个yes和no。设置为no则不允许进行页面缩放了。

此种方法在大多数移动端有效，但在safari失效，如果是nuxt项目新建一个plugins文件

方法二：nuxt项目新建一个plugins文件

// disable-scale.js
if (process.browser) {
  window.onNuxtReady(app => {
    //   禁止双击缩放
    document.documentElement.addEventListener(
      'touchstart',
      function(event) {
        if (event.touches.length > 1) {
          event.preventDefault()
        }
      },
      false
    )
    // 禁止双指缩放
    var lastTouchEnd = 0
    document.documentElement.addEventListener(
      'touchend',
      function(event) {
        var now = Date.now()
        if (now - lastTouchEnd <= 300) {
          event.preventDefault()
        }
        lastTouchEnd = now
      },
      false
    )
  })
}

在config文件里面plusgins下面加上

{ src: '~plugins/disable-scale', ssr: false },

就ok辣