 
      
      
    2020-3-19 前端達(dá)人
/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
    
    
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//以下進(jìn)行測(cè)試
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);
</script>
    
    PC端只有Chrome有Safari字段嗎?為什么不需要判斷其他瀏覽器?
其實(shí)360,QQ等瀏覽器的userAgent字段也會(huì)帶有Safari字段,但是由于他們基于Chrome二次開(kāi)發(fā)的,所有也會(huì)攜帶有Chrome字段。
所以「匹配規(guī)則:擁有Safari字段,并且沒(méi)有Chrome字段」就可以了。 
    
接下來(lái)是修改元素樣式
    
    
    
    
<html>
<head>
    <style>
     #a{
        width:700px;
        height:300px;
        font-size:50px;
        color:red;
        background-color:grey;
        z-index:2;
        position:absolute;
        top:1300px;
        left:200px;
        display:none;
    } 
    </style>
</head>
<body>
    <div id="a"></div>
</body>
<script type="text/javascript">
    //假設(shè)想修改display為block
    function modify(){
        //1.原生Js法
        var a= document.getElementById("a");
        a.style.display="block";
        //2.用JQuery的css方法
        var a =$("#a");
        a.css("display","block");
        //3.用JQuery的attr方法
        var a =$("#a");
        a.attr("style","display:block");
    }
</script>
</html>
這樣就可以根據(jù)不同瀏覽器寫(xiě)出不同的樣式適配啦
    
    
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.ynkmey.cn