快捷搜索:   服务器  PHP  安全  IIS  linux 安全

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;}


顶(1)
踩(0)

您可能还会对下面的文章感兴趣:

最新评论