知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    js判断是移动端设备还是pc端设备代码

    作者:佳明妈 来源:web前端开发 2016-08-15 人气:
    js判断是移动端设备还是pc端设备代码,js移动端设备判断方法比较多,各路大神给出了各种设备判断方法,你看中哪个用哪个 script type=text/javascriptif ((navigator.userAgent.match(/(phone|pad|pod|

    js判断是移动端设备还是pc端设备代码,js移动端设备判断方法比较多,各路大神给出了各种设备判断方法,你看中哪个用哪个

    这个移动端判断代码比较少根据navigator.userAgent判断

    <script type="text/javascript">
    //懒人建站http://www.51xuediannao.com/
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
       alert('手机端')
    }else{
       alert('移动端')
    }
    </script>
    

    这个移动端判断代码比较少根据navigator.userAgent来判断

    <script type="text/javascript">
    //懒人建站http://www.51xuediannao.com/
            function browserRedirect() {
                var sUserAgent = navigator.userAgent.toLowerCase();
                var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
                var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
                var bIsMidp = sUserAgent.match(/midp/i) == "midp";
                var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
                var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
                var bIsAndroid = sUserAgent.match(/android/i) == "android";
                var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
                var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
                document.writeln("您的浏览设备为:");
                if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                    alert("手机端");
                } else {
                    document.writeln("pc设备");
                }
            }
    
            browserRedirect();
    </script>
    

    这个移动端判断代码比较少根据navigator.userAgent来判断

    <script type="text/javascript">
    if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
      alert('移动端')
    }
    </script>
    

    下面这个移动端判断代码可以针对IE内核webkit内核判断,还能判断语言

    <script type="text/javascript">
    //懒人建站http://www.51xuediannao.com/
    //判断访问终端
    var browser={
        versions:function(){
            var u = navigator.userAgent, app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
            };
        }(),
        language:(navigator.browserLanguage || navigator.language).toLowerCase();//检测浏览器语言
    }
    
    //browser.versions.trident返回真假,真则是IE内核,以此类推browser.versions.webKit是否为谷歌内核
    //判断是否IE内核
    if(browser.versions.trident){
        alert("is IE");
    }
    
    //判断是否webKit内核
    if(browser.versions.webKit){
        alert("is webKit");
    }
    
    //判断是否移动端
    if(browser.versions.mobile||browser.versions.android||browser.versions.ios){
        alert("移动端");
    }
    
    </script>

    微软office365对手机等移动端设备判断的js代码

    <script type="text/javascript">
    //懒人建站http://www.51xuediannao.com/
       (function (a) {
           window.isMobile = false;
           var windowWidth = window.outerWidth;
           if (/.*windows phone.*/i.test(a)){
               window.location.href = "mobile/index.html";
           }
           if (/(android|ipad|playbook|silk|bbd+|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|phone)|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))) {
               window.isMobile = true;
               if (windowWidth <= 720)window.location.href = "mobile/index.html"
           } else {
               if (/.*arm;.*touch;.*wpdesktop.*/i.test(a))window.location.href = "mobile/index.html"
           }
       })(navigator.userAgent || navigator.vendor || window.opera);
    </script>
    

    使用device.js插件来判断是否移动端设备

    插件GIT地址:https://github.com/matthewhudson/device.js

    示例:
    if(device.mobile()){
       alert('移动端')
    }
    
    更多设备判断如下表格:
    Device JavaScript Method
    Mobile device.mobile()
    Tablet device.tablet()
    Desktop device.desktop()
    iOS device.ios()
    iPad device.ipad()
    iPhone device.iphone()
    iPod device.ipod()
    Android device.android()
    Android Phone device.androidPhone()
    Android Tablet device.androidTablet()
    BlackBerry device.blackberry()
    BlackBerry Phone device.blackberryPhone()
    BlackBerry Tablet device.blackberryTablet()
    Windows device.windows()
    Windows Phone device.windowsPhone()
    Windows Tablet device.windowsTablet()
    Firefox OS device.fxos()
    Firefox OS Phone device.fxosPhone()
    Firefox OS Tablet device.fxosTablet()
    MeeGo device.meego()
    Television device.television()

    device.js会在你的html节点上追加相应的设备样式

    Device CSS Classes
    iPad ios ipad tablet
    iPhone ios iphone mobile
    iPod ios ipod mobile
    Android Phone android mobile
    Android Tablet android tablet
    BlackBerry Phone blackberry mobile
    BlackBerry Tablet blackberry tablet
    Windows Phone windows mobile
    Windows Tablet windows tablet
    Firefox OS Phone fxos mobile
    Firefox OS Tablet fxos tablet
    MeeGo meego
    Desktop desktop
    Television television

    移动端设备方向判断

    Orientation JavaScript Method
    Landscape device.landscape()
    Portrait device.portrait()

    ↓ 查看全文

    js判断是移动端设备还是pc端设备代码由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    js判断是移动端设备还是pc端设备代码-最新评论