问题一:如何识别不同的浏览器?比如360,谷歌,火狐,等等。
问题二:不同的浏览器,如何做到宽度和高度的自适应尼?这是我写的代码,但是我觉得没有实际价值,还请各位博友给我提提意见。
我发现,所有的浏览器,在不同的分辨率下面,有17像素的差别,好奇怪。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin: 0;padding: 0;}
.abc{ height: 972px;border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1920px) {
.abc {width: 1918px;}
}
@media screen and (max-width: 1920px) {
.abc {width: 1901px;height: 972px;}
}
@media screen and (max-width: 1680px) {
.abc {width: 1661px}
}
@media screen and (max-width: 1600px) {
.abc {width: 1581px}
}
@media screen and (max-width: 1440px) {
.abc {width: 1421px}
}
@media screen and (max-width: 1400px) {
.abc {width: 1381px}
}
@media screen and (max-width: 1366px) {
.abc {width: 1347px}
}
@media screen and (max-width: 1280px) {
.abc {width: 1261px}
}
@media screen and (max-width: 1024px) {
.abc {width: 1005px}
}
</style>
</head>
<body>
<div class="abc">DIVCSS5实例:我这个DIV宽度会随浏览器宽度变化哦,试试改变浏览器宽度</div>
</body>
</html>
<script type="text/javascript">
function myBrowser(){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) {
return "Opera"
}; //判断是否Opera浏览器
if (userAgent.indexOf("Firefox") > -1) {
return "Firefox";
} //判断是否Firefox浏览器
if (userAgent.indexOf("Chrome") > -1){
return "Chrome";
} //判断是否Google浏览器
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} //判断是否Safari浏览器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
}; //判断是否IE浏览器
}
var Browser = myBrowser();
if ("IE" == Browser) {
alert("IE");
}
if ("Firefox" == Browser) {
alert("Firefox");
}
if ("Chrome" == Browser) {
alert("Chrome");
}
if ("Opera" == Browser) {
alert("Opera");
}
if ("Safari" == Browser) {
alert("Safari");
}
</script>
自己参考着再加上去吧。
收到,谢谢啦,我会好好保存的
第二个问题 你知道吗?
@mayan马燕: 不同的浏览器,不同的分辨率下面,肯定有差别的你只要设置DIV宽度等于浏览器宽度即可。
@mayan马燕: 用:
max-width: 100%; /*保留这个是为了浏览器不支持calc()的时候仍然有效果*/
max-width: -webkit-calc(100% - 17px); /*对应Chrome和Safari浏览器*/
max-width: -moz-calc(100% - 17px); /*对应FireFox浏览器*/
max-width: calc(100% - 17px);