js判断屏幕分辨率的方法解析_js浏览器操作

当前位置：首页 > 脚本编程 > javascript实例 > js浏览器操作 > 正文

js判断屏幕分辨率的方法解析: 发布时间：2020-11-21编辑：脚本学堂

本文介绍下，使用javascript代码判断屏蔽的分辨率的方法，分享几个小例子，供大家学习参考。

本节主要内容：
判断屏幕分辨率

一般可以通过以下代码判断分辨率：

复制代码代码示例:

1，js判断浏览器分辨率

复制代码代码示例:

<script>

function ScreenWidth(){

  if (screen.width == 1440){

    alert("1440*900");

}else  if (screen.width == 800){

      alert("800*600");

         }else if (screen.width == 1152){

       alert("1152*864");

         }else {

        alert("do not know!");

         }

}

</script>

<input type="button"  name="" value="fenbianli "  onclick=" ScreenWidth()"/>

说明：这段js代码可改造一下，改为screen.width>=1024 screen.width=800两种情况

因此，使用如下的代码：

复制代码代码示例:

if(screen.width>=1440){

alert('宽屏幕可以加载广告了');

//一些广告代码

}

2，使用JS判断不同分辨率调用不同的css样式文件
实现在不同分辨率的显示器下，调用不同的样式文件。

例如：

复制代码代码示例:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JS判断不同分辨率调用不同的CSS样式文件-www.jb200.com</title>
<link rel="stylesheet" id="sc" type="text/css" href="css/c1.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/c2.css");   //设置css引入样式表的路径
      d.innerHTML = "你的电脑屏幕宽度大于1024，我的宽度是 1200px, 背景色现在是红色。";
    }
    else{

     sc.setAttribute("href","css/c1.css");
     d.innerHTML = "你的电脑屏幕宽度小于或是等于1024，我的宽度是 960px, 背景色现在是蓝色。";
    }
    }
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>

c1.css内容部分：

复制代码代码示例:

*{ margin:0; padding:0;}

div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}

c2.css内容部分：

复制代码代码示例:

*{ margin:0; padding:0;}

div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}

>>>查看更多javascript 教程

上一篇：js判断屏幕分辨率的小例子
下一篇：Js弹出窗口在任意分辨率下居中显示的实例代码

与 js判断屏幕分辨率的方法解析有关的文章

本文标题：js判断屏幕分辨率的方法解析
本页链接：http://www.jb200.com/article/13946.html

浏览排行

栏目分类

热点文章

js判断屏幕分辨率的方法解析