zoukankan      html  css  js  c++  java
  • 终端判断按需加载样式

    1.方法一

    <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)) {
                                // 判断访问环境是 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>
    

      

    2.方法二

    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 = "手机页面";
                                console.log('手机页面')
                            } else if(/iPad/i.test(navigator.userAgent)) {
                                //window.location.href = "平板页面";
                                console.log('平板页面')
                            } else {
                                //window.location.href = "其他移动端页面"
                                console.log('其他移动端页面')
                            }
                        } catch(e) {}
                    }
                }else{
                    console.log('PC页面');
                }
    

      

  • 相关阅读:
    字符串操作函数5!!
    字符串操作函数4
    字符串操作函数3
    java开发命名规范总结
    centerOS网络NAT和桥接
    input框的内容变化监听
    Xunsearch迅搜项目实战经验
    PHP网络爬虫之CURL学习
    Xunsearch的使用总结
    Xshell 5 过期
  • 原文地址:https://www.cnblogs.com/yuqlblog/p/11335714.html
Copyright © 2011-2022 走看看