Question

我使用一些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>

是否有更好，更简化的解决方案？

Answer 1

如果您不介意使用一些JavaScript，可以将电话号码保留在<a>标记内，如果窗口宽度大于400px，则可以删除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/

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

1 个答案: