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

      

  • 相关阅读:
    clear:both其实是有瑕疵的
    CSS3不遥远,几个特性你要知道
    JavaScript使用数组拼接字符串性能如何?
    CSS网页宽度怎么定比较合适
    浅析JavaScript的垃圾回收机制
    淡入淡出效果的js原生实现
    非阻塞式JavaScript脚本及延伸知识
    HTML5 Canvas圣诞树
    Ubuntu查看和自动挂载硬盘
    正则表达式批量重命名
  • 原文地址:https://www.cnblogs.com/yuqlblog/p/11335714.html
Copyright © 2011-2022 走看看