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

Question

How do I make a link on a website that has two possible outcomes depending on which type of device you are using (mobile app vs. native).

Mobile

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

If clicked on desktop, I get: "There is no application set to open the URL"

---

Native

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

This redirects to social media site in browser; not in app for mobile.

---

I'm not sure if this is something I can do with pure HTML5 or use jQuery/Javascript?

I also don't know if I need to write mobile-app URLs specific to each OS (iOS/Android/Windows,etc). I only have iOS to test on.

---

Note: I'd prefer not to use CSS width, because I feel it is not best practice. This easily breaks if a desktop user clicks the link using split screen or a resized window.

Answer 1

The issue with using CSS media queries for this is that if the user do not have the app installed, it won't do anything (or in case of Android, it redirects the user to the app on the Play Store).

Hence my advice is to use Javascript, check the userAgent string, and set the links through that. Use a timeout delay or a timer to check to see if the user is still on the page after they clicked the link. If they are, that means they don't have the app installed, hence you can then redirect them to the regular page.

For examples or gists, see the following:

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

Answer 2

You can use bootstrap Responsive-utilities class to achieve this:

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>

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>

Answer 3

It can be done with 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;
  }
}

Make sure you put both set of hyperlinks on the webpage.