iOS上h5长按识别图片二维码，图片会默认放大，禁用这一默认行为

Lee_01

已于 2024-01-14 18:10:48 修改

阅读量1.1k

点赞数 11

分类专栏：前端开发文章标签： html

于 2024-01-14 18:09:56 首次发布

本文链接：https://blog.csdn.net/Lee_01/article/details/135586079

版权

前端开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

iOS上h5长按识别图片二维码，图片会默认放大，禁用这一默认行为

测试代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>默认</p>
    <img src="https://picsum.photos/200/200" alt="" width="200" height="200">

    <p>draggable="false"</p>
    <img src="https://picsum.photos/200/200" alt="" width="200" height="200" draggable="false">
</body>

</html>

iPhone15 微信测试

结果：可以禁用
在这里插入图片描述

iPhone15 Safari测试

结果：无法禁用
在这里插入图片描述
请添加图片描述

试试-webkit-touch-callout: none;

    <style>
        img {
            -webkit-touch-callout: none;
        }
    </style>

结果：无法显示菜单。draggable="false" + -webkit-touch-callout: none; 能使图片失去响应
在这里插入图片描述

参考社区回答：https://developers.weixin.qq.com/community/develop/doc/000046efc385e00bdcfe10c3c5b400

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lee_01

关注关注

11
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

移动端（ios and android）长按识别二维码（含js与原生互调）

蓝骑的博客

12-18

1万+

这篇文章就整理下移动端长按识别二维码的实现吧！实现方式可以分为三种一、长按原生控件，直接获取控件中的图片数据（src或background）二、长按原生控件，截图识别三、长按web中的图片，app识别其中的二维码 第一二种好像没多少可以说的，但还是按照顺序来吧！首先先说下使用的库，ios使用原生二维码识别库（好像是ios7之后才有的），然后说是WKWebView比UIWebV

h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽

aamen1109的博客

02-02

6284

在ios下，双击屏幕某些地方，滚动条会自动向上走一段。当用微信看h5的时候，拖拽到底部，会漏出来，微信自带下面的灰黑色皮肤。用js解决一下吧，这俩问题很类似，总结到一起了。 ----------特别注意，安卓没有发生过这些情况，因为解决办法是给最外层的wrapper，overflow-y:auto;也就是放弃了原生的滚动条，所以解决的时候要判断一下系统，安卓就不用处理了。 html部分

参与评论您还未登录，请先登录后发表或查看评论

H5 js 识别二维码信息

10-17

quaggaJS-master 内涵demo，所有的js文件及配置文件

H5页面长按识别二维码

weixin_42323457的博客

04-30

6082

我这里是用vue 写的H5 ，内嵌在小程序上, 当支付成功后会弹出一个窗， img 标签上直接是张二维码图片，我给转base64 了， <img src="data:image/png;base64....."style="width: 200px;background-size:100% 100%;height: 200px;-webkit-touch-callout : none;...

ios中嵌套h5做的app，长按图片默认会有放大效果；如何禁止

热门推荐

Jacklin

03-21

1万+

问题描述在iOS 10下，首次进入应用时，会有询问是否允许网络连接权限的的弹窗，为更好进行用户交互，需要在打开应用时获取应用禁用网络权限状态（状态分为：未知、限制网络、未限制网络），客户端根据不同的权限状态定制相应的人机交互。问题调研针对请求应用网络权限可能存在的几种情形，操作与对应的状态都是笔者测试得到的，具体如下所示：可能操作关闭无线局域网无线局域网&蜂窝不进

APP内嵌网页使用微信或支付宝的H5支付

起岸星辰

04-09

4228

如何绕过微信或支付宝的H5支付的拦截验证？下面我们从本质上来说明该如何解决这个问题。微信和支付宝的H5支付下单成功后都会返回一个跳转支付的url连接，通过这个连接可以拉起微信或支付宝进行支付操作。如果直接访问，支付宝会有一个中间的页面，而微信有个麻烦的refresh验证问题；那么是否可以跳过这个步骤直接将微信支付宝拉起进行支付呢？网上大部分的教程都是让做安卓和IOS的自己去拦截微信和支付宝的地址进行处理。但是对这种内嵌网页，特别是那种直接通过前端HTML代码生成多端的情况，前端的同学就非常不好操作了；

h5开发小结

攻城喵小猫的博客

05-22

261

Viewport  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">  <meta name=...

H5调用手机相机识别二维码

07-23

h5页面在微博客户端中呼起摄像头扫描二维码并且解析；原生浏览器或者微信客户端呼起系统拍照或者上传图片按钮，拍照二维码或者上传二维码并且解析

js实现长按二维码识别及上传二维码识别

11-13

js实现长按二维码识别及上传二维码识别。样式随便写的，可以自己修改

原生js ---- 二维码解析器和移动端长按识别二位码demo

09-19

利用了qrcode.js这个插件的qrcode.decode和qrcode.callback，就能对二维码进行解析，同时对解析结果进行返回。

微信小程序webview实现长按点击识别二维码功能示例

10-17

主要介绍了微信小程序webview实现长按点击识别二维码功能,结合实例形式分析了webview二维码识别相关操作技巧,需要的朋友可以参考下

微信H5页面长按识别二维码

weixin_42865522的博客

11-18

5658

一定要查看img的这些样式有没有被none!!! img { user-select: auto; pointer-events: auto; -webkit-touch-callout: auto; -moz-user-select: auto; -webkit-user-select: auto; ...

h5嵌入微信小程序webView长按识别二维码

weixin_44409569的博客

03-16

3801

小程序内实现长按识别二维码啦。1、h5页面用于渲染图片。2、微信小程序接收图片。

如何使用h5-scan-qrcode插件实现一个h5页面扫码识别二维码功能

熟悉 vue2 vue3 jquery js echarts

03-20

6905

jsQR.js ---- 是这个插件所用的一个js可以在vue文件里面直接拿出来可以去官网看看（不想动手的麻烦踢踢后台的我给你们私发！scancode ---- html文件如何引入js。我做的比这个效果多一个拿取本地图库的二维码扫码。scancode.js---- 封装的js文件。jquery.js ----这就不用说了吧。这个是效果可以提前看一下~

手机浏览器中H5跳转微信小程序长按识别二维码

superw的博客

03-01

5895

APP中订购课程后发送短信通知，用户点短信中连接进入H5，此时H5是手机浏览器中打开，不是微信生态所以放的客服二微码无法长按识别。

h5二维码长按不可识别

judykang123的博客

10-23

1317

为了让用户不能获取我们的图片，好多地方都会用background然后就会发现二维码识别不了了，解决办法就是： 二维码的标签要用img而不是div加background 如果是因为图片太长识别不了二维码，就把二维码放大点 ...

iOS图片点击放大与长按保存实现教程

"这篇文章主要展示了如何在iOS应用中实现点击图片放大以及长按保存图片的功能。作者通过分享自己的开发经验，提供了一种实现图片缩放的解决方案，并且提及了可能会在实名认证或绑定银行卡等场景中遇到的需求。" 在...