VUE 页面禁止缩放（华为平板浏览器可能失效）

h5页面移动端禁止缩放、web页面禁止浏览器缩放移动端优先，可禁止用户缩放和双击放大；在App.vue中的script内的方法里加入以下代码：window.onload = function() {document.addEventListener('touchstart', function(event) {if (event.touches.length > 1) {event.prev

唐屁屁儿

7135人浏览 · 2022-03-10 14:05:26

唐屁屁儿 · 2022-03-10 14:05:26 发布

h5页面移动端禁止缩放、web页面禁止浏览器缩放

移动端优先，可禁止用户缩放和双击放大；

在App.vue中的script内的方法里加入以下代码：

window.onload = function() {
			document.addEventListener('touchstart', function(event) {
				if (event.touches.length > 1) {
					event.preventDefault()
				}
			})
			document.addEventListener('gesturestart', function(event) {
				event.preventDefault()
			})
		}

pc端移动端都在index.html里<head>标签里写上下面代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

pc端（或 ios移动端）在index.html里<head>标签里写上下面代码：

<script>
    document.addEventListener('mousewheel', function (e) {
      e = e || window.event;
      if ((e.wheelDelta && event.ctrlKey) || e.detail) {
        event.preventDefault();
      }
    }, {
      capture: false,
      passive: false
    });
  </script>

到这里为止绝大部分机型设备都能被禁止掉双指/双击缩放，但开发过程中页面上有输入框，这个时候就会发现明明禁止掉的缩放，页面怎么又放大了？

这是因为给输入框设置比页面的 font-size 更大的值，比如页面设置font-size: 14px，输入框需设置font-size: 14.5px以上则聚焦时页面不会放大。

综合以上页面缩放问题完美解决！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^