【NuxtJs】移动端禁止缩放

方法一: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 = 0document.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辣