I'm mencari sebuah fungsi yang mengembalikan nilai boolean jika pengguna mobile browser atau tidak.
Saya tahu bahwa saya dapat menggunakan navigator.userAgent
dan menulis bahwa fungsi dengan menggunakan regex, tapi agen pengguna adalah juga untuk berbagai platform yang berbeda. Saya ragu bahwa pertandingan semua perangkat yang mungkin akan mudah, dan saya pikir masalah ini telah diselesaikan sebelum berkali-kali sehingga harus ada semacam solusi lengkap untuk tugas tersebut.
Saya sedang mencari di situs, tapi sayangnya script ini begitu samar bahwa saya tidak tahu bagaimana untuk menggunakannya untuk tujuan saya, yang adalah untuk menciptakan sebuah fungsi yang mengembalikan nilai true / false.
Berikut ini's fungsi yang menggunakan aplikasi yang gila-gilaan panjang dan komprehensif regex yang mengembalikan nilai benar atau salah tergantung pada apakah atau tidak pengguna browsing dengan mobile.
window.mobilecheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|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|xda|xiino/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(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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
};
Bagi mereka yang ingin memiliki tablet dalam tes ini (meskipun bisa dibilang, anda tidak't), anda dapat menggunakan fungsi berikut ini:
window.mobileAndTabletcheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|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|xda|xiino|android|ipad|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(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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
};
Anda dapat melakukan ini dengan hanya berjalan melalui daftar perangkat dan memeriksa jika useragent pertandingan apa-apa seperti:
function detectmob() {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
return true;
}
else {
return false;
}
}
Namun karena anda percaya bahwa metode ini tidak dapat diandalkan, Anda bisa berasumsi bahwa setiap perangkat yang memiliki resolusi 800 x 600 atau kurang adalah perangkat mobile juga, penyempitan target anda bahkan lebih (meskipun hari ini banyak perangkat mobile yang memiliki banyak resolusi besar dari ini)
aku.e
function detectmob() {
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
return true;
} else {
return false;
}
}
Referensi:
Bagaimana tentang:
if (typeof window.orientation !== 'undefined') { ... }
...sejak smartphone biasanya mendukung properti dan desktop browser don't.
EDIT: Sebagai @Gajus mencontohkan, solusi ini sekarang usang dan tidak't akan digunakan (https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation)
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
Cara menggunakan
if( isMobile.any() ) alert('Mobile');
Untuk memeriksa untuk melihat jika pengguna pada perangkat mobile yang spesifik:
if( isMobile.iOS() ) alert('iOS');
Ref: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript
Versi yang disempurnakan pada github : https://github.com/smali-kazmi/detect-mobile-browser
Datang ke sini mencari yang sederhana, cara yang bersih untuk mendeteksi "layar sentuh perangkat", yang saya kelas seperti ponsel dan tablet. Tidak menemukan bersih dengan pilihan di saat ini jawaban tapi tidak bekerja di luar berikut ini yang juga dapat membantu seseorang.
var touchDevice = ('ontouchstart' in document.documentElement);
Edit: Untuk mendukung desktop dengan layar sentuh dan ponsel pada waktu yang sama, anda dapat menggunakan berikut:
var touchDevice = (navigator.maxTouchPoints || 'ontouchstart' in document.documentElement);
Ada's tidak ada solusi yang sempurna untuk mendeteksi apakah JS kode dijalankan pada browser seluler, tapi dua pilihan berikut harus bekerja dalam banyak kasus.
!function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.\bAndroid\b)(?=.\bMobile\b)/i,f=/Android/i,g=/(?=.\bAndroid\b)(?=.\bSD4930UR\b)/i,h=/(?=.\bAndroid\b)(?=.\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/IEMobile/i,j=/(?=.\bWindows\b)(?=.\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.\bMobile\b)/i,o=/(?=.\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Menyalakan Api|Sutra|GT-P1000)","aku"),q=function(a,b){return a.tes(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("1AN");return"undefined"!=typeof s1&&(r=s[0]),s=r.split("Twitter"),"undefined"!=typeof s1&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==jenis jendela?ini:void 0},s=function(){var a=new r;kembali.Class=r,a};"undefined"!=jenis modul&&modul.ekspor&&"undefined"==typeof jendela?modul.ekspor=r:"undefined"!=jenis modul&&modul.ekspor&&"undefined"!=jenis jendela?modul.ekspor=s():"fungsi"==typeof menentukan&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(ini);
alert(isMobile.any ? 'Mobile' : 'Not mobile');
Ini browser tertentu mengendus kode adalah bahwa sebuah perpustakaan yang disebut isMobile.
Tes jika jendela.orientasi
didefinisikan :
var isMobile = window.orientasi > -1; alert(isMobile ? 'Mobile' : 'Tidak mobile');
Tidak semua perangkat touchscreen yang mobile dan sebaliknya. Jadi, jika anda ingin menerapkan sesuatu yang khusus untuk layar sentuh, anda tidak'uji t. jika browser anda jalankan pada perangkat mobile tetapi apakah perangkat ini memiliki dukungan layar sentuh :
var hasTouchscreen = 'ontouchstart' di jendela; alert(hasTouchscreen ? 'telah touchscreen' : 'doesn\'t memiliki layar sentuh');
Untuk menambahkan lapisan tambahan dari kontrol saya menggunakan HTML5 storage untuk mendeteksi jika menggunakan penyimpanan mobile atau desktop storage. Jika browser tidak mendukung bagasi saya memiliki sebuah array dari mobile browser nama dan saya bandingkan dengan agen pengguna dengan browser dalam array.
Hal ini cukup sederhana. Berikut ini adalah fungsi:
// Used to detect whether the users browser is an mobile browser
function isMobile() {
///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>
if (sessionStorage.desktop) // desktop storage
return false;
else if (localStorage.mobile) // mobile storage
return true;
// alternative
var mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile'];
for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true;
// nothing found.. assume desktop
return false;
}
Fitur deteksi jauh lebih baik daripada mencoba untuk mencari tahu mana perangkat anda dan sangat sulit untuk bersaing dengan perangkat baru yang keluar sepanjang waktu, perpustakaan seperti Modernizr memungkinkan anda tahu jika fitur tertentu tersedia atau tidak.
Seperti yang banyak dikemukakan, bergantung pada target bergerak dari user agent data yang bermasalah. Hal yang sama dapat dikatakan untuk menghitung pada ukuran layar. Pendekatan saya adalah dipinjam dari CSS teknik untuk menentukan apakah antarmuka sentuh. Menggunakan pure javascript (support oleh semua browser modern), media query, anda dapat dengan mudah menentukan kapan perangkat mobile.
function isMobile() {
var match = window.matchMedia || window.msMatchMedia;
if(match) {
var mq = match("(pointer:coarse)");
return mq.matches;
}
return false;
}
Berikut ini adalah userAgent solusi yang lebih efisien dari pertandingan...
function _isMobile(){
// if we want a more complete list use this: http://detectmobilebrowsers.com/
// str.test() is more efficent than str.match()
// remember str.test is case sensitive
var isMobile = (/iphone|ipod|android|ie|blackberry|fennec/).test
(navigator.userAgent.toLowerCase());
return isMobile;
}
Benar-benar cara yang baik untuk mendeteksi ponsel atau perangkat tablet adalah dengan melihat apakah browser dapat membuat acara sentuhan.
Polos Kode JavaScript:
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
if (isMobile()) {
# do whatever you wanna do!
}
Ini bekerja untuk saya benar-benar baik, tapi mungkin ada masalah dengan perangkat laptop yang memiliki layar touchscreen.
Saya tidak yakin jika touchscreen Laptop akan terdeteksi sebagai perangkat mobile karena saya belum't diuji belum.
Menurut MDN's artikel pada deteksi Browser yang menggunakan user agent, didorong untuk menghindari pendekatan ini jika mungkin dan menunjukkan jalan lain seperti fitur deteksi.
Namun, jika salah satu harus menggunakan user agent sebagai sarana untuk mendeteksi jika perangkat mobile, mereka menyarankan:
singkatnya, kami sarankan mencari string "Mobi" di mana saja di User Agent untuk deteksi perangkat mobile.
Oleh karena itu, satu-liner akan cukup:
const isMobileDevice = window.navigator.userAgent.toLowerCase().meliputi("mobi");
Di sini saya kembali berpikir solusi untuk masalah. Masih belum sempurna. Satu-satunya solusi yang benar akan jika produsen perangkat mulai untuk mengambil serius "Mobile" dan "Tablet" user-agent string.
window.onload = userAgentDetect;
function userAgentDetect() {
if(window.navigator.userAgent.match(/Mobile/i)
|| window.navigator.userAgent.match(/iPhone/i)
|| window.navigator.userAgent.match(/iPod/i)
|| window.navigator.userAgent.match(/IEMobile/i)
|| window.navigator.userAgent.match(/Windows Phone/i)
|| window.navigator.userAgent.match(/Android/i)
|| window.navigator.userAgent.match(/BlackBerry/i)
|| window.navigator.userAgent.match(/webOS/i)) {
document.body.className += ' mobile';
alert('True - Mobile - ' + navigator.userAgent);
} else {
alert('False - Mobile - ' + navigator.userAgent);
}
if(window.navigator.userAgent.match(/Tablet/i)
|| window.navigator.userAgent.match(/iPad/i)
|| window.navigator.userAgent.match(/Nexus 7/i)
|| window.navigator.userAgent.match(/Nexus 10/i)
|| window.navigator.userAgent.match(/KFAPWI/i)) {
document.body.className -= ' mobile';
document.body.className += ' tablet';
alert('True - Tablet - ' + navigator.userAgent);
} else {
alert('False - Tablet - ' + navigator.userAgent);
}
}
Apa yang terjadi ketika Nexus 7 tablet hanya memiliki Android UA string? Pertama, Mobile menjadi benar, daripada nanti pada Tablet juga menjadi benar, tapi Tablet ini akan menghapus Mobile UA string dari tag body.
CSS:
body.tablet { background-color: green; }
body.mobile { background-color: red; }
waspada
baris yang ditambahkan untuk pembangunan. Chrome konsol dapat meniru banyak perangkat genggam. Tes di sana.
EDIT:
Hanya don't menggunakan ini, menggunakan fitur deteksi sebaliknya. Ada begitu banyak perangkat dan merek di luar sana yang menargetkan sebuah merek tidak akan PERNAH menjadi solusi yang tepat.
Setelah elemen kenaikan fokus, anda segera kabur itu. Bootstrap-datepicker, yang merupakan sangat populer dan terpelihara komponen dengan hampir 10.000 bintang di GitHub, menggunakan pendekatan ini:
if (window.navigator.maxTouchPoints || 'ontouchstart' in document) {
this.input.blur();
}
https://github.com/uxsolutions/bootstrap-datepicker
Terima kasih untuk Tigger untuk bantuan.
Saya menyarankan anda untuk memeriksa http://wurfl.io/
Singkatnya, jika anda mengimpor kecil JS file:
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
anda akan ditinggalkan dengan objek JSON yang terlihat seperti:
{
"complete_device_name":"Google Nexus 7",
"is_mobile":true,
"form_factor":"Tablet"
}
(yang's dengan asumsi anda menggunakan Nexus 7, tentu saja) dan anda akan dapat melakukan hal-hal seperti:
if(WURFL.form_factor == "Tablet"){
//dostuff();
}
Ini adalah apa yang anda cari.
Disclaimer: saya bekerja untuk perusahaan yang menawarkan layanan gratis ini. Terima kasih.
bagaimana menggunakan "jendela.layar.lebar" ?
if (window.screen.width < 800) {
// do something
}
atau
if($(window).width() < 800) {
//do something
}
Saya kira ini adalah cara terbaik karena ada perangkat mobile baru setiap hari !
(meskipun saya pikir itu's tidak didukung di browser lama, tapi mencobanya :) )
Terbaik harus :
var isMobile = (/Mobile/i.test(navigator.userAgent));
Tapi seperti Yoav Barnea mengatakan...
// Seem legit
var isMobile = ('DeviceOrientationEvent' in window || 'orientation' in window);
// But with my Chrome on windows, DeviceOrientationEvent == fct()
if (/Windows NT|Macintosh|Mac OS X|Linux/i.test(navigator.userAgent)) isMobile = false;
// My android have "linux" too
if (/Mobile/i.test(navigator.userAgent)) isMobile = true;
Setelah ini 3 tes, saya berharap var isMobile adalah... ok