Saya bertanya-tanya apakah mungkin untuk mendeteksi apakah browser berjalan di iOS, mirip dengan bagaimana Anda dapat mendeteksi fitur dengan Modernizr (meskipun ini jelas deteksi perangkat daripada deteksi fitur).
Biasanya saya lebih suka deteksi fitur, tetapi saya perlu mencari tahu apakah suatu perangkat iOS karena cara mereka menangani video sesuai pertanyaan ini, YouTube API tidak bekerja dengan perangkat iPad / iPhone / non-Flash
javascript
ios
browser
browser-feature-detection
SparrwHawk
sumber
sumber
Jawaban:
Mendeteksi iOS
Saya bukan penggemar Agen Pengguna mengendus, tetapi di sini adalah bagaimana Anda akan melakukannya:
Cara lain mengandalkan
navigator.platform
:iOS
akan menjaditrue
ataufalse
Kenapa tidak MSStream
Microsoft menyuntikkan kata iPhone di IE11
userAgent
untuk mencoba menipu Gmail. Karena itu kita perlu mengecualikannya. Info lebih lanjut tentang ini di sini dan di sini .Di bawah ini adalah pembaruan IE11
userAgent
( Pembaruan Internet Explorer untuk Windows Phone 8.1):Menambahkan lebih banyak perangkat dengan mudah, tanpa menggunakan Ekspresi Reguler:
iOS()
akan menjaditrue
ataufalse
Catatan: Keduanya
navigator.userAgent
dannavigator.platform
dapat dipalsukan oleh pengguna atau ekstensi browser.Mendeteksi versi iOS
Cara paling umum untuk mendeteksi versi iOS adalah dengan menguraikannya dari string Agen Pengguna . Tetapi ada juga inferensi
deteksifitur* ;Kami tahu fakta yang
history API
diperkenalkan di iOS4 -matchMedia API
di iOS5 -webAudio API
di iOS6 -WebSpeech API
di iOS7 dan seterusnya ..Catatan: Kode berikut ini tidak dapat diandalkan dan akan rusak jika salah satu fitur HTML5 ini tidak digunakan dalam versi iOS yang lebih baru. Anda telah diperingatkan!
sumber
var iOS = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15
jadi jawaban ini perlu diperbaruiSetelah iOS 13 Anda harus mendeteksi perangkat iOS seperti ini, karena iPad tidak akan terdeteksi sebagai perangkat iOS dengan cara lama (karena opsi "desktop" baru, diaktifkan secara default):
Kondisi pertama untuk iOS <13 atau iPhone atau iPad dengan mode Desktop yang dinonaktifkan, kondisi kedua untuk iPadOS 13 dalam konfigurasi default, karena posisinya sendiri seperti Macintosh Intel, tetapi sebenarnya adalah satu-satunya Macintosh dengan multi-touch.
Alih-alih meretas daripada solusi nyata, tetapi bekerja dengan andal bagi saya
PS Seperti yang dikatakan sebelumnya, Anda mungkin harus menambahkan pemeriksaan IE
sumber
navigator.userAgent
cek ini/iPad|iPhone|iPod/.test(navigator.platform)
? Tampaknyanavigator.platform
selalu mengembalikan 'MacIntel' untuk iPhone iOS <= 12navigator.maxTouchPoints
tidak didukung di iOS, sehingga pemeriksaan tidak akan melakukan apa pun untuk Anda.Ini mengatur variabel
_iOSDevice
ke true atau falsesumber
/iPhone|iPod|iPad/.test(navigator.platform)
Anda dapat menghindari!!
Jika Anda menggunakan Modernizr , Anda dapat menambahkan tes khusus untuk itu.
Tidak masalah mode deteksi mana yang Anda putuskan untuk digunakan (userAgent, navigator.vendor atau navigator.platform), Anda selalu dapat membungkusnya untuk penggunaan yang lebih mudah nanti.
sumber
return x ? true : false
untukreturn Boolean(x)
atau hanyareturn !!x
Ada tes Modernizr khusus ini: https://gist.github.com/855078
sumber
Versi yang disederhanakan dan mudah diperluas.
sumber
navigator.platform.replace(' Simulator', '')
.['str'].indexOf('string') == -1
Mungkin patut untuk menjawab bahwa iPad yang menjalankan iOS 13 akan
navigator.platform
diatur keMacIntel
, yang berarti Anda harus mencari cara lain untuk mendeteksi perangkat iPadOS.sumber
Saya menulis ini beberapa tahun yang lalu tetapi saya percaya itu masih berfungsi:
sumber
Agen-pengguna pada perangkat iOS mengatakan iPhone atau iPad di dalamnya. Saya hanya memfilter berdasarkan kata kunci tersebut.
sumber
Sedapat mungkin ketika menambahkan tes Modernizr Anda harus menambahkan tes untuk fitur, bukan perangkat atau sistem operasi. Tidak ada yang salah dengan menambahkan sepuluh tes semua pengujian untuk iPhone jika itu yang diperlukan. Beberapa hal tidak dapat dideteksi fitur.
Misalnya pada iPhone (bukan iPad) video tidak dapat diputar inline pada halaman web, itu membuka layar penuh. Jadi saya membuat tes 'no-inpage-video'
Anda kemudian dapat menggunakan ini di css (Modernizr menambahkan kelas
.no-inpagevideo
ke<html>
tag jika tes gagal)Ini akan menyembunyikan video di iPhone (yang sebenarnya saya lakukan dalam kasus ini adalah menampilkan gambar alternatif dengan onclick untuk memutar video - Saya hanya tidak ingin pemutar video dan tombol putar tampil).
sumber
playsinline
sehingga Anda dapat menggunakan'playsInline' in document.createElement('video');
sebagai tes sekarang github.com/Modernizr/Modernizr/issues/2077Wow, banyak kode rumit gondrong di sini. Tolong sederhana saja!
Yang ini IMHO cepat, simpan, dan bekerja dengan baik:
UPDATE: Ini tidak mencakup iPad dalam mode desktop (dan karenanya iPadOS 13 default).
Itu bagus untuk penggunaan saya, jika ini bukan untuk Anda, lihat jawaban Justin dan kikiwora.
sumber
iOS = /^(iPhone|iPad|iPod)/.test(navigator.platform);
daripada ini saya akan lakukaniOS = /^(iPhone|iPad|iPod)/.test(navigator.userAgent || navigator.vendor || navigator.platform);
sebagai ukuran mundur karena cuz navigator.platform saya tidak bekerja, tetapi melakukannya seperti kemudian bekerja dengan baiknavigator.platform
tidak bekerja? Apakah Anda benar-benar menggunakan iOS? Periksa dengan jeka.info/test/navigator.html .userAgent
memberikan positif palsu karena beberapa vendor memalsukannya untuk meniru perangkat Apple dengan alasan apa pun.vendor
hanya kembali baikGoogle Inc.
,Apple Computer, Inc.
atau tidak ada (di Firefox).Perbarui sedikit jawaban pertama menggunakan pendekatan yang lebih fungsional.
sumber
MacIntel
Anda juga bisa menggunakan
includes
sumber
Tidak ada jawaban sebelumnya di sini yang berfungsi untuk semua browser utama di semua versi iOS, termasuk iOS 13. Ini adalah solusi yang berfungsi untuk Safari, Chrome dan Firefox untuk semua versi iOS:
Perhatikan bahwa cuplikan kode ini ditulis dengan prioritas pada keterbacaan, bukan keringkasan atau kinerja.
Penjelasan:
Jika agen pengguna berisi "iPod | iPhone | iPad" maka jelas perangkatnya adalah iOS. Kalau tidak, lanjutkan ...
Agen pengguna lain apa pun yang tidak mengandung "Macintosh" bukan perangkat Apple dan karenanya tidak bisa iOS. Kalau tidak, itu adalah perangkat Apple, jadi lanjutkan ...
Jika
maxTouchPoints
memiliki nilai1
atau lebih besar maka perangkat Apple memiliki layar sentuh dan karenanya harus iOS karena tidak ada Mac dengan layar sentuh (kudos to kikiwora untuk menyebutkanmaxTouchPoints
). Perhatikan bahwamaxTouchPoints
adalahundefined
untuk iOS 12 dan di bawah, jadi kita perlu solusi yang berbeda untuk skenario yang ...iOS 12 dan di bawahnya memiliki kekhasan yang tidak ada di Mac OS. Kekhasannya adalah bahwa
volume
propertiAudio
elemen tidak dapat berhasil diatur ke nilai apa pun selain1
. Ini karena Apple tidak mengizinkan perubahan volume padaAudio
elemen untuk perangkat iOS, tetapi untuk Mac OS. Kekhasan itu dapat digunakan sebagai metode fallback akhir untuk membedakan perangkat iOS dari perangkat Mac OS.sumber
Dalam kasus saya agen pengguna tidak cukup baik karena di iPad agen pengguna sama dengan di Mac OS, oleh karena itu saya harus melakukan trik jahat:
sumber
Untuk mendeteksi versi iOS, kita harus menghancurkan agen pengguna dengan kode Javascript seperti ini:
sumber
var isiOSSafari = (navigator.userAgent.match(/like Mac OS X/i)) ? true: false;
sumber