脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS判断移动端访问设备

JS判断移动端访问设备并加载对应CSS样式

 更新时间：2014年06月13日 10:15:18   投稿：whsnow  
JS判断不同web访问环境，主要针对移动设备，提供相对应的解析方案，本例是加载不同的css样式
JS判断不同web访问环境，主要针对移动设备，提供相对应的解析方案（判断设备代码直接copy腾讯网的）
复制代码 代码如下:

// 判断是否为移动端运行环境

if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){

if(window.location.href.indexOf("?mobile")<0){

try{

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){

// 判断访问环境是 Android|webOS|iPhone|iPod|BlackBerry 则加载以下样式

setActiveStyleSheet("style_mobile_a.css");

}

else if(/iPad/i.test(navigator.userAgent)){

// 判断访问环境是 iPad 则加载以下样式

setActiveStyleSheet("style_mobile_iPad.css");

}

else{

// 判断访问环境是 其他移动设备 则加载以下样式

setActiveStyleSheet("style_mobile_other.css");

}

}

catch(e){}

}

}

else{

// 如果以上都不是，则加载以下样式

setActiveStyleSheet("style_mobile_no.css");

}

// 判断完毕后加载样式

function setActiveStyleSheet(filename){document.write("＜link href="+filename+" rel=stylesheet＞");}

加载页面
复制代码 代码如下:

<script type="text/javascript">
if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
if(window.location.href.indexOf("?mobile")<0){
try{
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
window.location.href="手机页面";
}else if(/iPad/i.test(navigator.userAgent)){
window.location.href="平板页面";
}else{
window.location.href="其他移动端页面"
}
}catch(e){}
}
}
</script>
您可能感兴趣的文章:

相关文章

  • webpack4与babel配合使es6代码可运行于低版本浏览器的方法

    webpack4与babel配合使es6代码可运行于低版本浏览器的方法

    这篇文章主要介绍了webpack4与babel配合使es6代码可运行于低版本浏览器的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 基于JS实现密码框(password)中显示文字提示功能代码

    基于JS实现密码框(password)中显示文字提示功能代码

    这篇文章主要介绍了实现密码框(password)中显示文字提示功能代码,在项目开发中经常会用到，需要的朋友可以参考下
    2016-05-05
  • JS+CSS实现滚动数字时钟效果

    JS+CSS实现滚动数字时钟效果

    本篇文章教给大家用JS代码配合CSS样式来实现滚动时钟的动画效果，一起来学习下。
    2017-12-12
  • js实现登陆与注册功能

    js实现登陆与注册功能

    这篇文章主要为大家详细介绍了js实现登陆与注册功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • echarts读取JSON文件并画图完整代码

    echarts读取JSON文件并画图完整代码

    Echarts官网上提供了很多图表例子供我们白嫖,有时候遇到数据量比较大时,它会向后台请求json文件来加载图表数据,这篇文章主要给大家介绍了echarts读取JSON文件并画图的相关资料,需要的朋友可以参考下
    2023-06-06
  • 原生js更改css样式的两种方式

    原生js更改css样式的两种方式

    本文主要介绍了原生js更改css样式的两种方式，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-03-03
  • 利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法

    利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法

    这篇文章主要介绍了利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • js预加载图片方法汇总

    js预加载图片方法汇总

    这篇文章主要介绍了js预加载图片方法,实例汇总了javascript实现预加载图片的常用技巧,需要的朋友可以参考下
    2015-06-06
  • 浅析JavaScript中的array数组类型系统

    浅析JavaScript中的array数组类型系统

    除了对象之外，数组Array类型可能是javascript中最常用的类型了。而且，javascript中的数组与其他多数语言中的数组有着相当大的区别。本文将介绍javascript中的数组Array类型，非常不错，感兴趣的朋友一起看下吧
    2016-07-07
  • JavaScript BOM详解

    JavaScript BOM详解

    这篇文章主要为大家介绍了JavaScript BOM，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12

最新评论