首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何防止在移动Safari浏览器默认双击行为(缩放,平移)上的iOS4?

防止在移动Safari浏览器上的iOS 4上的双击行为(缩放,平移),可以通过以下方法:

  1. 使用JavaScript禁用双击缩放:

在HTML文档中,添加以下JavaScript代码:

代码语言:javascript
复制
document.addEventListener('DOMContentLoaded', function() {
  var lastTouchTime = 0;
  document.addEventListener('touchstart', function(event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });
  document.addEventListener('touchend', function(event) {
    var currentTime = new Date().getTime();
    var tapDelay = 500; // 延迟时间
    if (currentTime - lastTouchTime < tapDelay) {
      event.preventDefault();
    }
    lastTouchTime = currentTime;
  });
});

这段代码会禁用双击缩放功能,从而防止在移动Safari浏览器上的iOS 4上的双击行为(缩放,平移)。

  1. 使用CSS禁用用户选择:

在CSS样式表中,添加以下代码:

代码语言:css
复制
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

这段代码会禁用用户选择,从而防止在移动Safari浏览器上的iOS 4上的双击行为(缩放,平移)。

  1. 使用meta标签禁用缩放:

在HTML文档的<head>部分,添加以下meta标签:

代码语言:html
复制
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码会禁用缩放功能,从而防止在移动Safari浏览器上的iOS 4上的双击行为(缩放,平移)。

总结:

通过使用JavaScript、CSS和meta标签,可以有效地防止在移动Safari浏览器上的iOS 4上的双击行为(缩放,平移)。这些方法可以根据具体需求进行组合使用,以实现最佳效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jimojianghu

以前,如果要禁止移动端设备触摸屏,手指缩小放大功能,都会想到使用viewport 来处理。...用于设置触摸屏用户如何操纵元素区域,允许你触控时控制滚动操作。 例如,浏览器内置缩放功能。 这样做好处还有,它可以允许你自己实现这些手势。...启用平移和缩小缩放手势,但禁用其他非标准手势,例如双击以进行缩放。 禁用双击缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件需要。...Chrome中,wheel / touch 等事件中 passive 会默认设置为true,但Safari不支持。...由于目标被视为被动,因此无法在被动事件侦听器中阻止默认行为。 可能发生情景:移动端使用touch事件后,垂直平移报错。

3.8K00

移动端点击事件延迟诞生消亡史

因此,IOS Safari 浏览器首先引入了 300 毫秒延迟,用来判断用户是否会再次点击,也就是说,第一次点击延迟 300 毫秒,300 毫秒后用户没有再次点击则认定为用户进行普通单击操作,并触发单击...全面的移动开发者与单击事件延迟战争拉开了序幕。鉴于 iPhone 巨大成功,其他浏览器厂商也都快步跟进纷纷效仿了 iPhone Safari 浏览器做法。...根据规范,CSS 属性 touch-action 用于设置触摸屏用户如何操纵元素区域(例如,浏览器内置缩放功能)。...FastClick FastClick 是一个小型 JavaScript 库,专门旨在防止移动浏览器 300ms 点击延迟。...启用平移和双指缩放手势,但禁用其他非标准手势,例如双击缩放。 禁用双击缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件需要。

2.8K20
  • 【总结】1823- 移动端滚动穿透与滚动溢出解决方案

    滚动穿透 问题描述 移动端 WEB 开发时候(小程序也雷同),如上录屏所示,如果页面超过一屏高度出现滚动条时, fixed 定位弹窗遮罩层上进行滑动,它下面的内容也会跟着一起滚动,看起来好像事件穿透到下面的...,平移(滚动)和缩放手势由浏览器专门处理,但是可以通过 CSS 特性 touch-action 来改变触摸手势行为。...摘取几个 touch-action 值如下。 值 描述 auto 启用浏览器处理所有平移缩放手势。 none 禁用浏览器处理所有平移缩放手势。...manipulation 启用平移缩放手势,但禁用其他非标准手势,例如双击缩放。 pinch-zoom 启用页面的多指平移缩放。...于是 popup 元素设置该属性,禁用元素(及其不可滚动后代)所有手势就可以解决该问题了。

    53411

    移动开发实用

    以下是历史原因,来源其他人分享: 2007年苹果发布首款iphoneIOS系统搭载safari为了将适用于PC端上大屏幕网页能比较好展示在手机端上,使用了双击缩放 (double tap to...zoom)方案,比如你在手机上用浏览器打开一个PC网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速 双击屏幕某一部分,你就能看清该部分放大后内容,再次双击后能回到原始状态...双击缩放是指用手指在屏幕快速点击两次,iOS 自带 Safari 浏览器会将网页缩放至原始比例。...原因就出在浏览器需要如何判断快速点击,当用户屏幕单击某一个元素时候,例如跳转链接, 此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作...,暂无完美方案 参考 《移动端web页面使用position:fixed问题总结》 《使用iScroll.js解决ios4下不支持position:fixed问题》 如何阻止windows Phone

    6.5K30

    移动端click事件300ms延迟

    产生原因 移动浏览器支持双击缩放操作,以及IOS Safari 双击滚动操作,是导致300ms点击延迟主要原因。...双击缩放:顾名思义,即用手指在屏幕快速点击两次,移动浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢? 假定这么一个场景。用户 浏览器里边点击了一个链接。...因此,浏览器就等待 300 毫秒,以判断用户是否再次点击了屏幕。 也就是说,移动浏览器会有一些默认行为,比如双击缩放双击滚动。...这些行为,尤其是双击缩放,主要是为桌面网站在移动浏览体验设计。而在用户对页面进行操作时候,移动浏览器会优先判断用户是否要触发默认行为。...,而随着响应式设计普及,很多站点都已经对移动端坐过适配和优化了,这个时候就不需要双击缩放了,如果能够识别出一个网站是响应式网站,那么移动浏览器就可以自动禁掉默认双击缩放行为并且去掉300ms点击延迟

    2.7K21

    探究 css touch-action 属性

    平移(滚动)和缩放手势由浏览器专门处理。...通过明确指定浏览器应该处理哪些手势,应用程序可以 pointermove 和 pointerup 监听器中为其余手势提供自己行为。...manipulation 浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持行为不被支持。启用平移和缩小缩放手势,但禁用其他非标准手势,例如双击以进行缩放。...禁用双击缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件需要。 这是“pan-x pan-y pinch-zoom”(为了兼容性本身仍然有效)别名。...示例 最常见用法是禁用元素(及其不可滚动后代)所有手势,以使用自己提供拖放和缩放行为(如地图或游戏表面) #map { touch-action: none; } 另一种常见模式是使用指针事件处理水平平移图像轮播

    1.8K10

    如何解决移动端Click事件300ms延迟问题?

    这当中最出名,当属双击缩放(double tap to zoom),这也是会有上述 300 毫秒延迟主要原因。...双击缩放,顾名思义,即用手指在屏幕快速点击两次,iOS 自带 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢? ?...由于用户可以进行双击缩放或者双击滚动操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。...鉴于iPhone成功,其他移动浏览器都复制了 iPhone Safari 浏览器多数约定,包括双击缩放,几乎现在所有的移动浏览器都有这个功能。...页面的DOM文档加载完成后 fastClick.attach(document.body) 如果你用过FastClick移动端,就会发现有一个体验很不好问题,某些ios,点击输入框想唤启软键盘,

    1.5K30

    百度地图API开发指南(一)

    为了更好在手机浏览器展示地图,我们有如下建议: 将地图容器高设置为100%,使其充满整个屏幕,或者您也可以计算浏览器窗口大小并进行设置。...API中地图对象外观与行为与百度地图网站上交互地图非常相似。它支持鼠标拖拽、滚轮缩放双击放大等交互功能。您也可以修改配置来改变这些功能。...比如,默认情况下地图不支持鼠标滚轮缩放操作,因为这样可能会影响整个页面的用户体验,但是如果您希望地图中使用鼠标滚轮控制缩放,则可以调用map.enableScrollWheelZoom方法来开启。...NavigationControl:地图平移缩放控件,默认位于地图左上方,它包含控制地图平移缩放功能。...本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。地图中添加控件后,它们即刻生效。

    1.8K20

    300ms点击延迟

    300ms点击延迟 移动300ms点击延迟是因为移动端可以进行双击缩放操作,因此浏览器click之后要等待300ms,看用户有没有下一次点击,也就是判断这次操作是单击还是双击。...300ms内没有第二次点击便会触发click事件,此时由于A元素消失,那么click事件便落到了B元素,如果B元素是个链接或者绑定了click事件,那么B元素默认行为或者是绑定事件回调便会意外地触发...解决方案 禁止缩放 通过完全禁止缩放来使双击缩放功能失效,此时浏览器就可以禁用默认双击缩放行为并且去掉300ms点击延迟,但是在这种情况下双指缩放功能也会失效。...浏览器包含width=device-width也就是视口宽度=设备宽度或者设置为比viewport值更小页面上禁用双击缩放行为,没有双击缩放就没有300ms点击延迟,这种方案没有完全禁用缩放,而是禁用浏览器默认双击缩放行为...touch-action:none; /* 浏览器兼容性 https://caniuse.com/#search=touch-action */ FastClick FastClick是FT Labs专门为解决移动浏览器

    1.2K20

    中高级前端必须注意40条移动端H5坑位指南-HTML方向

    提及安卓系统包括Android和基于Android开发系统 提及苹果系统包括iOS和iPadOS 本文针对开发场景是移动浏览器,因此大部分坑位解决方案桌面端浏览器里不一定有效 解决方案若未提及适用系统就默认安卓系统和苹果系统都适用...,若提及适用系统则会详细说明 Webkit及其衍生内核移动浏览器市场占有率里达到惊人97%,因此无需太过担心CSS3、ES6和浏览器新特性兼容性 每次填坑都是一次实践过程,全部坑位源码都按语言方向记录在笔者...唤醒原生应用前提是必须在移动设备里安装了该应用,有些移动浏览器即使安装了该应用也无法唤醒原生应用,因为它认为URL Scheme是一种潜在危险行为而禁用它,像Safari和微信浏览器。...appId=60000002">打开支付宝蚂蚁森林 禁止页面缩放 智能手机普及下,很多网站都具备桌面端和移动端两种浏览版本,因此无需双击缩放查看页面。...禁止页面缩放可保障移动浏览器能无遗漏地展现页面所有布局。

    91720

    移动端H5坑位指南

    唤醒原生应用前提是必须在移动设备里安装了该应用,有些移动浏览器即使安装了该应用也无法唤醒原生应用,因为它认为URL Scheme是一种潜在危险行为而禁用它,像Safari和微信浏览器。...appId=60000002">打开支付宝蚂蚁森林 禁止页面缩放 智能手机普及下,很多网站都具备桌面端和移动端两种浏览版本,因此无需双击缩放查看页面。...2007年苹果发布首款iPhone搭载Safari为了将桌面端网站能较好地展示移动浏览器而使用了双击缩放。...移动浏览器不使用click事件而使用touch事件是因为click事件有着明显延迟,后续又出现fastclick。...这种情况Safari特别明显,简单概括就是往返页面无法刷新。 往返缓存指浏览器为了页面间执行前进后退操作时能拥有更流畅体验一种策略,以下简称BFCache。

    3.4K10

    10-移动端开发教程-移动端事件

    PC端事件移动兼容问题 1.1 click事件200~300ms延迟问题 由于移动默认布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来大小,Safari最新引入了双击缩放功能...:用户双击手机页面的时候,浏览器会智能缩放当前页面到原始大小。 ​...双击缩放原理就是,当用户click一次之后,浏览器会经过约300ms之后检测是否再有一次click,如果有的话,就会缩放页面。否则的话就是一个click事件。...由于双击缩放功能存在,click事件触发就会有大约200~300ms延迟。 1.2 dblclick事件失效 由于双击缩放存在,pc端dblclick事件也失效了。 2....因为双击缩放检测存在,移动设备屏幕上点击操作事件执行顺序: touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件,可以调用 event.preventDefault

    6.8K80

    Matplotlib 中文用户指南 7.1 交互式导航

    它们没有意义,除非你已经使用平移缩放按钮访问了其他地方。 这类似于尝试访问新页面之前单击 Web 浏览器返回 - 什么都不会发生。 首页总是你第一个浏览页面,以及你数据默认视图。...单击工具栏按钮激活平移缩放,然后将鼠标放在轴域某个地方。 按住鼠标左键并将其拖动到新位置来平移图形。 当你释放它时,你按下点处数据将移动到你释放点。...如果在平移时按'x'或'y',移动会分别限制x或y轴。 按鼠标右键并将其拖动到新位置来进行缩放。 向右移动使x轴成比例放大,或者向左移动成比例缩小。 y轴和/下移动同上。...开始缩放时鼠标下点会保持静止,你可以缩放图形中其它任意点。 你可以使用快捷键'x','y'或CONTROL分别将缩放约束为x轴,y轴或保留宽高比。 使用极坐标绘图时,平移缩放功能行为不同。...+ w 将平移/缩放限制于x轴 使用鼠标平移/缩放时按住x 将平移/缩放限制于y轴 使用鼠标平移/缩放时按住y 保留宽高比 使用鼠标平移/缩放时按住CONTROL 切换网格 鼠标轴域时按下g 切换

    2.1K20

    10-移动端开发教程-移动端事件

    PC端事件移动兼容问题 1.1 click事件200~300ms延迟问题 由于移动默认布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来大小,Safari最新引入了双击缩放功能...:用户双击手机页面的时候,浏览器会智能缩放当前页面到原始大小。 ​...双击缩放原理就是,当用户click一次之后,浏览器会经过约300ms之后检测是否再有一次click,如果有的话,就会缩放页面。否则的话就是一个click事件。...由于双击缩放功能存在,click事件触发就会有大约200~300ms延迟。 1.2 dblclick事件失效 由于双击缩放存在,pc端dblclick事件也失效了。 2....因为双击缩放检测存在,移动设备屏幕上点击操作事件执行顺序: touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件,可以调用 event.preventDefault

    6.4K70

    移动端web开发笔记

    以下是历史原因: 2007年苹果发布首款iphoneIOS系统搭载safari为了将适用于PC端上大屏幕网页能比较好展示在手机端上,使用了双击缩放(double tap to zoom)方案,...比如你在手机上用浏览器打开一个PC网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕某一部分,你就能看清该部分放大后内容,再次双击后能回到原始状态...双击缩放是指用手指在屏幕快速点击两次,iOS 自带 Safari 浏览器会将网页缩放至原始比例。...原因就出在浏览器需要如何判断快速点击,当用户屏幕单击某一个元素时候,例如跳转链接,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后...15、 移动如何清除输入框内阴影 iOS,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭: input, textarea {   border: 0

    3.6K20

    中高级前端必须注意40条移动端H5坑位指南 | 网易三年实践

    提及安卓系统包括Android和基于Android开发系统 提及苹果系统包括iOS和iPadOS 本文针对开发场景是移动浏览器,因此大部分坑位解决方案桌面端浏览器里不一定有效 解决方案若未提及适用系统就默认安卓系统和苹果系统都适用...唤醒原生应用前提是必须在移动设备里安装了该应用,有些移动浏览器即使安装了该应用也无法唤醒原生应用,因为它认为URL Scheme是一种潜在危险行为而禁用它,像Safari和微信浏览器。...appId=60000002">打开支付宝蚂蚁森林 禁止页面缩放 智能手机普及下,很多网站都具备桌面端和移动端两种浏览版本,因此无需双击缩放查看页面。...2007年苹果发布首款iPhone搭载Safari为了将桌面端网站能较好地展示移动浏览器而使用了双击缩放。...这种情况Safari特别明显,简单概括就是往返页面无法刷新。 「往返缓存」指浏览器为了页面间执行前进后退操作时能拥有更流畅体验一种策略,以下简称BFCache。

    4.3K22

    吃透移动端 H5 与 Hybrid|实践踩坑12种问题汇总

    产生原因 为什么 iOS webview 中 滑动不流畅,它是如何定义? 最终我 safari 文档里面寻找到了答案(文档链接在参考资料项)。 ?...页面放大或缩小不确定性行为 表现 双击或者双指张开手指页面元素,页面会放大或缩小。 产生原因 HTML 本身会产生放大或缩小行为,比如在 PC 浏览器,可以自由控制页面的放大缩小。...但是移动端,我们是不需要这个行为。所以,我们需要禁止该不确定性行为,来提升用户体验。...iOS 中 safari,为了实现双击缩放操作,单击 300ms 之后,如果未进行第二次点击,则执行 click 单击操作。也就是说来判断用户行为是否为双击产生。...但是, App 中,无论是否需要双击缩放这种行为,click 单击都会产生 300ms 延迟。 为什么会产生 click 点击穿透?

    2.1K20

    【Hybrid】518- 12种移动端 H5 与 Hybrid问题汇总

    产生原因 为什么 iOS webview 中 滑动不流畅,它是如何定义? 最终我 safari 文档里面寻找到了答案(文档链接在参考资料项)。 ?...页面放大或缩小不确定性行为 表现 双击或者双指张开手指页面元素,页面会放大或缩小。 产生原因 HTML 本身会产生放大或缩小行为,比如在 PC 浏览器,可以自由控制页面的放大缩小。...但是移动端,我们是不需要这个行为。所以,我们需要禁止该不确定性行为,来提升用户体验。...iOS 中 safari,为了实现双击缩放操作,单击 300ms 之后,如果未进行第二次点击,则执行 click 单击操作。也就是说来判断用户行为是否为双击产生。...但是, App 中,无论是否需要双击缩放这种行为,click 单击都会产生 300ms 延迟。 为什么会产生 click 点击穿透?

    1.4K22

    网页编辑DWG框架搭建快速入门(WEB CAD SDK)

    支持浏览器:Chrome,Edge,Firefox, Safari, 360, QQ等浏览器。 建议使用最新版本chrome浏览器或edge浏览器。...主要编辑有:移动、夹点拉伸、偏移、删除、复制、粘贴、旋转、缩放、镜向、离散、图案填充、实心填充、打碎、计算曲线长、面积、最近点、交点、导角、文字变线条等。...几何运算:面积、夹角、向量、矩阵、旋转、缩放、最近点、最近距离、垂足、参数、镜向、平移、交点、打断、延伸、最短路径、最长路径。...项目示例 重要提示:使用最新chrome浏览器,或edge浏览器访问如下网址。...解压开发包后,其文件目录如下所示: 3.运行演示 双击解压文件目录下 Mx3dServer.exe 程序,其启动界面如下: 按照界面提示步骤操作,启动服务,启动之前我们需要设置防火墙允许这两个服务程序能访问网络

    15500

    第一个.NET小程序

    用户可以通过平移缩放来看网页不同部分。...简单点来讲:移动设备viewport就是屏幕能用来显示我们网页那一块区域。 viewport不局限于浏览器可视区域大小,一般来讲要比浏览器可视区域要大。...一般来讲,移动设备viewport都是要大于浏览器可视区域,这是因为考虑到移动设备分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备正常显示那些传统为桌面浏览器设计网站,移动设备浏览器都会把自己默认...meta viewport 标签首先是由苹果公司在其safari浏览器中引入,目的就是解决移动设备viewport问题。...因为没有指定缩放情况下,移动设备会自动计算initial-scale值保证 layout viewport 也就是页面宽度自动适配浏览器可视宽度。

    83720
    领券