javascript - 如何为社交媒体网站 : mobile app if mobile, 和桌面标准 URL 编写链接?

标签 javascript jquery html url mobile

如何根据您使用的设备类型(移动应用与 native )在具有两种可能结果的网站上建立链接。


移动

<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 商店中的应用程序)。

因此我的建议是使用 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

关于javascript - 如何为社交媒体网站 : mobile app if mobile, 和桌面标准 URL 编写链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33428974/

相关文章:

javascript - 这里 map 放大集群点击

javascript - angularjs无限滚动显示数据

javascript - 当 ASP.NET MVC 5 应用程序中的表单有效时触发 jQuery 函数

javascript - 带有圆 Angular 末端的 Canvas 矩形(进度条) - 值较低的问题

html - AWK 将 CSV 转换为 HTML 表格

javascript - 使用 jQuery 覆盖 JavaScript 中的复选框

javascript - 在 Javascript 中从文本文件中读取和提取数据

javascript - 是否可以使用 Ant.design 将表格插入表格的每一行?

javascript - 如何在 .ready 之前放置 ajax 加载器

JavaScript 函数无法正常工作