如何为社交媒体网站编码链接:如果是移动应用程序，则为移动应用程序;如果是台式机，则为标准URL

How to code a link for social media site: mobile app if mobile, and standard URL if desktop?

本文关键字：应用程序 移动 如果 URL 标准 台式机 媒体 网站 链接 编码      更新时间：2023-09-26

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


移动

<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宽度，因为我觉得这不是最佳实践。如果桌面用户使用分屏或调整大小的窗口单击链接，这很容易中断。

使用CSS媒体查询的问题是，如果用户没有安装应用程序，它将不会做任何事情（或者在Android的情况下，它会将用户重定向到Play Store上的应用程序）。

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

有关示例或注册表，请参阅以下内容：

如何在网站上使用http url回退跨浏览器本机应用程序url？

如何从移动浏览器启动应用程序（facebook/twitter/etc），但如果应用程序不是'；t已安装

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

您可以使用bootstrap Responsive实用程序类来实现这一点：

http://getbootstrap.com/css/#responsive-公用事业

<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>

Web

<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>

它可以用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>

Web

<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;
  }
}

请确保将这两组超链接都放在网页上。

相关文章：