ios Safari 无法禁止缩放的问题

news/2024/7/20 20:29:57 标签: ios, safari, javascript

通常,我们会通过meta标签来实现禁止页面缩放的效果

<meta id="meta-viewport" name="viewport"
    content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

但在实际开发过程中,发现部分safari浏览器下,仍可以进行缩放,即meta设置在 Safari 内无效了
一下代码都在vue的index.html中进行配置

解决方案

iOS 里有一组双指手势操作的事件:gesturestart、gesturechange、gestureend
在上面的 js 方法里加入下面的事件监听:

<script>
    window.onload = function() {
      // 阻止双击放大
      var lastTouchEnd = 0;
      document.addEventListener('touchstart', function(event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      });
      document.addEventListener('touchend', function(event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      }, false);

      // 阻止双指放大
      document.addEventListener('gesturestart', function(event) {
        event.preventDefault();
      });
    }
  </script>

http://www.niftyadmin.cn/n/875653.html

相关文章

safari对100vh的兼容问题

需求&#xff1a;在以下的布局要求下&#xff0c;利用flex布局来实现&#xff0c;但需要在最外层给一个固定高度来控制页面高度及可滑动区域的可视高度很自然的利用100vh来控制最外层的高度&#xff0c;但测试过程中&#xff0c;发现safari浏览器中&#xff0c;页面的高度出现了…

react配置路由

1、安装依赖 npm i react-router react-dom react-router-dom react-router-config -S2、配置路由&#xff1a;routes.tsx import Index from ../views/index; import PLP from ../views/plp; import PDP from ../views/pdp; import Login from ../views/login; import My fr…

react使用less

1、安装依赖 npm i less less-loader -D2、暴露配置文件 使用create-react-app 创建的项目默认是看不到webpack配置文件的&#xff0c;需要先暴露出来&#xff0c;然后才能修改里面的配置信息。 npm run eject3、配置less 打开webpack.config.js&#xff0c;搜索oneOf&…

父子组件,父孙组件之间的通信 provide与inject

一、概念 这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖&#xff0c;不论组件层次有多深&#xff0c;并在起上下游关系成立的时间里始终生效。 provide&#xff1a;是一个对象&#xff0c;或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西…

发布与更新自己的npm包

一、注册npm账号 https://www.npmjs.com/ 二、发布npm 建议在github/gitee上新建一个代码仓库1、新建目录vue-custom-alert 新建文件名时&#xff0c;需要到npm官网进行搜索&#xff0c;看包名是否有重复2、执行npm init 此时会自动生成package.json文件 需要新建一个in…

vue常见面试题小结

1.vue优点 答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb; 简单易学:国人开发,中文文档,不存在语言障碍,易于理解和学习; 双向数据绑定:保留了angular的优点,在数据操作方面更为简单; 组件化:保留了react的优点,实现了html的封装和复用,在构建页面应用…

uniapp请求注意事项

在main.js文件中配置&#xff1a;//Vue.prototype.$baseUrl"http://192.168.1.164/api" //线下接口 Vue.prototype.$baseUrl"https://m.demo.com/api" //线上接口在demo.vue页面中请求&#xff1a; //GET-请求数据 getInfo(){uni.request({url: ${thi…

async和await的简单说明

async generator函数的语法糖 async修饰异步函数函数返回值是promise对象async函数的返回值为promise的resolved的值 await await只出现在async函数的内部&#xff0c;否则报错await是等待的意思&#xff0c;等待后面代码的执行await一般情况下是异步代码&#xff08;异步函数…