h5页面禁用手机识别

最新推荐文章于 2022-08-30 14:07:31 发布
原创 最新推荐文章于 2022-08-30 14:07:31 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#手机识别禁用 #web应用

本文介绍了一种常见情况：网站使用手机号作为用户名时，移动端会自动将其识别为可拨打的电话号码，导致用户体验不佳。文章提供了两种解决方案：一是通过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 2279
微信公众号网页H5禁用长按弹出的菜单，uniapp vue项目 H5网页在微信浏览器怎么禁用长按图片弹出的菜单，微信公众平台禁用微信h5的长按弹窗，禁用h5页面中长按图片弹出的弹层，react vue uniapp 网页H5怎么禁止微信公众号h5页面长按弹出菜单，前端公众号网页如何禁用长按图片显示的菜单，H5网站微信公众号页面禁止长按弹出系统菜单,兼容ios和安卓，微信公众号h5页面图片长按问题，彻底解决H5页面中长按保存图片，HTML5网页公众号移动端网页怎么把长按图片弹出的菜单去掉，微信公众号 - 禁用
h5页面跳转微信小程序（最简单的方法|URL Scheme）
weixin_44175192的博客
10-09 3566
用户可以在H5页面中浏览和选择商品、服务等内容，然后直接跳转到微信小程序中进行购买、支付等操作，避免了在不同平台之间的切换和跳转，提高了使用效率和便捷性。开发者无需调用平台接口，在MP平台->设置->隐私与安全->明文Scheme拉起此小程序声明后，可自行根据如下格式拼接appid和path等参数，作为明文 URL Scheme 链接。请开发者妥善处理用户选择不跳转的场景。微信内的网页如需打开小程序请使用微信开放标签-小程序跳转按钮，无公众号也可以直接使用小程序身份开发网页并免鉴权跳转小程序，见。
h5 ios手机 禁用自动识别为手机号码
huch的博客
05-24 5438
因为真正做前端h5开发的时间也不太长，所以经验上有些缺乏，有些特性不太清楚。就比如说我下面要写的一个小知识点： 有天测试告诉说，有些ios手机上，页面上某个金额会一开始显示黑色过一会就变成绿色了，我拿到视频一看，马上去检查代码（代码中写的就是color:#000黑色），我一时间只把它当成系统的特殊识别，并不知道原因的。后面测试又提供了一个有力的现象，就是发现 在一个发送验证码页面最上方提示的 已...
Js 手机端禁用返回按钮
u012110480的专栏
03-22 3825
<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。...
vue h5页面获取手机设备信息
YY_WYG的博客
08-30 1万+
npm install device-detector-js，具体信息去npm上查找，这里按照流程，安装完直接使用就玩了，原理就是解析。我遇到的是埋点请求只能在苹果机上有效果，其他机型直接忽略请求。这个是我在谷歌上调试的结果，能成功获取记录信息。使用的使用vivo手机打不开页面。...
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客户端(这里主要指浏览器)也有多种“外貌”信息和“指纹”信息，将这些信息综合分析计算后，可对客户端进行唯一性识别，进而锁定、追踪、了解网民行为和隐...
浏览器h5获取不到具体的手机型号和设备唯一标识符
热门推荐
铁锤妹妹的博客
05-27 1万+
前言 最近对接一个登录接口，要求获取手机型号，设备唯一标识码，然后去百度了一大通，最后得出一个结论。 js是获取不了手机的IMEI信息的，因为js是运行在浏览器上的语言，只能获取浏览器内核信息，获取不了手机本身的设备型号（IMEI,IDFA），手机型号（iphone12，国行A123) 什么是设备唯一标识符？ 具体代码实现 mobile-detect插件官方文档传送门 npm install mobile-detect --save import mobileDetect from "mobile-d
如何让网站自动识别手机端与PC端
zhyoulun的专栏
07-21 8139
在你需要自动跳转的页面加入以下代码
不禁网页的浏览器_明明浏览“不良网站”危险，为啥手机浏览器却不强制禁止访问？...
weixin_35501172的博客
02-22 6567
原标题：明明浏览“不良网站”危险，为啥手机浏览器却不强制禁止访问？明明浏览“不良网站”危险，为啥手机浏览器却不强制禁止访问？众所周知，互联网时代下，由于一些新事物的普及，比如说移动支付的普及，让我们的个人信息安全、财产安全，变得越来越重要，所以说，其实在笔者看来，咱们不应该浏览“不良网站”，经常看笔者的文章的人，应该就知道，我一直强调这些网站的危险，比如说会导致个人信息被兜售，导致手机硬件受损、变...
JS取消事件默认行为和移动端触屏事件
heartToSky的博客
02-18 1454
在写一些特殊的页面时候可能会需要取消事件的默认行为，例如取消鼠标滚轮的默认滚动 window.addEventListener('mousewheel',function(e){ console.log('滚动了'); e.preventDefault() }, { passive: false }) //火狐用DOMMouseScroll绑定滚轮事件 window.addEventListener('DOMMouseScroll', function
H5之12__触摸与单击：基本的事件处理
daozhongyang的专栏
12-04 8294
在HTML5中， 如果基于鼠标的界面互动是单击， 触摸界面的基本交互方式就是 轻触. 一. 轻触与单击有相似之处， 但是也有不同. 即使触摸设备(例如： 手机) 没有鼠标，它们的浏览器仍然会触发鼠标事件， click, mouseover, mousedown 和 mouseup 都还会被触发。 二 移动浏览器有四种类型的触摸事件 事件名称 描
小程序H5获取手机号方案
weixin_40200876的博客
02-05 8935
原因说明： 1、由于小程序获取手机号是通过小城的button组件获取，和UI是耦合关系； 2、小程序的web-view组件默认铺满全屏幕，并且web-view组件上不允许覆盖任何其他小程序组件； 具体内容可参照web-view、button组件介绍； 解决方案： H5页面跳转小程序页面，获取到手机号后通过url传参方式将手机号传入h5页面 代码实现 小程序原声获取手机号： 1、.wxml文件 <buttonopen-type="g...
h5屏蔽页面中数字当手机号的问题
LYBWWP
04-22 5390
在head中加上   就可以屏蔽了
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、付费专栏及课程。

余额充值