首页 文章

如何编写社交媒体网站的链接：移动应用程序（如果是移动设备）和标准URL（如果是桌面设备）

提问于
浏览 次
0

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

移动

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

如果点击桌面，我会得到： "There is no application set to open the 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才能测试 .

Note: 我不想使用CSS宽度，因为我觉得这不是最好的做法 . 如果桌面用户使用分屏或调整大小的窗口单击链接，则很容易中断 .

javascript jquery html5 url mobile

3 回答

  • 2

    使用CSS媒体查询的问题是，如果用户没有安装应用程序，它将不会执行任何操作（或者在Android的情况下，它会将用户重定向到Play商店中的应用程序） .

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

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

    How i can make crossbrowser native-app urls with http url fallback on website?

    How to launch apps (facebook/twitter/etc) from mobile browser but fall back to hyperlink if the app isn't installed

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

    回复于
  • 0

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

    http://getbootstrap.com/css/#responsive-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>
    回复于
  • -1

    它可以用css完成

    Mobile

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

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

    回复于

相关问题