有没有一种优雅的方法可以在响应式网站上点击电话号码？答案

【问题标题】：Is there an elegant way to make phone numbers clickable on reactive websites?有没有一种优雅的方法可以在响应式网站上点击电话号码？
【发布时间】：2019-01-26 03:22:32
【问题描述】：

我使用了一些 CSS 来检测视口大小，并在用户使用电话时将电话号码显示为可点击的链接。虽然效果很好，但对我来说似乎很笨重。

CSS：

@media screen and (min-width: 0px) and (max-width: 400px) {
  #show-on-mobile { display: block; }  /* show it on small screens */
  #hide-on-mobile { display: none; } 
}

@media screen and (min-width: 401px) and (max-width: 2024px) {
  #show-on-mobile  { display: none; }   /* hide it elsewhere */
  #hide-on-mobile  { display: block; }

}

HTML

<div id="show-on-mobile">
    <a href="tel:+14109842714">+1 000-000-0000</a>
</div>
<div x-ms-format-detection="none" id="hide-on-mobile">
    +1 000-000-0000
</div>

有没有更好、更精简的解决方案？

【问题讨论】：

Is there a way to make a phone number clickable on an iphone or android phone to make a call in HTML?的可能重复
要js解决方案吗？
如果有一些快速简单的 JQuery 函数会很棒。
你为什么要这个？从链接中删除链接样式是否足够好？

标签： html css

【解决方案1】：

如果您不介意使用一点 javascript，您可以将电话号码留在 <a> 标记中，如果窗口宽度大于 400 像素，则删除 href 组件。

HTML：

<a href="tel:+14109842714">+1 000-000-0000</a>

JavaScript：

window.onload = function(){
    if ( window.innerWidth > 400 ) {
        document.querySelector('[href="tel:+14109842714"]').href = '';
    }
};

CSSTricks 有一篇很棒的小文章：https://css-tricks.com/how-to-disable-links/

【讨论】：