是否可以根据屏幕尺寸设置两个href链接(电话号码和网站链接)?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (17)
<a href="contact.html" href="tel:5555555555">Contact</a>

我正在尝试创建一个联系人按钮,如果用户不在移动屏幕上,该按钮会将用户带到网站链接。但是,如果用户在小于1280像素的屏幕上,即ie.@media screen and (max-width: 1280px) {...然后我想要联系人按钮来拨打链接中的号码。

我在那里的href工作正常,但我试图根据屏幕大小得到两者。有没有办法让这成为可能?

提问于
用户回答回答于

这可以通过CSS媒体查询(https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)

因此,你将有两个链接:

.visible-on-mobile {
  display: none;
}

.visible-on-desktop {
  display: inline;
}

@media only screen and (max-width: 640px) {
  .visible-on-mobile {
    display: inline;
  }
  .visible-on-desktop {
    display: none;
  }
}
<a href="tel:0000000000" class="visible-on-mobile">Phone</a>
<a href="mailto:hi@example.com" class="visible-on-desktop">Email</a>

当设备宽度小于或等于640 px时,这将显示电话链接,否则,将显示电子邮件链接。

所属标签

可能回答问题的人

  • 嗨喽你好

    7 粉丝480 提问8 回答
  • uncle_light

    5 粉丝518 提问6 回答
  • 人生的旅途

    10 粉丝484 提问6 回答
  • 富有想象力的人

    3 粉丝0 提问6 回答

扫码关注云+社区

领取腾讯云代金券