浏览器之间有差异性和不兼容,为了给用户相关的建议,通过JS获取用户浏览器属性信息,并在页面提示相关建议。
1.HTML主要内容
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="pt-message" class="pt-message">
<p id="msg"></p>
</div>
<script src="js/my.js"></script>
</body>
</html>
2.CSS主要内容
.pt-message {
display: none;
position: absolute;
z-index: 99999;
bottom: 0;
left: 0;
width: 100%;
background: #da475c;
color: #fff;
text-align: center;
}
.pt-message p {
margin: 0;
line-height: 60px;
font-size: 26px;
}
3.js主要内容
$(function(){
//获取浏览器基本属性
var brower = navigator.userAgent;
alert(brower.toLowerCase());
var c = brower.toLowerCase().indexOf("chrome");
var i = brower.toLowerCase().indexOf("msie");
var f = brower.toLowerCase().indexOf("firefox");
var m = brower.toLowerCase().indexOf("mozilla");
var s = brower.toLowerCase().indexOf("safari");
//如果是IE浏览器,就提示。
if (i >=0){
var msg = document.getElementById("msg");
msg.innerHTML = "你的浏览器是IE,请使用 Chrome,Firefox,Safari 等浏览器浏览.";
$(".pt-message").css("display","block");
};
});