html 检测用户的手机是安卓还是ios，然后点击分别跳转到不同的页面

彬彬笔记 • 2024年2月15日 16:50 • HTML5, Javascript • 阅读 32

在HTML页面中直接检测用户的操作系统（Android或iOS）并根据结果跳转到不同的页面，通常需要借助JavaScript来实现。下面是一个简单的示例代码，它通过检测用户代理字符串（User Agent）来判断用户的操作系统，并在点击按钮时根据操作系统跳转到不同的页面。

<!DOCTYPE html>
<html>
<head>
    <title>Device Redirect</title>
</head>
<body>

<button id="downloadButton">下载应用</button>

<script>
document.getElementById('downloadButton').onclick = function() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    // 检测iOS设备
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        window.location.href = 'https://example.com/ios';
    }
    // 检测Android设备
    else if (/android/i.test(userAgent)) {
        window.location.href = 'https://example.com/android';
    }
    // 其他设备
    else {
        window.location.href = 'https://example.com/other';
    }
};
</script>

</body>
</html>

这段代码中的关键部分是document.getElementById('downloadButton').onclick函数，它会在用户点击按钮时执行。脚本首先获取用户代理字符串，然后使用正则表达式检查字符串中是否含有表示iOS或Android的关键词。根据检测结果，脚本将使用window.location.href将用户重定向到相应的页面。

请根据你的实际需求替换https://example.com/ios、https://example.com/android和https://example.com/other这些URL。

发布者：彬彬笔记，转载请注明出处：https://www.binbinbiji.com/html5/3195.html