当前位置： 首页 > news >正文

禁止触摸屏触控板手指缩放，需要这样处理

news 2026/5/19 14:29:29

要禁止触摸屏的手指缩放，可以使用如下的CSS

只要在页面上使用css样式touch-action: none，就能禁止web在手机或平板上的缩放了。

<html style="touch-action: none;">

注意：
使用 touch-action: none作用于html元素上，可以禁止页面缩放，因为该样式属性是非继承属性，不会影响页面子元素的手势操作。
如果使用* {touch-action: none;}全局作用，则会影响子元素的各种手势操作。

拓展

touch-action 属性值

auto
当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进行平滑、缩放等。

none
当触控事件发生在元素上时，不进行任何操作。

pan-x
启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和／或 pinch-zoom 组合使用。

pan-y
启用单指垂直平移手势。可以与 pan-x 、pan-left 、pan-right 和／或 pinch-zoom 组合使用。

manipulation
这是pan-x pan-y pinch-zoom的别名。
浏览器只允许进行滚动和持续缩放操作，任何其它被auto值支持的行为不被支持。
启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。
禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。
触摸动作也经常用于完全解决由支持双击缩放手势引起的点击事件的延迟。

pinch-zoom
启用多手指平移和缩放页面。
这可以与任何平移值组合。

pan-left, pan-right,pan-up,pan-down
启用以指定方向滚动开始的单指手势。 一旦滚动开始，方向可能仍然相反。
多个方向可以组合。
请注意，滚动向上（pan-up）意味着用户正在将其手指向下拖动到屏幕表面上，同样 pan-left 表示用户将其手指向右拖动。
这些值得兼容性较差，Chrome支持，IE\Firefox\Safari不支持。

相关文章：

禁止触摸屏触控板手指缩放，需要这样处理

要禁止触摸屏的手指缩放&#xff0c;可以使用如下的CSS 只要在页面上使用css样式touch-action: none&#xff0c;就能禁止web在手机或平板上的缩放了。 <html style"touch-action: none;">注意&#xff1a; 使用 touch-action: none作用于html元素上&#xff0…...

编程日记 2023/5/30 18:14:22

opencv cuda版本windows编译

目录 1. 编译准备2. 编译3. 遇到的问题及解决方案3.1 boostdesc_bgm.i,vgg_generated_48.i等文件的缺失3.2 fatal error: features2d/test/test_detectors_regression.impl.hpp: 没有那个文件或目录 1. 编译准备 编译工具是cmakevisual studio2022&#xff0c;首先安装这两个工…...

编程日记 2023/5/1 10:54:38

python哲学

进入python编辑器模式下&#xff0c;输入import this 会打印python之禅(The Zen of Python) Beautiful is better than ugly. 优美胜于丑陋。 Explicit is better than implicit. 明了胜于晦涩。 Simple is better than complex. 简单胜过复杂。 Complex is better than co…...

编程日记 2023/5/1 10:49:36

(2023)用AIGC写iOS项目单元总结

尝试开发的项目 项目功能 用 ChatGPT 开发了一个视频播放器。需要它编写的功能包括&#xff1a; ☆ 本地文件&#xff0c;在线 URL 播放&#xff0c;暂停 ☆ 点击空白区域弹出操作菜单&#xff0c;再点击消失 ☆ 手动横竖屏切换 ☆ 播放速度调整&#xff0c;限定 0.5, 1.0, …...

编程日记 2023/5/1 10:44:34

k8s扩容node节点会影响上面已存在的pod吗?

理论上不影响 扩容 Kubernetes 集群中的节点不会影响已经运行的 Pod&#xff0c;因为 Pod 是在节点上运行的&#xff0c;而不是在集群中运行的。当您添加新的节点时&#xff0c;Kubernetes 调度器会在新节点上启动新的 Pod&#xff0c;而已经运行的 Pod 会继续在它们当前的节点…...

编程日记 2023/5/1 10:39:33

深度学习 -- pytorch 计算图与动态图机制 autograd与逻辑回归模型

前言 pytorch中的动态图机制是pytorch这门框架的优势所在&#xff0c;阅读本篇博客可以使我们对动态图机制以及静态图机制有更直观的理解&#xff0c;同时在博客的后半部分有关于逻辑回归的知识点&#xff0c;并且使用pytorch中张量以及张量的自动求导进行构建逻辑回归模型。 …...

编程日记 2023/5/1 10:34:32

计算机网络学习03（OSI、TCP/IP网络分层模型详解））

1、OSI 七层模型 OSI 七层模型 是国际标准化组织提出一个网络分层模型&#xff0c;其大体结构以及每一层提供的功能如下图所示&#xff1a; 每一层都专注做一件事情&#xff0c;并且每一层都需要使用下一层提供的功能比如传输层需要使用网络层提供的路由和寻址功能&#xff0…...

编程日记 2023/5/1 10:29:31

ChatGPT是什么？ChatGPT里的G、P、T分别指什么

文章目录 ChatGPT是什么GTP中的 生成式 是什么意思GTP中的 预训练 是什么意思GTP中的 变换模型 是什么意思 什么是Transformer什么是注意力机制 监督学Xi、无监督学Xi、强化学Xi ChatGPT是什么 GPT: Generative Pre-trained Transformer 生成式预训练变换模型 ChatGPT是由Ope…...

编程日记 2023/5/1 10:24:30

Linux服务使用宝塔面板搭建网站，并发布公网访问 - 内网穿透

文章目录 前言1. 环境安装2. 安装cpolar内网穿透3. 内网穿透4. 固定http地址5. 配置二级子域名6. 创建一个测试页面 转载自远程内网穿透的文章&#xff1a;Linux使用宝塔面板搭建网站&#xff0c;并内网穿透实现公网访问 前言 宝塔面板作为简单好用的服务器运维管理面板&#…...

编程日记 2023/5/1 10:19:29

TDA4VH j784s4 使用

// sdk https://www.ti.com/tool/PROCESSOR-SDK-J784S4 // Jacinto Processors TDA4AP-Q1/TDA4VP-Q1/TDA4AH-Q1/TDA4VH-Q1 EVM User’s Guide https://www.ti.com/lit/ug/spruj62/spruj62.pdf?ts1682337275236&ref_urlhttps%253A%252F%252Fwww.ti.com%252Fsitesearch%252…...

编程日记 2023/5/1 10:14:29

CSS布局基础（字体，文本，背景）

字体 常见字体设置 body {font-family: font-family: "Microsoft YaHei", Tahoma, Arial, Hiragino Sans GB,sans-serif; }浏览器从前到后匹配&#xff0c;找到可用字体结束&#xff0c;都没匹配上&#xff0c;使用浏览器默认字体 常用字号 不同浏览器默认字号可…...

编程日记 2023/5/1 10:09:27

Redis入门指南：深入了解这款高性能缓存数据库

本文将带您了解Redis的基本概念、数据类型、特性以及如何在实际项目中应用Redis。通过阅读本文&#xff0c;您将更好地理解如何利用Redis优化您的应用程序性能。 1. 什么是Redis&#xff1f;2. Redis的数据类型3. Redis的特性4. 如何使用Redis4.1 安装与启动4.2 基本命令4.3 应…...

编程日记 2023/5/1 10:04:26

# 数据结构和算法面试题系列-随机算法总结

0 概述 随机算法涉及大量概率论知识&#xff0c;有时候难得去仔细看推导过程&#xff0c;当然能够完全了解推导的过程自然是有好处的&#xff0c;如果不了解推导过程&#xff0c;至少记住结论也是必要的。本文总结最常见的一些随机算法的题目&#xff0c;是几年前找工作的时候…...

编程日记 2023/5/1 9:59:26

windows中vscode配置C/C++环境

首先要把MinGW的环境安装完&#xff0c;我一般是下载带有MinGW的codeblocks&#xff0c;这样省去自己安装MinGW。因为安装MinGW还挺麻烦的。 安装完codeblocks&#xff0c;找到其安装目录&#xff0c;把bin文件配置到环境变量去&#xff1a; 将bin添加到环境变量 然后打开vsco…...

编程日记 2023/6/1 6:10:35

shell编程之条件语句

shell编程之条件语句 一、条件测试操作1.test命令2.文件测试3.利用条件判断&#xff0c;创建文件4.整数值比较4.1 常用的测试操作符 5.字符串比较5.1 常用的测试操作符 6.逻辑测试6.1 常用的测试操作符 二、if语句的结构1.单分支结构2.双分支结构3.多分支结构4.if嵌套 三、case…...

编程日记 2023/5/1 9:49:24

【Python每日十题菜鸟版--第二天】

菜鸟实例 &#x1f349;前言1.判断奇偶性2.判断闰年3. 获取最大值最小值4. 质数&#xff08;素数&#xff09;的判断5.阶乘方法一方法二 6.九九乘法表7.斐波那契数列方法一 &#xff1a;循环计算法&#xff08;一般方法&#xff09;方法二&#xff1a; 递归 8.阿姆斯特朗数9. 十…...

编程日记 2023/5/1 9:44:23

拓扑排序模板及例题

概念 一个有向无环图必然存在一个拓扑序列与之对应。 流程&#xff1a; 先将所有入度为0的节点入队将队列中的节点出队&#xff0c;出队序列就是对应拓扑序。对于弹出的节点x&#xff0c;遍历x所有出度y&#xff0c;对y进行入读减一操作检查入度减一之后的节点y&#xff0c;…...

编程日记 2023/5/30 18:15:50

linux查看nginx安装路径

linux查看nginx安装路径 有几种方法可以查看nginx的安装路径: 使用which命令: which nginx这个命令会返回nginx的二进制文件路径,一般也是安装路径。 查看nginx的进程,得到安装路径: ps aux | grep nginx输出结果中有nginx的进程路径,这个也是安装路径。 在nginx的配置文…...

编程日记 2023/5/1 9:34:21

【生态环境保护】绿水青山就是金山银山——生态环保篇

环保是一个持续性的话题&#xff0c;不仅仅是在国内&#xff0c;整个世界都是一个命运共同体从城市垃圾分类&#xff0c;到农村/村镇污水治理&#xff0c;城乡一体化和因地制宜的实施方式&#xff0c;是我们一直在探索的。 从余村到全国&#xff0c;从中国到世界&#xff0c;“…...

编程日记 2023/5/29 19:17:38

配置Docker镜像加速器-Docker命令-Docker 容器的数据卷

Docker架构 docker进程&#xff08;daemon&#xff09; 镜像&#xff08;Image&#xff09;&#xff1a;Docker 镜像&#xff08;Image&#xff09;&#xff0c;就相当于是一个 root 文件系统。比如官方镜像 ubuntu:16.04 就包含了完整的一套 Ubuntu16.04 最小系统的 root 文件…...

编程日记 2023/5/1 9:24:18

OBS实时字幕插件实战指南：专业直播字幕解决方案

OBS实时字幕插件实战指南&#xff1a;专业直播字幕解决方案 【免费下载链接】OBS-captions-plugin Closed Captioning OBS plugin using Google Speech Recognition 项目地址: https://gitcode.com/gh_mirrors/ob/OBS-captions-plugin 在当今的直播和内容创作领域&#…...

编程新知 2026/5/19 12:44:37

基于HPM5E00的EtherCAT从站开发板全流程实战：从硬件设计到软件配置

1. 项目概述&#xff1a;为什么我们要自己动手做一块EtherCAT开发板&#xff1f;如果你是一名从事工业自动化、运动控制或者机器人开发的工程师&#xff0c;最近几年一定没少听到EtherCAT的大名。它号称“以太网控制自动化技术”&#xff0c;本质上是一种基于标准以太网的实时工…...

编程新知 2026/5/19 12:05:58

Adobe-GenP 3.0终极指南：5分钟快速免费激活Adobe全系列软件

Adobe-GenP 3.0终极指南&#xff1a;5分钟快速免费激活Adobe全系列软件 【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP Adobe-GenP是一款革命性的Adobe Creative Cl…...

编程新知 2026/5/19 12:01:53

SNMP回调函数优化：Keil MDK中的MIB表管理实践

1. 问题背景与需求分析 在嵌入式网络设备开发中&#xff0c;SNMP&#xff08;简单网络管理协议&#xff09;是远程监控和配置设备的常用方案。使用Keil MDK开发环境时&#xff0c;其Middleware Network组件提供了SNMP协议栈实现&#xff0c;开发者需要通过MIB&#xff08;管理信…...

编程新知 2026/5/19 11:55:09

5.3、从双亲表示法看树的存储设计哲学

1. 双亲表示法的本质&#xff1a;用数组重构树形关系 第一次接触双亲表示法时&#xff0c;我被它的简洁性惊艳到了——仅用数组就能完整描述整棵树的拓扑结构。这种存储方式的核心在于&#xff1a;每个节点只需要记住自己的父亲是谁。就像现实中的家族族谱&#xff0c;我们通过…...

编程新知 2026/5/19 11:44:38

InfluxDB-从时序数据模型到实战：核心原理与Web UI高效入门

1. 时序数据库与InfluxDB初探 第一次接触时序数据库时&#xff0c;我盯着监控大屏上跳动的曲线发愣——这些每秒产生数万条记录的传感器数据&#xff0c;传统数据库根本扛不住。直到同事推荐了InfluxDB&#xff0c;这个专门为时间序列数据设计的数据库&#xff0c;才真正解决了…...

编程新知 2026/5/19 11:35:30

基于Adafruit与CircuitPython的交互式光剑：从硬件选型到3D打印全流程解析

1. 项目概述&#xff1a;打造一把会“呼吸”的交互式光剑几年前&#xff0c;当我第一次在游戏里挥动《塞尔达传说》中的大师之剑时&#xff0c;就被那种兼具力量感与神圣感的视觉效果深深吸引。作为一个硬件创客&#xff0c;我一直在想&#xff0c;能不能把这种虚拟的体验带到现…...

编程新知 2026/5/19 9:18:59

从双非到科软：我的22408备考复盘与实战指南

1. 双非逆袭科软&#xff1a;我的备考心路历程 作为一名双非院校的计算机专业学生&#xff0c;我深知考研这条路有多难走。去年这个时候&#xff0c;我也和屏幕前的你一样&#xff0c;在知乎、贴吧疯狂搜索各种经验贴&#xff0c;既期待又忐忑。现在回想起来&#xff0c;从3月到…...

编程新知 2026/5/19 8:20:51

你的嵌入式数据记录仪方案：基于STM32CubeMX+FATFS+SD卡存储传感器数据（CSV格式实战）

嵌入式数据记录仪实战&#xff1a;STM32CubeMXFATFSSD卡构建工业级CSV存储方案 在工业物联网和智能硬件开发中&#xff0c;可靠的数据记录功能往往是产品核心价值所在。想象一下温室大棚的环境监控系统需要连续记录温湿度数据三个月&#xff0c;或者电力设备振动监测装置要在无…...

编程新知 2026/5/19 7:28:59

FreeRTOS互斥信号量实战：用STM32CubeIDE解决多任务访问共享串口的优先级翻转问题

FreeRTOS互斥信号量实战&#xff1a;用STM32CubeIDE解决多任务访问共享串口的优先级翻转问题 在嵌入式系统开发中&#xff0c;多任务并发访问共享资源是一个常见且棘手的问题。想象一下这样的场景&#xff1a;你的STM32设备上有两个任务需要向同一个串口发送数据——一个高优先…...

编程新知 2026/5/19 6:16:19