首页 文章

如何禁用Mobile Safari中的电话号码链接?

提问于
浏览
323

iPhone上的Safari会自动为电话号码中显示的数字字符串创建链接 . 我正在写一个包含IP地址的网页,Safari正在将其转换为电话号码链接 . 是否可以为整个页面或页面上的元素禁用此行为?

24 回答

  • 1

    根据Safari HTML Reference,这似乎是正确的做法:

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

    如果禁用此功能但仍需要电话链接,仍可以使用“tel”URI方案 .

    这是Apple的开发者库中的relevant page .

  • 1

    要禁用特定元素的手机解析外观,这个CSS似乎可以解决这个问题:

    .element { pointer-events: none; }
    .element > a { text-decoration:none; color:inherit; }
    

    第一个规则禁用点击,第二个规则负责样式 .

  • 1

    我遇到了同样的问题 . 我在UIWebView上找到了一个属性,允许您关闭数据检测器 .

    self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
    
  • 27

    加上这个,我想这就是你要找的东西:

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

    我使用零宽度木匠 &zwj;

    把它放在电话号码的某处,它对我有用 . 在BrowserStack中测试(和Litmus用于电子邮件) .

  • 2

    Webview解决方案!

    对于PhoneGap-iPhone / PhoneGap-iOS应用程序,您可以通过将以下内容添加到项目的应用程序委托中来禁用电话号码检测:

    // ...
    
    - (void)webViewDidStartLoad:(UIWebView *)theWebView 
    {
        // disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
        theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;
    
        return [ super webViewDidStartLoad:theWebView ];
    }
    
    // ...
    

    来源:Disable Telephone Detection in PhoneGap-iOS .

  • 10

    要在页面的一部分上禁用电话号码检测,请将受影响的文本用href =“#”包装在锚标记中 . 如果您这样做,移动Safari和UIWebView应该不管它 .

    <a href="#"> 1234567 </a>
    
  • 0

    我想我找到了一个解决方案:将数字放在 <label> 元素中 . 没有尝试过任何其他标签,但 <div> 使其在主屏幕上保持活动状态,即使使用 telephone=no 属性也是如此 .

    从早期的评论中可以明显看出,meta标签确实有效,但由于某种原因,在iOS的后续版本中已经破解,至少在某些条件下 . 我正在运行4.0.1 .

  • 5

    您还可以将 <a> 标签与 javascript: void(0) 一起用作 href 值 .

    示例如下:
    <a href="javascript: void(0)">+44 456 77 89 87</a>

  • 1

    我有同样的问题,但在iPad网络应用程序上 .

    不幸的是,......

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

    也不......

    &#48; = 0
    &#57; = 9
    

    ......工作 .

    但是,这里有三个丑陋的黑客:

    • 用字母"O"替换数字"0"

    • 用字母"l"替换数字"1"

    • 插入无意义的 Span :例如, 555.5<span>5</span>5.5555

    根据您使用的字体,前两个几乎不会引人注意 . 后者显然涉及多余的代码,但对用户来说是不可见的 .

    Kludgy肯定会破解,如果您是从数据中动态生成代码,或者如果您不能以这种方式污染数据,则可能不可行 .

    但是,足够紧张 .

  • 4

    我有一个ABN(澳大利亚商业号码),iPad Safari坚持要转变为电话号码链接 . 这些建议都没有帮助 . 我的解决方案是在数字之间放置img标签 .

    ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709
    

    该类仅用于记录img标记的用途 .

    适用于iPad 1(4.3.1)和iPad 2(4.3.3) .

  • 32

    我的经历与其他人提到的相同 . 元标记......

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

    ...当网站在Mobile Safari中运行时(即使用chrome),但在作为webapp运行时停止工作(即,保存到主屏幕并在没有chrome的情况下运行) .

    我不太理想的解决方案是将值插入输入字段......

    <input type="text" readonly="readonly" style="border:none;" value="3105551212">
    

    它不太理想,因为尽管边框设置为无,但iOS会在场上方呈现一个多像素的灰色条 . 但是,它比将数字视为链接更好 .

  • 1

    我自己测试了这个并发现它有效,虽然它肯定不是一个优雅的解决方案 . 在电话号码中插入空 Span 将阻止数据检测器将其转换为链接 .

    (604) 555<span></span> -4321
    
  • 22

    <meta name = "format-detection" content = "telephone=no"> 不适用于电子邮件:如果您准备的HTML是电子邮件,则会忽略元标记 .

    如果你所针对的是电子邮件,那么这是另一个丑陋但又有效的解决方案:

    要避免链接或自动格式化的某些HTML示例:

    will cease operations <span class='ios-avoid-format'>on June 1,
    2012</span><span></span>.
    

    而那将使魔术发生的CSS:

    @media only screen and (device-width: 768px) and (orientation:portrait){
    span.ios-date{display:none;}
    span.ios-date + span:after{content:"on June 1, 2012";}
    }
    

    缺点:您可能需要为每个ipad / iphone纵向/横向组合进行媒体查询

  • 1

    您可以尝试将它们编码为HTML实体:

    &#48; = 0
    &#57; = 9
    
  • 1

    Sencha Touch app中的相同问题在app的index.html中使用元标记( <meta name="format-detection" content="telephone=no"> )解决 .

  • 0

    截至2012年6月13日,这个答案胜过一切:

    <a href="#" style="color: #666666; 
                       text-decoration: none;
                       pointer-events: none;">
      Boca Raton, FL 33487
    </a>
    

    将颜色更改为与文本匹配的颜色,文本修饰删除下划线,指针事件阻止它被视为浏览器中的链接(指针不会更改为手)

    这非常适合ios和浏览器上的HTML电子邮件 .

  • 34

    我使用的不仅仅是Mobile Safari的技巧是使用HTML转义码和电话号码中的一点标记 . 这使得浏览器更难以“识别”电话号码,即

    Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3
    
  • 7

    我也有此问题:Safari和其他移动浏览器会将增值税ID转换为电话号码 . 所以我想要一个干净的方法来避免单个元素,而不是整个页面(或网站) .
    我希望成为一个 tel: 链接, &#8288; HTML实体是Word-Joiner invisible character . 我试图通过将这个char放在某个意义上的位置来保持更多的语义(好吧,至少是某种方式),例如对于增值税ID,我选择根据its format将其放在不同的数字组之间,因此对于我写的意大利增值税: 0613605&#8288;048&#8288;8 ,它在0613605€048之八中呈现,并且不会在电话号码中转换 .

  • 6

    另一种选择是用字符 替换电话号码中的连字符(U 2011 'Unicode Non-Breaking Hyphen')

  • -10

    我对此感到困惑了一段时间,但终于想通了 . 我们对我们的网站进行了更新,并将一些数字转换为链接,而有些则没有 . 事实证明,如果数字位于<fieldset>中,则不会将其转换为链接 . 对于大多数情况显然不是正确的解决方案,但在某些情况下它将是正确的解决方案 .

  • 4

    为什么要删除链接,这使得用户非常友好 .

    如果您只是想删除自动编辑,但保持链接正常工作只需将其添加到您的CSS ...

    a[href^=tel] {
     color: inherit;
     text-decoration:inherit;
    }
    
  • 646

    将数字分解为单独的文本块

    301 <div style="display:inline-block">441</div> 3909
    
  • 2

    另一种解决方案是使用IP号的图像

相关问题