admin管理员组

文章数量:1530085

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 页面禁止缩放（华为平板浏览器可能失效） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726624820a1078649.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。