Xác Định Hệ Điều Hành

Mỗi hệ điều hành di động đều có một User Agent (UA) riêng biệt, và chúng ta có thể sử dụng JavaScript để lấy thông tin này. Dưới đây là cách sử dụng biểu thức chính quy để xác định hệ điều hành iOS hoặc Android.

// Phương pháp 1
var userAgent = navigator.userAgent;
var isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; // Android
var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // iOS
console.log('Có phải là Android: ' + isAndroid);
console.log('Có phải là iOS: ' + isiOS);

// Phương pháp 2
if (/(iPhone|iPad|iPod|iOS)/i.test(userAgent)) {
    window.location.href = "iPhone.html";
} else if (/(Android)/i.test(userAgent)) {
    window.location.href = "Android.html";
} else {
    window.location.href = "pc.html";
}

Kiểm Tra Trình Duyệt

Có thể kiểm tra xem thiết bị đang sử dụng là di động, iPad, iPhone, WeChat, QQ, v.v. Nếu trang web không thể mở bằng WeChat, bạn có thể hướng dẫn người dùng mở trang web bằng trình duyệt khác.

var browser = {
    versions: function() {
        var userAgent = navigator.userAgent, appVersion = navigator.appVersion;
        return {
            trident: userAgent.indexOf('Trident') > -1, // IE
            presto: userAgent.indexOf('Presto') > -1, // Opera
            webKit: userAgent.indexOf('AppleWebKit') > -1, // Apple, Google
            gecko: userAgent.indexOf('Gecko') > -1 && userAgent.indexOf('KHTML') == -1, // Firefox
            mobile: !!userAgent.match(/AppleWebKit.*Mobile.*/), // Di động
            ios: !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // iOS
            android: userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1, // Android
            iPhone: userAgent.indexOf('iPhone') > -1, // iPhone hoặc QQHD
            iPad: userAgent.indexOf('iPad') > -1, // iPad
            webApp: userAgent.indexOf('Safari') == -1, // Ứng dụng web
            weixin: userAgent.indexOf('MicroMessenger') > -1, // WeChat
            qq: userAgent.match(/\sQQ/i) == " qq" // QQ
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
};

// Sử dụng các phương thức:
if (browser.versions.trident) {
    console.log("Đây là IE");
}
if (browser.versions.webKit) {
    console.log("Đây là WebKit");
}
if (browser.versions.mobile || browser.versions.android || browser.versions.ios) {
    console.log("Đây là thiết bị di động");
}

// Kiểm tra ngôn ngữ trình duyệt:
var currentLang = navigator.language; // Ngôn ngữ của trình duyệt (trừ IE)
if (!currentLang) {
    currentLang = navigator.browserLanguage; // Ngôn ngữ của IE
}
console.log(currentLang);

Chuyển Hướng Tương Ứng cho iOS/Android

Trên các trang H5, thường có một trang hướng dẫn với nút tải xuống. Khi nhấn nút, trang sẽ tự động xác định hệ điều hành và chuyển hướng đến App Store (iOS) hoặc liên kết tải xuống (Android).

Dưới đây là ví dụ về cách thực hiện chức năng này (ví dụ với WeChat):

function downloadApp() {
    var userAgent = navigator.userAgent,
        isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1,
        isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
        urls = {
            'android': 'http://dldir1.qq.com/weixin/android/weixin704android1420.apk',
            'ios': 'https://itunes.apple.com/cn/app/wei/id414478124',
            'other': 'http://weixin.qq.com/d'
        };
    window.location.href = isAndroid ? urls.android : isiOS ? urls.ios : urls.other;
}

// <a href="javascript:void(0)" onclick="downloadApp()">Tải xuống</a>