如何为社交媒体网站的链接编写代码：如果是移动应用程序，则为移动应用程序；如果是台式机，则为标准URL？

Question

如何在网站上建立链接，根据您使用的设备类型（移动应用程序与本机类型），该链接有两种可能的结果。

移动

<a href="fb://profile/6815841748">Facebook</a>
<a href="instagram://user?username=barackobama">Instagram</a>
<a href="twitter://813286">Twitter</a>

如果在桌面上单击，我将得到： “没有设置用于打开URL的应用程序”

---

本机

<a href="https://www.facebook.com/6815841748">Facebook</a>
<a href="https://www.instagram.com/barackobama">Instagram</a>
<a href="https://www.twitter.com/813286">Twitter</a>

这将重定向到浏览器中的社交媒体网站； 不在移动应用中。

---

我不确定这是我可以使用纯HTML5还是使用jQuery / Javascript来完成？

我也不知道是否需要编写特定于每个操作系统（iOS / Android / Windows等）的移动应用程序URL。 我只有iOS可以测试。

---

注意：我最好不要使用CSS宽度，因为我认为这不是最佳实践。 如果桌面用户使用拆分屏幕或调整大小的窗口单击链接，则很容易中断。

Answer 1

为此使用CSS媒体查询的问题是，如果用户未安装该应用程序，则它将不会执行任何操作（或者，对于Android，它将用户重定向到Play商店中的应用程序）。

因此，我的建议是使用Javascript，检查userAgent字符串，并通过它设置链接。 使用超时延迟或计时器检查用户单击链接后是否仍在页面上。 如果是这样，则意味着它们没有安装应用程序，因此您可以将它们重定向到常规页面。

有关示例或要点，请参见以下内容：

如何在网站上使用http url后备使跨浏览器的本机应用url？

如何从移动浏览器启动应用程序（facebook / twitter / etc），但是如果未安装应用程序，则退回到超链接

https://webmasters.stackexchange.com/questions/47161/app-uri-scheme-fallback-urls

Answer 2

您可以使用bootstrap Responsive-utilities类来实现此目的：

http://getbootstrap.com/css/#sensitive-utilities

<a class="visible-xs" href="fb://profile/6815841748">Facebook</a>
<a class="visible-xs"  href="instagram://user?username=barackobama">Instagram</a>
<a class="visible-xs" href="twitter://813286">Twitter</a>

网页

<a class="hidden-xs" href="https://www.facebook.com/6815841748">Facebook</a>
<a class="hidden-xs" href="https://www.instagram.com/barackobama">Instagram</a>
<a class="hidden-xs" href="https://www.twitter.com/813286">Twitter</a>

Answer 3

可以用css完成

移动

<a class="mobile" href="fb://profile/6815841748">Facebook</a>
<a class="mobile" href="instagram://user?username=barackobama">Instagram</a>
<a class="mobile" href="twitter://813286">Twitter</a>

网页

<a class="web" href="https://www.facebook.com/6815841748">Facebook</a>
<a class="web" href="https://www.instagram.com/barackobama">Instagram</a>
<a class="web" href="https://www.twitter.com/813286">Twitter</a>

的CSS

.mobile{
  display:none;
}

@media only screen and (max-width: 1024px) {
  .mobile{
    display:block;
  }
  .web{
    display:none;
  }
}

确保在网页上都放置了两组超链接。