首页 > 帮助中心 > 网站建设相关问题 > js判断是移动端设备还是pc端设备代码做出提示

资讯分类



js判断是移动端设备还是pc端设备代码做出提示

日期:2018-03-23    共阅 [ 1145 ] 次

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

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


<script type="text/javascript">
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">
        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来判断

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

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

<script type="text/javascript"> 
//判断访问终端
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">
   (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|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|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插件来判断是否移动端设备

示例:
if(device.mobile()){
   alert('移动端')
}

插件GIT地址:

https://github.com/matthewhudson/device.js

更多设备判断如下表格:

DeviceJavaScript Method
Mobiledevice.mobile()
Tabletdevice.tablet()
Desktopdevice.desktop()
iOSdevice.ios()
iPaddevice.ipad()
iPhonedevice.iphone()
iPoddevice.ipod()
Androiddevice.android()
Android Phonedevice.androidPhone()
Android Tabletdevice.androidTablet()
BlackBerrydevice.blackberry()
BlackBerry Phonedevice.blackberryPhone()
BlackBerry Tabletdevice.blackberryTablet()
Windowsdevice.windows()
Windows Phonedevice.windowsPhone()
Windows Tabletdevice.windowsTablet()
Firefox OSdevice.fxos()
Firefox OS Phonedevice.fxosPhone()
Firefox OS Tabletdevice.fxosTablet()
MeeGodevice.meego()
Televisiondevice.television()

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

DeviceCSS Classes
iPadios ipad tablet
iPhoneios iphone mobile
iPodios ipod mobile
Android Phoneandroid mobile
Android Tabletandroid tablet
BlackBerry Phoneblackberry mobile
BlackBerry Tabletblackberry tablet
Windows Phonewindows mobile
Windows Tabletwindows tablet
Firefox OS Phonefxos mobile
Firefox OS Tabletfxos tablet
MeeGomeego
Desktopdesktop
Televisiontelevision

移动端设备方向判断

OrientationJavaScript Method
Landscapedevice.landscape()
Portraitdevice.portrait()

 

 

基础产品服务
域名注册
虚拟主机
云服务器
企业邮箱
服务器托管
服务器租用
网站营销
智能建站
产品管理平台
企业解决方案
400电话
网站建设
在线客服系统
服务器运维
优化营销
数据恢复
Mysql数据库
SQL数据库
技术文档
合同文本
站长必备软件
实例与代码
代理文档
精品作品
站长论坛
展览馆
HTML5炫
关键词密度分析
IP归属地查询
备案查询
SEO查询
百度权重查询
solidworks
保持接触
联系电话:15810326078
010-68924881
技术QQ:12491287
商务QQ:22392247
技术邮箱: cpoo@163.com
联系方式
畅景论坛
客服&帮助
扫码领红包
新闻公告
代理加盟
如何网站备案
付款方式
索取发票
渠道合作
帮助中心
网站地图

微信咨询/联系:

↑ 扫描加微信咨询

北京辟谣平台 违法不良信息举报

关于畅景| 联系我们| 付款方式| 网站备案| 帮助中心| 畅景资讯| 相关下载 ||||
本站产品全面支持在线支付,自主开通及管理! 域名注册,域名查询,域名申请,虚拟主机,企业邮箱,网站建设,云主机,网络推广尽在畅景互联
版权所有 www.cpoo.com.cn 京ICP备12015531号-8 京公网安备110105018078   北京新网(Xinnet.com)认证注册服务机构 新网授权代理商

十年历史见证 超过9000家客户信誉保障 腾讯在线QQ客服:12491287 22392247

客户服务中心(7×24):15810326078 传真:010-68924881-2288