手机端点击唤起App、电脑端降级网页的核心逻辑是：先尝试intent://或myapp://协议唤端，失败则跳转https://网页；iOS Safari及新版Chrome/Edge要求必须由用户真实点击触发，禁止setTimeout等非手势调用。
手机端点击链接直接唤起App，电脑端降级为网页跳转
核心判断逻辑是：先尝试用 intent: 或 myapp:// 协议唤端，失败则 fallback 到 https:// 网页地址。但浏览器限制严格，**iOS Safari 和新版 Chrome/Edge 在非用户手势（如 setTimeout）中禁止唤端**，必须由真实点击触发。
实操建议：
- 所有唤端逻辑必须绑定在
onclick事件里，避免在onload、setTimeout中调用 - 唤端后需立即执行
window.location.href = 'https://example.com'作为降级，否则 iOS 会卡住无响应 - Android 可用
intent://写法携带包名和 Scheme，例如：intent://open?uid=123#Intent;scheme=myapp;package=com.example.app;S.browser_fallback_url=https%3A%2F%2Fexample.com%2Fweb;end - iOS 仅支持自定义 Scheme（如
myapp://open?uid=123），且需 App 已安装并注册了对应 URL Types；未安装时会报错或白屏，必须配合 JS 检测超时
如何检测唤端是否成功？别信 navigator.canLaunch
navigator.canLaunch 是 WebKit 实验性 API，仅 Safari 技术预览版支持，Chrome/Firefox 完全不识别，生产环境不可用。真实可用的检测方式只有「超时判定」：发唤端请求后启动计时器，1000–2000ms 内页面没跳走，就认为唤端失败，跳转 fallback 页面。
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
let launched = false;
const timer = setTimeout(() => {
if (!launched) {
window.location.href = 'https://example.com/web';
}
}, 1500);
document.getElementById('openBtn').onclick = () => {
launched = true;
clearTimeout(timer);
window.location.href = 'myapp://open?uid=123';
};
注意：部分安卓浏览器（如微信内置浏览器）会拦截自定义 Scheme，需提前在服务器配置 User-Agent 白名单或改用官方 SDK（如微信 JS-SDK 的 openAddress）
微信 / QQ / 支付宝等 WebView 里跳转行为完全不同
这些容器不是标准浏览器，有自己的跳转规则和安全策略。比如：
- 微信内
myapp://默认被拦截，必须用weixin://或其开放能力（如openLocation） - 支付宝 WebView 中，
AlipayJSBridge是唯一可靠唤端方式，需先if (typeof AlipayJSBridge !== 'undefined')判断 - QQ 浏览器支持
mqqapi://，但只对已备案的域名开放，且要求 HTTPS - 所有容器都禁用
iframe src唤端（因无法监听加载状态），只能用window.location或桥接 API
fallback 页面必须带设备类型参数，否则后端无法正确渲染
很多团队只做前端跳转，却忘了 fallback 页面需要适配 PC 和 Mobile 两套 UI。如果后端不知道当前是手机还是电脑访问，很容易返回桌面版页面给手机用户，体验断裂。
解决方案很简单：在跳转 URL 中显式传参，例如：
- 手机 fallback：
https://example.com/web?from=mobile&uid=123 - 电脑 fallback：
https://example.com/web?from=desktop&uid=123
前端可通过 navigator.userAgent 判断设备，但更稳妥的是服务端根据 User-Agent 或 Sec-CH-UA-Mobile（Chromium 101+）头识别。别依赖 JS 判断后拼 URL，移动端 UA 伪造太容易
