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

javascript判断移动端访问设备并解析对应CSS的方法

 更新时间：2015年02月05日 10:57:46   作者：喵小夕  
这篇文章主要介绍了javascript判断移动端访问设备并解析对应CSS的方法,涉及移动端设备的判断及动态加载技巧,需要的朋友可以参考下

本文实例讲述了javascript判断移动端访问设备并解析对应CSS的方法。分享给大家供大家参考。具体分析如下：

javascript判断不同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>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 关于uniApp editor微信滑动问题

    关于uniApp editor微信滑动问题

    这篇文章主要介绍了关于uniApp editor微信滑动问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-01-01
  • JavaScript内存泄漏的处理方式

    JavaScript内存泄漏的处理方式

    这篇文章主要介绍了JavaScript内存泄漏的处理方式，通过理论和实例结合的方式让你理解的更加透彻。
    2017-11-11
  • 小程序实现搜索框功能

    小程序实现搜索框功能

    这篇文章主要为大家详细介绍了小程序实现搜索框功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 深入探究V8引擎的底层原理

    深入探究V8引擎的底层原理

    V8引擎是一款由Google开发的JavaScript引擎，V8引擎采用了众多的优化措施，使得其在性能上得到了极大的提升，能够高效地执行JavaScript代码，本文将和大家一起探讨一下V8引擎底层原理，探究其优异性能之谜
    2023-06-06
  • JS判断数组是否包含某元素实现方法汇总

    JS判断数组是否包含某元素实现方法汇总

    这篇文章主要介绍了JS判断数组是否包含某元素实现方法汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • javascript省市区三级联动下拉框菜单实例演示

    javascript省市区三级联动下拉框菜单实例演示

    这篇文章主要为大家详细介绍了javascript实现省市区三级联动下拉框菜单很详细的代码，解决了大家实现javascript省市区三级联动下拉框菜单的问题，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • uni-app入门教程之组件的基本使用

    uni-app入门教程之组件的基本使用

    本文主要介绍了uni-app组件的基本使用,包括组件的引入、使用和常见问题解决方法,通过本文的学习,读者可以掌握uni-app组件的基本操作,为开发uni-app应用提供帮助,需要的朋友可以参考下
    2023-03-03
  • JavaScript 获取/设置光标位置,兼容Input&&TextArea

    JavaScript 获取/设置光标位置,兼容Input&&TextArea

    JavaScript 获取/设置光标位置,兼容Input&&TextArea：项目中遇到的问题，特此记录。
    2011-01-01
  • 如何在微信小程序中存setStorage

    如何在微信小程序中存setStorage

    这篇文章主要介绍了如何在微信小程序中存setStorage,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • 微信小程序手动添加收货地址省市区联动

    微信小程序手动添加收货地址省市区联动

    这篇文章主要为大家详细介绍了微信小程序手动添加收货地址省市区联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05

最新评论