禁止Safari将数字识别成电话号码,增加特殊效果

最新推荐文章于 2021-06-23 14:35:53 发布
最新推荐文章于 2021-06-23 14:35:53 发布
阅读量2.6k 收藏
点赞数
分类专栏： 遇到的问题


用ipad访问我的网站时，发现网站上的一串数字变颜色了（原来是红色的），现在变成了蓝色。一开始以为网站出了什么问题，后来在PC端查看，发现颜色依旧是红色。在ipad上点击还会弹出菜单呼叫的选项，基本可以断定是Safari搞的鬼了。Safari识别电话号码功能会自动将数字识别成电话号码。


为了这个问题，到Safari的官网翻找，发现Safari有个私有meta属性可以解决这个问题。在<head>...</head>之间添加以下代码即可解决。


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




shirley云
关注
专栏目录
JS高级知识点最新最全梳理上篇（codewhy视频）
qq_59079803的博客
07-11 2783
前言：过程：1.JS引擎在执行JS代码的过程（内存） 复杂数据类型对应的空间中存储的不是直接是复杂数据类型，而是内存地址2.函数调用函数的执行过程 函数的父级作用域链在内存中跟调用位置没有关系的，是在定义位置有关 代码： 图片： 描述过程：3.变量环境和记录VO：前言： 1.闭包 概念： 作用： 造成的问题 手写闭包打印123 代码片段 闭包内存泄漏 闭包面试题：.......................................
H5页面（八）常见的问题二------填坑
斗师——Ace
06-09 1943
添加小程序，兑换各种视频教程/数据资源。 1. 添加到主屏后的标题（IOS） <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS） 当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） <meta name="app...
关于如何禁止识别页面中的数字为电话号码
weixin_30421809的博客
04-13 384
有些手机会将网页中的数字识别为电话号码，出现‘变色’的情况。 可以用meta标签解决这个问题。 <meta name="format-detection" content="telephone=no,email=no"/> 这样就不会出现‘变色’情况了。 转载于:https://www.cnblogs.com/wangtianze/p/6702046.html...
防止在iOS设备中的Safari将数字识别为电话号码
weixin_33778544的博客
11-24 186
在测试中发现iPad上的Safari总会把长串数字识别为电话号码，文字变成蓝色，点击还会弹出菜单添加到通讯录。 别的地方倒也罢了，如果在用户名中出现数字（手机注册新浪微博的话用户名就是“手机用户xxxxxxxx”），版式会很恶心。 经过测试在a标签中的长串数字不会识别为电话，于是给出现用户名但没有链接的地方嵌套一个无动作的a标签，临时解决了这个问题。 但是这样增加了额外的标签，代码的语义性变...
手机中的页面数字不显示为电话号码 和 点击按钮不出现阴影和苹果中限制缩放
goodyatou的专栏
09-25 1843
*{ -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; /* For some Androids */ }
积跬步，聚小流------关闭iphone浏览器自动识别数字为电话号码
麦田里
12-15 1936
一次愉悦的问题解决过程
禁止safari自动识别数字为电话号码，强加样式
caimingxian401的博客
04-28 2123
写移动端页面时，一次在iphone手机的safari浏览器打开页面，突然发现每次页面加载完底部的电话号码，都会突然样式失控，变成不是自己最开始设置的效果，如下图一开始还以为自己样式不合理，后来终于发现是safari搞鬼，只需在页面头部加一句，就可以解决了：&lt;meta name="format-detection" content="telephone=no" /&gt;...
名称检查器
02-17
1. **名称合法性验证**：检查用户输入的名称是否符合特定的规则，比如不允许包含特殊字符、数字或特定的词汇。这通常通过正则表达式实现，例如限制长度、禁止某些字符等。 2. **格式化名称**：将输入的名称按照特定...
Wab app开发 必须了解的知识点
rudy24的博客
02-29 1668
1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用   //这个如果IE有安装Google Chrome Frame，那么就走安装的组建，如果没有就是上面的一样   “”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=“no”
CSS3---移动端苹果安卓适配
weixin_45343884的博客
09-20 1754
常见苹果适配问题： 【问题1】：iPhone页面会自动把数字当成电话号码，点击后自动跳到电话拨号界面 ♥♥♥方案：<meta name="format-detection" content="telephone=no" /> 【问题2】微信浏览器自动调整页面字体大小 ♥♥♥方案：禁止微信浏览器调整页面字体大小: body{ -webkit-text-size-adjust...
css数字字体反爬的解决方案
qq_33532804的博客
06-23 262
css数字字体反爬的解决方案 方案 使用Tesseract-OCR识别 步骤 使用selenium请求页面 定位到需要识别的元素 对元素进行截图 使用tesseract-ocr进行识别 优点 简单，有现成的工具 适用范围广，可适用于汉字 缺点 元素定位后的截图准确性的问题 ocr识别受干扰线影响较大 ocr识别的准确性问题 ocr识别及图片处理的性能问题 使用点阵模板文件映射 步骤 使用工具生成点阵模板xml文件，(css的demo及fonteditor在线工具，css的demo可以生成带有U
css3 属性选择器 对于数字识别问题
weixin_33836874的博客
05-10 583
为什么80%的码农都做不了架构师？>>> ...
笔记：防止 Safari 浏览器中的数字被识别为电话号码
qq_39108466的博客
05-08 1748
在Safari浏览器中，有一个默认开启的功能, 会把网页中的数字自动识别为电话号码, 并且改变文字的颜色和样式（蓝色）,这种情况下如果我们需要相应位置背景色也为蓝色或其他，就有点尴尬，而 这个默认样式貌似也改不了。 解决方法： 在&lt;head&gt;&lt;/head&gt;中加入 &lt;meta name="format-detection" content="telephone=n...
关于 meta name="format-detection"
ddsk97345的博客
11-04 226
<meta name="format-detection"/> 当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。 在 iPhone 上默认值是： <meta name="format-detection" content="telephone=yes"/> 如果你不希望手机自动将网页中的电话号码...
Safari移动端 数字被识别成电话号码
a924469718的博客
10-20 1371
测试时发现网站上的手机号变颜色了（原来是白色的），现在变成了黑色。一开始以为样式出了什么问题，后来在PC端及其他手机浏览器查看，发现颜色依旧是白色。点击还会弹出菜单呼叫的选项。 本来的背景就是黑色 现在电话号变成黑色 就看不到了。 为了这个问题，到Safari的官网翻找，发现Safari有个私有meta属性可以解决这个问题。 在...之间添加以下代码即可解决。
关于在safari浏览器中禁止电话号码可以拨打的解决方案
qq_35289561的博客
05-29 1780
电话号码显示为拨号的超链接
Meta标签中的format-detection属性及含义
weixin_30848775的博客
09-30 170
format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置： <meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content=...
移动端 safari苹果手机对大额数字自动变成电话号码
weixin_33720452的博客
09-22 272
1、苹果手机safari浏览器，用<meta name="format-detection" content="telephone=no">解决。缺点 ：所有 应该是电话号码的也不会是电话号码。，如果想要页面识别电话功能： <a href=“tel:1234561”>1234561 </a> 就可以了 2、用千分位分隔符，分割大额数字。 可以用一下2种...
如何关闭iPhone浏览器自动将数字识别为电话号码
Sunny_myj的博客
12-30 3029
在项目中发现Safari会自动把数字串添加电话链接，数字颜色变为蓝，点击之后会询问用户是否想要拨打该号码。 这样就破坏了原来页面的设计，如果你不希望开启这个自动识别，可以将它关闭：                如果你关闭自动识别后，又希望某些电话号码能够链接到iPhone的拨号功能，那么可以通过这样来声明电话链接：               :18899996666
前端web端如何实现mobileconfig在Safari浏览器自动识别安装
最新发布
09-19
在Web前端实现移动配置(Mobile Config)文件在Safari浏览器的自动识别和安装，通常需要借助苹果的插件技术，尤其是`apple-app-site-association` (Association Domains) 和 `WKWebView`。以下是基本步骤： 1. 创建`apple-app-site-association`文件（`.json`格式）：这个文件包含应用程序的URLs和它们对应的应用程序ID。这告诉Safari哪些网站应该被视为特定应用的一部分。示例内容如下： ```json { "applinks": { "apps": [], "details": [ { "appID": "your.app.id", "paths": ["/path/*"] } ] } } ``` 2. 将此文件上传到服务器并与您的网站关联的URL一起提供（例如：`https://yourdomain.com/apple-app-site-association`）。 3. 使用WKWebView（WebKit版的WebView）替代普通的HTML渲染：WKWebView支持`WKWebViewConfiguration`，其中可以设置`WKUserContentController`来处理自定义JavaScript行为。通过JavaScript，您可以监听特定事件（如页面加载完成），然后尝试检测是否是苹果设备并检查`apple-app-site-association` 文件的存在。 4. JavaScript 代码示例： ```javascript if (window.navigator.standalone && window.MutationObserver) { const observer = new MutationObserver((mutationsList) => { mutationsList.forEach((mutation) => { if (mutation.type === 'childList') { // 检查apple-app-site-association文件是否存在 fetch('https://yourdomain.com/apple-app-site-association').then((response) => { if (response.ok) { // 应用安装脚本或其他操作... } else { console.error('Failed to load Mobile Config'); } }); } }); }); // 观察body变化 observer.observe(document.body, { childList: true }); } ``` 5. 需要注意的是，为了触发自动安装，用户必须先访问过含有`apple-app-site-association`文件的网页，并在Safari设置中将该站点添加到“允许从此网站安装”的列表中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值