JS判断屏幕分辨率并按分辨率不同加载不同内容的方法
现在越来越多自适应网页，电脑端和手机端都能访问，但是在这些页面如果我们需要加载一个图片广告位，比如720X90大小的，那这个图片我们在电脑端访问显示是正常大小的，但是如果在手机端访问，如果有CSS控制图片大小（比如max-width），那就会被压缩的不成样子，如果没有CSS控制，那又会出现图片顶破画面的情况。
这个时候就需要用到我们这里提到的办法，使用JS来判断访客屏幕的分辨率，并按不同分辨率载入不同的广告图片的方法。
首先看几个案例，理解下是怎么运行的
1、判断屏幕分辨率
<script language="JavaScript">
function redirectPage() {
var w=screen.width;
var h=screen.height;
alert("经系统检测，你的屏幕分辨率为 " + w+"*"+ h);
}
</script>这里定义w为屏幕宽，h为屏幕高，然后通过alert来弹窗提示你的屏幕分辨率大小
2、根据不同分辨率显示不同内容
<script>
function ScreenWidth(){
if (screen.width == 1440){
alert("1440*900");
}else if (screen.width == 800){
alert("800*600");
}else if (screen.width == 1366){
alert("1366768");
}else {
alert("全部不符合");
}
}
</script>
<input type="button" name="" value="fenbianli " onclick=" ScreenWidth()"/>这里定义一个function来接收input提交，点击后执行这个function，判断屏幕宽度，如果是1440就显示1440*900，是800就显示800*600，是1366就显示1366*768，如果不符合上面三种宽度则显示“全部不符合"
3、正题根据屏幕分辨率来加载不同内容
从刚才的案例2就可以发现，其实就是用if来判断就行了
我们可以写成这样
<script>
if(screen.width>=1440){document.writeln(你的广告代码1);}
if(screen.width>=1024){document.writeln(你的广告代码2);}
else{
document.writeln(你的广告代码3);
}
</script>这里使用了document.writeln的方法，需要注意里面的字符转义，不会手工转的话，可以用我们的工具转https://tool.bnxb.com/htmljs.html
当然这里就可以自由发挥了，比如还可以用innerText或者innerHTML的方法插入元素，详见https://www.bnxb.com/javascript/27164.html
4、一个别站的案例，通过JS判断访客屏幕分辨率，根据不同分辨率加载不同的CSS文件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>一个演示文档</title>
<link rel="stylesheet" id="sc" type="text/css" href="css/css1.css"/>
<script type="text/javascript">
window.onload=function(){
var sc=document.getElementById("sc");
var d=document.getElementById("d");
if(screen.width>1024) //获取屏幕的的宽度
{
sc.setAttribute("href","css/css2.css"); //设置css引入样式表的路径
d.innerHTML = "你的电脑屏幕宽度大于1024，我的宽度是 1200px, 背景色现在是红色。";
}
else{
sc.setAttribute("href","css/css1.css");
d.innerHTML = "你的电脑屏幕宽度小于或是等于1024，我的宽度是 960px, 背景色现在是蓝色。";
}
}
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>这里通过判断屏幕宽带，如果大于1024就将默认的<link rel="stylesheet" id="sc" type="text/css" href="css/css1.css"/>中的href中的"css/css1.css"字段，替换成css/css2.css，并在div id号是d的地方插入一个HTML代码，标示出你的电脑屏幕宽度大于1024，我的宽度是 1200px, 背景色现在是红色。
css1.css里面的内容
*{ margin:0; padding:0;}
div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}css2.css里面的内容
*{ margin:0; padding:0;}
div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}- 最新评论