禁止safari浏览器网页双击缩放功能

普通浏览器

普通浏览器,只需要增加meta标签禁止缩放功能就行了

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  • user-scalable=no或0 //禁止双指缩放页面
  • initial-scale=1.0, maximum-scale=1.0 //禁止屏幕放大缩小功能

safari浏览器

以上解决了普通浏览器的双击放大和双指缩放功能,但是safari浏览器还是存在放大功能,并没有解决。所以要添加一下js代码,来禁止safari浏览器的缩放功能。

     //阻止safari浏览器双击放大功能let lastTouchEnd = 0  //更新手指弹起的时间document.documentElement.addEventListener("touchstart", function (event) {//多根手指同时按下屏幕,禁止默认行为if (event.touches.length > 1) {event.preventDefault();}});document.documentElement.addEventListener("touchend", function (event) {let now = (new Date()).getTime();if (now - lastTouchEnd <= 300) {//当两次手指弹起的时间小于300毫秒,认为双击屏幕行为event.preventDefault();}else{ // 否则重新手指弹起的时间lastTouchEnd = now;}}, false);//阻止双指放大页面document.documentElement.addEventListener("gesturestart", function (event) {event.preventDefault();});

加上以上meta标签和js代码,解决了禁止全部浏览器的双击放大和双指缩放页面功能。

如果是vue或者react项目,可以在app.vue中添加以上功能:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/707020.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【喜讯】优积科技CEO刘其东当选第十届杨浦区科协常委委员!

2023年09月21日&#xff0c;上海市杨浦区科学技术协会第十次代表大会于杨浦区人民政府机关2号楼四楼礼堂隆重召开&#xff01;公司CEO刘其东、COO周兴文、CPO胡艳玲、PM何壮志等来自全区各界的近三百名科技工作者代表参加会议。 大会现场 上海市杨浦区委书记薛侃&#xff0c;上…

Flutter中高级JSON处理:使用json_serializable进行深入定制

Flutter中高级JSON处理 使用json_serializable库进行深入定制 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netEmail: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/article/details/1363…

针对KZG承诺和高效laconic OT的extractable witness encryption

1. 引言 2024年以太坊基金会等成员论文 Extractable Witness Encryption for KZG Commitments and Efficient Laconic OT&#xff0c;开源代码实现见&#xff1a; https://github.com/rot256/research-we-kzg&#xff08;Rust&#xff09; 在该论文中&#xff0c;提供了一种…

OpenAI划时代大模型——文本生成视频模型Sora作品欣赏(八)

Sora介绍 Sora是一个能以文本描述生成视频的人工智能模型&#xff0c;由美国人工智能研究机构OpenAI开发。 Sora这一名称源于日文“空”&#xff08;そら sora&#xff09;&#xff0c;即天空之意&#xff0c;以示其无限的创造潜力。其背后的技术是在OpenAI的文本到图像生成模…

5G-A,未来已来

目前&#xff0c;全国首个5G-A规模组网示范完成。这项由北京联通携手华为共同打造的示范项目&#xff0c;实现了北京市中心金融街、历史建筑长话大楼、大型综合性体育场北京工人体育场三个重点场景的连片覆盖。 实际路测结果显示&#xff0c;5G-A用户下行峰值速率达到10Gbps&am…

了解docker与k8s

随着 k8s 作为容器编排解决方案变得越来越流行&#xff0c;有些人开始拿 Docker 和 k8s 进行对比&#xff0c;不禁问道&#xff1a;Docker 不香吗&#xff1f; k8s 是 kubernetes 的缩写&#xff0c;8 代表中间的八个字符。 其实 Docker 和 k8s 并非直接的竞争对手两者相互依存…

安装使用zookeeper

先去官网下载zookeeper&#xff1a;Apache ZooKeeper 直接进入bin目录&#xff0c;使用powerShell打开。 输入: ./zkServer.cmd 命令&#xff0c;启动zookeeper。 zookeeper一般需要配合Dubbo一起使用&#xff0c;作为注册中心使用&#xff0c;可以参考另一篇博客&#xf…

300分钟吃透分布式缓存-17讲:如何理解、选择并使用Redis的核心数据类型?

Redis 数据类型 首先&#xff0c;来看一下 Redis 的核心数据类型。Redis 有 8 种核心数据类型&#xff0c;分别是 &#xff1a; & string 字符串类型&#xff1b; & list 列表类型&#xff1b; & set 集合类型&#xff1b; & sorted set 有序集合类型&…

基于springboot+vue的大学城水电管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

2024数字中国创新大赛·数据要素赛道“能源大数据应用赛”正式上线!参赛指南请查收

近日&#xff0c;由国网福建电力承办的2024数字中国创新大赛能源大数据应用赛正式上线发布。赛事按照数字中国建设、能源革命的战略要求&#xff0c;围绕能源数据要素x、能源数字技术、能源商业模式等热点设置赛题&#xff0c;诚邀社会各界为加快建成新型电力系统出谋划策&…

flutter 加密安全

前言&#xff1a;数据安全 数据的加密解密操作在 日常网络交互中经常会用到&#xff0c;现在密码的安全主要在于 秘钥的安全&#xff0c;如论 DES 3DES AES 还是 RSA, 秘钥的算法&#xff08;计算秘钥不固定&#xff09; 和 保存&#xff0c;都决定了你的数据安全&#xff1b;…

Vue 3, TypeScript 和 Element UI Plus:前端开发的高级技巧与最佳实践

Vue 3、TypeScript 和 Element UI Plus 结合使用时&#xff0c;可以提供一个强大且灵活的前端开发环境。以下是一些高级用法和技巧&#xff0c;帮助你更有效地使用这些技术&#xff1a; 1. Vue 3 高级特性 Composition API 使用 setup 函数: Vue 3 引入了 Composition API&am…

数据结构(C语言)代码实现(十)——链队列循环队列

目录 参考资料 链队列的实现 LinkQueue.h LinkQueue.cpp 测试函数test.cpp 测试结果 循环队列的实现&#xff08;最小操作子集&#xff09; 完整代码 测试结果 参考资料 数据结构严蔚敏版 链队列的实现 LinkQueue.h #pragma once #include <cstdio> #incl…

Vue自定义指令directives

1. 使用<script setup> <template><input v-focus"11111" /><input v-obj"{ id: 1, name: 这里是name }" /> </template> <script setup> //定义一个变量vFocus //命名方法使得DOM元素中可以用v-focus来显示 let vFo…

uniapp:使用DCloud的uni-push推送消息通知(在线模式)java实现

uniapp:使用DCloud的uni-push推送消息通知&#xff08;在线模式&#xff09;java实现 1.背景 今天开发app的时候遇到一个需求&#xff1a; 业务在出发特定条件的时候向对应的客户端推送消息通知。 为什么选择在线模式&#xff0c;因为我们使用的是德邦类似的手持终端&#xf…

干货!教你如何从柏曼/书客/明基中挑选最好用的护眼台灯

又到了一年一度的开学季&#xff0c;家中神兽又回到知识的海洋遨游&#xff0c;家长在得到自由的同时又不禁开始担心孩子的视力健康问题&#xff0c;毕竟繁重的学习生活用眼负担也不小&#xff0c;在听闻市面上有护眼台灯之后也纷纷想入手选购一台给孩子&#xff0c;毕竟这是打…

死区过滤器Deadband和DeadZone区别(应用介绍)

死区过滤器的算法和详细介绍专栏也有介绍,这里我们主要对这两个模块的区别和应用场景进行详细介绍 1、死区过滤器 https://rxxw-control.blog.csdn.net/article/details/128521007https://rxxw-control.blog.csdn.net/article/details/128521007 1、Deadband和DeadZone区别…

【算法 - 动态规划】找零钱问题Ⅲ

在前面的动态规划系列文章中&#xff0c;关于如何对递归进行分析的四种基本模型都介绍完了&#xff0c;再来回顾一下&#xff1a; 从左到右模型 &#xff1a;arr[index ...] 从 index 之前的不用考虑&#xff0c;只考虑后面的该如何选择 。范围尝试模型 &#xff1a;思考 [L ,…

美国硅谷云服务器租用注意事项

随着信息技术的飞速发展&#xff0c;云服务器已成为众多企业和个人用户首选的IT基础设施。美国硅谷作为全球科技创新的摇篮&#xff0c;其云服务器市场也备受关注。然而&#xff0c;在租用硅谷云服务器时&#xff0c;用户需要注意以下几个方面&#xff0c;以确保获得优质、稳定…

4核8G服务器选阿里云还是腾讯云?价格性能对比

4核8G云服务器多少钱一年&#xff1f;阿里云ECS服务器u1价格955.58元一年&#xff0c;腾讯云轻量4核8G12M带宽价格是646元15个月&#xff0c;阿腾云atengyun.com整理4核8G云服务器价格表&#xff0c;包括一年费用和1个月收费明细&#xff1a; 云服务器4核8G配置收费价格 阿里…