使用Javascript判斷瀏覽器終端設(shè)備(PC、IOS(iphone)、Android)
WEB開發(fā)中如何通過Javascript來判斷終端為PC、IOS(iphone)、Android呢?
可以通過判斷瀏覽器的userAgent,用正則來判斷手機(jī)是否是ios和Android客戶端。
var u = navigator.userAgent; isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android終端 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
下面一個(gè)比較全面的瀏覽器檢查函數(shù),提供更多的檢查內(nèi)容,你可以檢查是否是移動(dòng)端(Mobile)、ipad、iphone、微信、QQ等。
<script type="text/javascript"> //判斷訪問終端 var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE內(nèi)核 presto: u.indexOf('Presto') > -1, //opera內(nèi)核 webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內(nèi)核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐內(nèi)核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動(dòng)終端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端 android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android終端 iPhone: u.indexOf('iPhone') > -1 , //是否為iPhone或者QQHD瀏覽器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1, //是否web應(yīng)該程序,沒有頭部與底部 weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增) qq: u.match(/\sQQ/i) == " qq" //是否QQ }; }(), language:(navigator.browserLanguage || navigator.language).toLowerCase() } </script>
使用方法:
//判斷是否IE內(nèi)核 if(browser.versions.trident){ alert("is IE"); } //判斷是否webKit內(nèi)核 if(browser.versions.webKit){ alert("is webKit"); } //判斷是否移動(dòng)端 if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("移動(dòng)端"); } 檢測(cè)瀏覽器語言 currentLang = navigator.language; //判斷除IE外其他瀏覽器使用語言 if(!currentLang){//判斷IE瀏覽器使用語言 currentLang = navigator.browserLanguage; } alert(currentLang);
上面只是平時(shí)用的最多的一種方法,其實(shí)還有第二種方法:
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //alert(navigator.userAgent); window.location.href ="iPhone.html"; } else if (/(Android)/i.test(navigator.userAgent)) { //alert(navigator.userAgent); window.location.href ="Android.html"; } else { window.location.href ="pc.html"; };
不同的終端設(shè)備采用不同的響應(yīng)策略,具體場(chǎng)景靈活運(yùn)用把哈哈。
以上所述是小編給大家介紹的使用Javascript判斷瀏覽器終端設(shè)備(PC、IOS(iphone)、Android),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
微信小程序三級(jí)聯(lián)動(dòng)選擇器使用方法
這篇文章主要為大家詳細(xì)介紹了微信小程序三級(jí)聯(lián)動(dòng)選擇器使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02JS獲取整個(gè)頁面文檔的實(shí)現(xiàn)代碼
就是在當(dāng)前頁面用AJAX請(qǐng)求當(dāng)前頁面,返回的就是整個(gè)頁面的HTML··既然是整個(gè)頁面,所以也包括文檔聲明2011-12-12CSS+JS實(shí)現(xiàn)點(diǎn)擊文字彈出定時(shí)自動(dòng)關(guān)閉DIV層菜單的方法
這篇文章主要介紹了CSS+JS實(shí)現(xiàn)點(diǎn)擊文字彈出定時(shí)自動(dòng)關(guān)閉DIV層菜單的方法,設(shè)計(jì)javascript操作菜單的彈出與關(guān)閉的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05JavaScript中的連續(xù)賦值問題實(shí)例分析
這篇文章主要介紹了JavaScript中的連續(xù)賦值問題,結(jié)合實(shí)例形式分析了javascript賦值語句以及連續(xù)賦值操作相關(guān)用法與操作注意事項(xiàng),需要的朋友可以參考下2019-07-07webpack中CommonsChunkPlugin詳細(xì)教程(小結(jié))
本篇文章主要介紹了webpack中CommonsChunkPlugin詳細(xì)教程(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11原生JavaScript實(shí)現(xiàn)的簡(jiǎn)單放大鏡效果示例
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)的簡(jiǎn)單放大鏡效果,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-02-02