javascript - 将href短信更改为具有响应式设计的href mailto?

原文 标签 javascript html css html5

如果设备不支持短信,即无法在手机(iPhone,Android等)上查看网页,是否可以将href短信更改为href mailto?

我设法制作了一个“呼喊”按钮,该按钮使用短信发送网页的网址,但是我希望在不通过电话查看时(即在平板电脑上查看网页时)将其更改为mailto,笔记本电脑等

这是我整理的代码:

<section id="shout">
    <button class="button shout"><a href="sms:?&body=mysite.com" class="shoutButton">Shout</a></button>
</section>


我正在使用外部CSS文件来设置页面和按钮的样式。它似乎可以在我尝试过的所有手机上使用,所以很酷。我已经研究过使用@media,但这似乎不是正确的方法,并且我尝试了其他方法,但均未成功。我给了它一个不错的选择,但是我的技能不是很好,因此任何帮助将不胜感激。

谢谢 :)

最佳答案

您将创建两个链接,并且仅显示基于CSS @media query的链接。



/* Default Style (mobile first!) */
.phone { display:inline; }
.desktop { display:none; } 


/* Desktops */
@media screen and (min-width:1024px) {
  .phone { display:none; }
  .desktop { display:inline; }  
}

<section id="shout">
    <button class="button shout phone">
      <a href="sms:?&body=mysite.com" class="shoutButton">Shout from Phone</a>
    </button>
    <button class="button shout desktop">
      <a href="mailto:something@something.com" class="shoutButton">Shout from Desktop</a>
    </button>
</section>

关于javascript - 将href短信更改为具有响应式设计的href mailto?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41232209/

相关文章:

jquery - 避免将CSS应用于子列表项

javascript - 使用 meteor 框架处理地理定位

javascript - 使用上/下键在表格的文本字段之间移动

javascript - Jquery显示/隐藏div onclick单选按钮 - 根本不起作用

php - 为什么我的JS的位置改变了我的html代码?

javascript - Google Apps Script 可以逐行读取文本吗?

html - CSS Flex Box布局中断

javascript - 最初固定的完整背景图像,然后在 DIV 内容结束时滚动

javascript - 如何使用javascript解析字符串并将其分为两个部分?

javascript - 谁标准化了 JavaScript 语言