本文主要是介绍【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 = 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辣
这篇关于【NuxtJs】移动端禁止缩放的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
