Mendeteksi pengguna iPad menggunakan jQuery?

Jawaban:

317

Deteksi iPad

Anda harus dapat mendeteksi pengguna iPad dengan melihat userAgentproperti:

var is_iPad = navigator.userAgent.match(/iPad/i) != null;

Deteksi iPhone / iPod

Demikian pula, platformproperti untuk memeriksa perangkat seperti iPhone atau iPod:

function is_iPhone_or_iPod(){
     return navigator.platform.match(/i(Phone|Pod))/i)
}

Catatan

Saat berfungsi, Anda umumnya harus menghindari melakukan deteksi khusus peramban karena seringkali tidak dapat diandalkan (dan dapat dipalsukan). Lebih disukai untuk menggunakan deteksi fitur aktual dalam banyak kasus, yang dapat dilakukan melalui perpustakaan seperti Modernizr .

Seperti yang ditunjukkan dalam jawaban Brennen , masalah dapat muncul saat melakukan deteksi ini dalam aplikasi Facebook. Silakan lihat jawabannya untuk menangani skenario ini.

Sumber Daya Terkait

— Rion Williams
sumber
9
haha, Anda membuat perbedaan antara pendekatan jQuery dan pendekatan Javascript?
— Harmen
4
Mengapa ini memiliki 2 jempol ke bawah?
— Rocket Hazmat
3
Apakah ada metode untuk mendeteksinya, berdasarkan fungsi pendukung, sehingga tidak menggunakan agen pengguna navigator?
— albanx
6
Satu kesalahan ketik (seharusnya iPad bukan iPod) "a" not "o".
— Satish
4
Terima kasih Satish - saya bermaksud bagian itu untuk iPod. Saya memasukkannya sebagai garis singgung dengan pertanyaan awal.
— Rion Williams
22

Meskipun solusi yang diterima benar untuk iPhone, itu akan menyatakan secara salah isiPhonedan isiPadbenar bagi pengguna yang mengunjungi situs Anda di iPad mereka dari aplikasi Facebook.

Kebijaksanaan konvensional adalah bahwa perangkat iOS memiliki agen pengguna untuk Safari dan agen pengguna untuk UIWebView. Asumsi ini salah karena aplikasi iOS dapat dan memang menyesuaikan agen penggunanya. Pelaku utama di sini adalah Facebook.

Bandingkan string agen pengguna ini dari perangkat iOS:

# iOS Safari
iPad: Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3
iPhone: Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

# UIWebView
iPad: Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/98176
iPhone: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8B117

# Facebook UIWebView
iPad: Mozilla/5.0 (iPad; U; CPU iPhone OS 5_1_1 like Mac OS X; en_US) AppleWebKit (KHTML, like Gecko) Mobile [FBAN/FBForIPhone;FBAV/4.1.1;FBBV/4110.0;FBDV/iPad2,1;FBMD/iPad;FBSN/iPhone OS;FBSV/5.1.1;FBSS/1; FBCR/;FBID/tablet;FBLC/en_US;FBSF/1.0]
iPhone: Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; ru_RU) AppleWebKit (KHTML, like Gecko) Mobile [FBAN/FBForIPhone;FBAV/4.1;FBBV/4100.0;FBDV/iPhone3,1;FBMD/iPhone;FBSN/iPhone OS;FBSV/5.1.1;FBSS/2; tablet;FBLC/en_US]

Perhatikan bahwa pada iPad, string agen pengguna Facebook UIWebView termasuk 'iPhone'.

Cara lama untuk mengidentifikasi iPhone / iPad di JavaScript:

IS_IPAD = navigator.userAgent.match(/iPad/i) != null;
IS_IPHONE = navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);

Jika Anda pergi dengan pendekatan ini untuk mendeteksi iPhone dan iPad, Anda akan berakhir dengan IS_IPHONE dan IS_IPAD keduanya benar jika pengguna berasal dari Facebook di iPad. Itu bisa menciptakan perilaku aneh!

Cara yang benar untuk mengidentifikasi iPhone / iPad di JavaScript:

IS_IPAD = navigator.userAgent.match(/iPad/i) != null;
IS_IPHONE = (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);
if (IS_IPAD) {
  IS_IPHONE = false;
}

Kami menyatakan IS_IPHONE salah pada iPad untuk menutupi agen pengguna iPad UIWebView Facebook yang aneh. Ini adalah salah satu contoh bagaimana sniffing agen pengguna tidak dapat diandalkan. Semakin banyak aplikasi iOS yang mengkustomisasi agen penggunanya, semakin banyak masalah yang akan dialami penghirupan agen pengguna. Jika Anda dapat menghindari sniffing agen pengguna (petunjuk: CSS Media Queries), LAKUKAN.

— Brennan Moore
sumber
1
Anda dapat menggabungkan pencocokan iPhone / iPod Anda menjadi satu regex seperti /iPh?o(ne|d)/i, atau /(iPhone|iPod)/ijika Anda akan merilis iPhod: P.
— Cobby
9

Saya menggunakan ini:

function fnIsAppleMobile() 
{
    if (navigator && navigator.userAgent && navigator.userAgent != null) 
    {
        var strUserAgent = navigator.userAgent.toLowerCase();
        var arrMatches = strUserAgent.match(/(iphone|ipod|ipad)/);
        if (arrMatches != null) 
             return true;
    } // End if (navigator && navigator.userAgent) 

    return false;
} // End Function fnIsAppleMobile


var bIsAppleMobile = fnIsAppleMobile(); // TODO: Write complaint to CrApple asking them why they don't update SquirrelFish with bugfixes, then remove
— Stefan Steiger
sumber
Thanx itulah yang saya cari.
— techie_28
Gagal di desktop karena jika tidak dapat menemukan apa pun mengembalikan objek dengan konten null, saya mengubah kondisi kedua dan berfungsi dengan baik: if (arrMatches! = Null) {return true; }
— Joe L.
8

Saya menggunakan ini:

//http://detectmobilebrowsers.com/ + tablets
(function(a) {
    if(/android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|playbook|silk/i.test(a)
    ||
    /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
    {
        window.location="yourNewIndex.html"
    }
})(navigator.userAgent||navigator.vendor||window.opera);
— Ntinos Koletsis
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.