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页面');
                }
    

      

  • 相关阅读:
    框架学习之Struts2 第五节 自定义拦截器
    框架学习之Struts2 第四节 文件上传
    2011_7_23 第三次评审
    框架学习之Struts2 第二节 Action的详解
    框架学习之Struts2 第一节 开发环境的搭建和第一个应用开发
    框架学习之Struts2 第七节 国际化
    关于LookUp的总结
    UML自学手册___事务模式——事务与人、地、物
    css合并外边距详解
    开发中的函数相关
  • 原文地址:https://www.cnblogs.com/yuqlblog/p/11335714.html
Copyright © 2011-2022 走看看