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二次開發(fā)的,所有也會(huì)攜帶有Chrome字段。
所以「匹配規(guī)則:擁有Safari字段,并且沒有Chrome字段」就可以了。
接下來是修改元素樣式
<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ù)不同瀏覽器寫出不同的樣式適配啦
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com