JS判断各种浏览器，根据判断动态引入不同的CSS文件、JS文件

最新推荐文章于 2023-09-05 18:08:58 发布

文大海

最新推荐文章于 2023-09-05 18:08:58 发布

阅读量4k

点赞数 1

分类专栏：网站前端文章标签： css 浏览器

网站前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

获取手机旋转参数

<html>

<head>
<title>DeviceOrientationEvent</title>
<meta charset="UTF-8" />
</head>

<body>
<p>左右：<span id="alpha">0</span>
</p>
<p>前后：<span id="beta">0</span>
</p>
<p>扭转：<span id="gamma">0</span>
</p>

<p>上次收到通知的间隔：<span id="interval">0</span>毫秒</p>


<script type="text/javascript">
function orientationHandler(event) {
document.getElementById("alpha").innerHTML = event.alpha;
document.getElementById("beta").innerHTML = event.beta;
document.getElementById("gamma").innerHTML = event.gamma;
document.getElementById("heading").innerHTML = event.webkitCompassHeading;
document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy;

}


function motionHandler(event) {
document.getElementById("interval").innerHTML = event.interval;
var acc = event.acceleration;
document.getElementById("x").innerHTML = acc.x;
document.getElementById("y").innerHTML = acc.y;
document.getElementById("z").innerHTML = acc.z;
var accGravity = event.accelerationIncludingGravity;
document.getElementById("xg").innerHTML = accGravity.x;
document.getElementById("yg").innerHTML = accGravity.y;
document.getElementById("zg").innerHTML = accGravity.z;
var rotationRate = event.rotationRate;
document.getElementById("Ralpha").innerHTML = rotationRate.alpha;
document.getElementById("Rbeta").innerHTML = rotationRate.beta;
document.getElementById("Rgamma").innerHTML = rotationRate.gamma;
}

if (window.DeviceMotionEvent) {
window.addEventListener("devicemotion", motionHandler, false);
} else {
document.body.innerHTML = "What user agent u r using???";
}

if (window.DeviceOrientationEvent) {
window.addEventListener("deviceorientation", orientationHandler, false);
} else {
document.body.innerHTML = "What user agent u r using???";
};
</script>
</body>

</html>

JS判断各种浏览器，根据判断动态引入不同的CSS文件、JS文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>JS判断各种浏览器，根据判断动态引入不同的CSS文件、JS文件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<div id="scroll-bar" class="scroll-bar"></div>
<script type="text/javascript">
function getBrowser() {  
    var ua = window.navigator.userAgent;  
    var isIE = window.ActiveXObject != undefined && ua.indexOf("MSIE") != -1;  
    var isFirefox = ua.indexOf("Firefox") != -1;  
    var isOpera = window.opr != undefined;  
    var isChrome = ua.indexOf("Chrome") && window.chrome;  
    var isSafari = ua.indexOf("Safari") != -1 && ua.indexOf("Version") != -1;  
    if (isIE) {  
        return "IE";  
    } else if (isFirefox) {  
        return "Firefox";  
    } else if (isOpera) {  
        return "Opera";  
    } else if (isChrome) {  
        return "Chrome";  
    } else if (isSafari) {  
        return "Safari";  
    } else {  
        return "Unkown";  
    }  
}

var linkNode = document.createElement("link"),scriptNode = document.createElement("script");
linkNode.setAttribute("rel","stylesheet");
linkNode.setAttribute("type","text/css");
scriptNode.setAttribute("type", "text/javascript");

if(getBrowser()=="IE"){
    linkNode.setAttribute("href","css/index-ie.css");
    scriptNode.setAttribute("src", "js/index-ie.js");
}else if(getBrowser()=="Firefox"){
    linkNode.setAttribute("href","css/index-firefox.css");
    scriptNode.setAttribute("src", "js/index-firefox.js");
}else if(getBrowser()=="Opera"){
    linkNode.setAttribute("href","css/index-opera.css");
    scriptNode.setAttribute("src", "js/index-opera.js");
}else if(getBrowser()=="Chrome"){
    linkNode.setAttribute("href","css/index-chrome.css");
    scriptNode.setAttribute("src", "js/index-chrome.js");
}else if(getBrowser()=="Safari"){
    linkNode.setAttribute("href","css/index-safari.css");
    scriptNode.setAttribute("src", "js/index-safari.js");
}
document.head.appendChild(linkNode);
document.head.appendChild(scriptNode);
document.getElementById("scroll-bar").innerHTML = "您的浏览器是："+getBrowser();
</script>
</body>
</html>

HTML和CSS中如何判断ie各版本浏览器

一、HTML代码中

在编写网页代码时，各种浏览器的兼容性是个必须考虑的问题，有些时候无法找到适合所有浏览器的写法，就只能写根据浏览器种类区别的代码，这时就要用到判断代码了。在HTML代码中，区别各种浏览器的代码如下，以ie6为例


<!--[if IE 6]>仅IE6可识别<![endif]-->


<!--[if lte IE 6]> IE6及其以下版本可识别<![endif]-->


<!--[if lt IE 6]> IE6以下版本可识别<![endif]-->


<!--[if gte IE 6]> IE6及其以上版本可识别<![endif]-->


<!--[if gt IE 6]> IE6以上版本可识别<![endif]-->


<!--[if IE]> 所有的IE可识别<![endif]-->

以上这些代码写法都是针对ie各版本浏览器的，在其他浏览器中这些代码都会被解释为Html注释而直接无视掉。
<body>
    <!--[if IE 6]>
    <div>
        IE6中才可以看到
    </div>
    <![endif]-->
    <div>
        其他
    </div>
</body>
所以要想些针对firefox之类的非ie浏览器，需要这么写：<!--[if !IE]><!--> 除IE外都可识别<!--<![endif]-->



二、CSS代码中

CSS代码中，则可以根据各浏览器自己独立的可识别的特殊代码来编写区分浏览器的代码，例如为IE系列浏览器可读[\9]，而IE6和IE7可读[*]，另外IE6可辨识[ _ ](下划线)；由
于CSS读取时是按从上到下来的，同样属性靠后写的生效，因此可以依照顺序写下来，就会让每个浏览器正确的读取到自己看得懂得CSS语法，有效区分各类型或版本：


.classname{
background:blue; /*Firefox等非IE浏览器背景变蓝色*/
background:red \9; /*IE8 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}


.classname {
background:black !important; /*非IE6 背景变黑色*/
background:orange; /*IE6 背景变橘色*/
}
因为其他浏览器可读取「!important;」但IE6却不行。

文大海

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS判断各种浏览器，根据判断动态引入不同的CSS文件、JS文件

<html><head><title>DeviceOrientationEvent</title><meta charset="UTF-8" /></head><body>左右：0前后：0扭转：0<p
复制链接

扫一扫