如何為社交媒體網站的鏈接編寫代碼：如果是移動應用程序，則為移動應用程序；如果是台式機，則為標准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;
  }
}

確保在網頁上都放置了兩組超鏈接。