h5页面禁用手机识别

最新推荐文章于 2023-10-13 18:05:52 发布
最新推荐文章于 2023-10-13 18:05:52 发布
阅读量2.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Web前端 文章标签： 手机识别禁用 web应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/feinifi/article/details/54311754
本文介绍了一种常见情况：网站使用手机号作为用户名时，移动端会自动将其识别为可拨打的电话号码，导致用户体验不佳。文章提供了两种解决方案：一是通过meta标签禁用自动识别；二是通过JavaScript阻止点击事件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一般来讲，很多web应用都会使用手机号作为用户名或者唯一凭证，这时手机号就会显示在页面，这样如果没有特殊设置比如修改用户信息，或者跳转链接，普通的文本会被移动端识别为手机号，点击时调起电话，联系人等功能，这点会被很多用户反感。

解决办法：直接通过页面设置禁用手机识别

<meta name="format-detection" content="telephone=no"/>

这样可以禁用大部分安卓手机的自动识别功能，但是我亲测的情况下仍然有一款手机zuk1还是会自动识别手机，很头疼。最后不得已使用了如下办法解决了这个问题。
这里写图片描述

代码如下

<span class='xxxxxxuser fr' onclick='return false;'>{{data.user}}</span>
微信公众号 - 禁用 H5 网页长按图片时弹出的菜单（转发给朋友 / 保存到手机 / 收藏 / 搜一搜），苹果安卓系统都可暴力 100% 完美禁用菜单，任何前端框架、任何浏览器都适用的解决方案
资深程序员
10-09 2276
微信公众号网页H5禁用长按弹出的菜单，uniapp vue项目 H5网页在微信浏览器怎么禁用长按图片弹出的菜单，微信公众平台禁用微信h5的长按弹窗，禁用h5页面中长按图片弹出的弹层，react vue uniapp 网页H5怎么禁止微信公众号h5页面长按弹出菜单，前端公众号网页如何禁用长按图片显示的菜单，H5网站微信公众号页面禁止长按弹出系统菜单,兼容ios和安卓，微信公众号h5页面图片长按问题，彻底解决H5页面中长按保存图片，HTML5网页公众号移动端网页怎么把长按图片弹出的菜单去掉，微信公众号 - 禁用
h5页面跳转微信小程序（最简单的方法|URL Scheme）
weixin_44175192的博客
10-09 3559
用户可以在H5页面中浏览和选择商品、服务等内容，然后直接跳转到微信小程序中进行购买、支付等操作，避免了在不同平台之间的切换和跳转，提高了使用效率和便捷性。开发者无需调用平台接口，在MP平台->设置->隐私与安全->明文Scheme拉起此小程序声明后，可自行根据如下格式拼接appid和path等参数，作为明文 URL Scheme 链接。请开发者妥善处理用户选择不跳转的场景。微信内的网页如需打开小程序请使用微信开放标签-小程序跳转按钮，无公众号也可以直接使用小程序身份开发网页并免鉴权跳转小程序，见。
h5 ios手机 禁用自动识别为手机号码
huch的博客
05-24 5438
因为真正做前端h5开发的时间也不太长，所以经验上有些缺乏，有些特性不太清楚。就比如说我下面要写的一个小知识点： 有天测试告诉说，有些ios手机上，页面上某个金额会一开始显示黑色过一会就变成绿色了，我拿到视频一看，马上去检查代码（代码中写的就是color:#000黑色），我一时间只把它当成系统的特殊识别，并不知道原因的。后面测试又提供了一个有力的现象，就是发现 在一个发送验证码页面最上方提示的 已...
Js 手机端禁用返回按钮
u012110480的专栏
03-22 3824
<script type="text/javascript"> //禁用返回 $(document).ready(function () { if (window.history && window.history.pushState) { $(window).on('popstate', function () { ...
禁止页面识别手机号
qq_24466961的博客
03-08 1174
&lt;meta name="format-detection" content="telephone=no"&gt;
H5, 遇到的 ios 兼容性问题
tianruine的博客
07-22 2111
就是在原生里面先写好打开原生分享的逻辑的一个函数，但是不执行，然后把调用这个函数挂载到webview.window上，然后再H5页面需要的调用的时候就直接传入函数中的参数，调用函数就可以调用原生的分享。是在原生里面通过ifream.src自定义网址并携带参数，在原生里面拦截这个接口，并且取出里面的参数，然后通过区分发来的这个接口，来的调用原生的分享。键盘不能回落问题出现在iOS12+和wechat6.7.4+中，而在微信H5开发中是比较常见的Bug。调用的时候不刷新WebView。...
浏览器h5获取不到具体的手机型号和设备唯一标识符
铁锤妹妹的博客
05-27 1万+
前言 最近对接一个登录接口，要求获取手机型号，设备唯一标识码，然后去百度了一大通，最后得出一个结论。 js是获取不了手机的IMEI信息的，因为js是运行在浏览器上的语言，只能获取浏览器内核信息，获取不了手机本身的设备型号（IMEI,IDFA），手机型号（iphone12，国行A123) 什么是设备唯一标识符？ 具体代码实现 mobile-detect插件官方文档传送门 npm install mobile-detect --save import mobileDetect from "mobile-d
HTML5对手机页面长按会粘贴复制禁用的解决方法
09-28
本文将详细介绍如何通过CSS来禁用手机页面上的长按粘贴复制功能。 首先，我们可以利用CSS的特定选择器来全局禁用网页元素的用户选择行为。在CSS文件中添加以下代码： ```css * { -webkit-touch-callout: none; /*...
微信h5页面屏蔽检测api
ff00yo的博客
04-09 976
用微信打开一些h5页面、棋牌游戏 小说等等内容 经常会提示：已停止访问该网页。 这里给广大推广者们介绍一个很好用的微信域名检测api， 可以实时检测微信域名是否被拦截，有异常及时通知。 专业技术团队采用微信官方接口打造，确保稳定高效安全 微信域名检测api来自：https://wx.horocn.com/product-domain-check.html 注意：记得替换下面的 API Token，...
h5调用指纹识别_如何用Html5进行指纹跟踪？
weixin_39531178的博客
12-22 1784
本文继《浅谈Web客户端追踪(上)》继续对主流的Web客户端追踪技术进行分析，主要介绍典型的指纹追踪技术和WebRTC技术，介绍一些简单的防跟踪的方法，并给出相关参考供感兴趣的朋友深入研究。一、 典型追踪技术1. 浏览器指纹追踪类似人的外貌和指纹，Web客户端(这里主要指浏览器)也有多种“外貌”信息和“指纹”信息，将这些信息综合分析计算后，可对客户端进行唯一性识别，进而锁定、追踪、了解网民行为和隐...
Html5页面获取微信公众号的openid的方法
11-20
1、H5页面是运行在微信浏览器的 2、需要与公众号关联（即需要openid） 3、判断需求是否需要弹窗告知用户授权操作 4、获取地址栏参数判断是否有’code’,有的话直接传给后台换取openid,没有就跳转微信提供的获取code的链接 5、获取到的openid做本地存储，判断没有openid进行获取openid操作 6、这边的操作是不需要弹出授权框，且code不能重复使用，所以做了关注二维码弹窗且不能关闭弹窗操作 // 强制关注公众号，获取openid getCode = function () { if (sessionStorage.getItem("openid")&&ses
uniapp H5页面、小程序页面获取手机号拨打电话
maoge_666的博客
04-12 3893
uniapp H5页面、小程序页面获取手机号拨打电话
H5校验本机号码前端
神夜空间
03-21 2185
后端：传入手机号和spToken请求【verifyPhoneWithToken】接口校验是否本机流量卡号码。前端：身份鉴权获传入accessToken和jwtToken【checkAuthAvailable】成功。后端：传入域名后端获取授权accessToken和jwtToken 【getAuthToken】前端：再获取根据【getVerifyToken】获取spToken。请在关闭Wifi的时候测试，否则不容易成功。
小程序基本命令
aiven1637的博客
10-30 3441
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
【微信小程序】获取用户手机号的实现
RogerQianpeng的博客
12-06 4540
本文，是纯前端实现微信小程序获取用户手机号的实现方法总结，并给出了相应的注意点与优化点说明。 （注意：获取用户手机号，需要用已通过企业认证的小程序账号）1、记录一下实现方法。2、官方文档写得详细具体，但弯弯绕绕，不易理解与操作。3、网络上缺少相关的高质量的完整文章。可以，很多文章都用了后端，但这都是落后的、过时的、不必要的。不需要，那些文章都是落后的、过时的或者不全面的。对于后续优化，本文只能给出方向，不能给出具体实现；对于一进入小程序，不需要点击按钮就获取用户手机号，并未找到实现方法；对于点击获取用户手机
微信公众号如何获取手机号，H5调用小程序，小程序调用H5
热门推荐
雷绍发
09-04 6万+
都知道微信公众号获取不到手机号，但是小程序可以。 今天大早晨老大死磕非要我公众号授权获取到手机号。没办法我还是有其他方法解决。 第一步：服务号添加一个小程序，网上有很多小程序授权的代码。确定小程序可以授权成功并且能获取到手机号 第二部：服务号网页授权成功获取到open_id记录到用户表里面 第三部：网页授权成功之后调用小程序，授权获取手机号 第四部：小程序获取到手机号成功之后调回到网页 ...
微信小程序获取手机号
m0_49407241的博客
10-13 748
只有另外的三个参数，我在这里找了很久也没找到什么原因，后来在微信社区里找到是因为 基础库里面的版本低于2.21.2导致的，这真的是很坑，强行更新，也不说明。再找到这个原因前我也进行更新开发者版本，也进行了卸载重装也没有效果。只能在这里调整到2.21.2以上的版本才会有。调整后可以看如下，就会有code显示了，同学们一定要注意这个坑！wx.login的code，而是微信获取手机号的组件。
不禁网页的浏览器_明明浏览“不良网站”危险，为啥手机浏览器却不强制禁止访问？...
weixin_35501172的博客
02-22 6567
原标题：明明浏览“不良网站”危险，为啥手机浏览器却不强制禁止访问？明明浏览“不良网站”危险，为啥手机浏览器却不强制禁止访问？众所周知，互联网时代下，由于一些新事物的普及，比如说移动支付的普及，让我们的个人信息安全、财产安全，变得越来越重要，所以说，其实在笔者看来，咱们不应该浏览“不良网站”，经常看笔者的文章的人，应该就知道，我一直强调这些网站的危险，比如说会导致个人信息被兜售，导致手机硬件受损、变...
基于运营商的本机号码一键登录原理与应用
哈利路亚的收藏夹
05-23 1782
很多APP的目前都支持“本机号码一键登录”功能。本机号码一键登录是基于运营商独有网关认证能力推出的账号认证产品。用户只需一键授权，即可实现以本机号码注册/登录，相比先前的短信验证码流程体验更优。 目前市面上有很多厂商提供三网验证的服务，只不过是对三大运营商的包装。要了解具体的原理可直接看三大运营商相关的介绍。 中国移动 中国移动号码认证服务支支持移动、联通、电信三网号码。主要产品功能： 一键登录：依托运营商的移动通信网络，采用通信网关取号技术，准确识别用户流量卡归属的手机号码。在获得用户授权
H5 手机端 滚动显示不全
最新发布
03-08
### H5 页面手机端滚动显示不全解决方案 对于H5页面在手机端遇到的滚动显示不全问题，通常涉及多个方面的原因分析与对应的解决策略。 #### 一、iOS设备无滚动条且无法滑动的情况 针对苹果手机不存在滚动条并伴有不能滑动的现象，这可能是由于某些特定设置或属性影响了默认行为。为了使iOS下的网页能够正常响应用户的触摸操作，建议移除可能干扰滚动机制的相关CSS声明[^1]。 #### 二、处理移动端页面滚动冲突的方法 有时会因为JavaScript代码试图控制整个文档体(`body`)的行为而导致滚动异常。采用一种更为精细的方式去锁定指定区域内的滚动而非全局范围能有效改善这一状况。通过调整`position`属性以及保存恢复视窗位置来实现局部固定效果是一个不错的选择[^2]。 ```javascript // JavaScript 实现局部滚动锁住功能 export const bodyScroll={ scrollTop:0, stop(){ this.scrollTop=document.body.scrollTop || document.documentElement.scrollTop; document.body.style.position='fixed'; document.body.style.top=`-${this.scrollTop}px`; document.body.style.width=`100%`; }, restore(){ document.body.style.position=''; document.body.style.top=''; document.body.style.width=''; window.scrollTo(0,this.scrollTop); } } ``` #### 三、避免因样式误配置引起的滚动失效 如果发现即使没有明显阻止滚动的操作仍然存在此问题，则需检查是否存在不当使用的CSS规则。特别是像`touch-action:none;`这样的定义可能会意外地禁用了触控板上的手势识别能力，从而阻碍正常的拖拽动作。应将其改为允许自动处理接触事件的状态即`touch-action:auto;`或将该行完全去除以恢复正常交互逻辑[^3]。 综上所述，要彻底解决问题需要综合考虑以上几个因素，并逐一排查潜在原因直至找到最合适的修正措施。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

luffy5459

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值