js判断屏幕分辨率的代码


Posted in Javascript onJuly 16, 2013

一般我们可以通过下面的代码判断分辨率

<script language="JavaScript">  
<!-- Begin  
function redirectPage() {  
var w3water=screen.width;
var h3water=screen.height;
alert("经系统检测,你的屏幕分辨率为 " + w3water+"*"+ h3water + "by 三水点靠木3water.com");  
}  
// End -->  
</script>

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('宽屏幕可以加载广告了');
//一些广告代码
}

用JS判断不同分辨率调用不同的CSS样式文件

最近看一个网站,发现显示器不同的分辨率,样式文件调用的也不一样,今天写了一个例子研究一下,
 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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 相关文章推荐
jquery实现的图片点击滚动效果
Apr 29 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
vue router 配置路由的方法
Jul 26 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
微信小程序实现首页弹出广告
Dec 03 Javascript
js 调用父窗口的具体实现代码
Jul 15 #Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 #Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 #Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 #Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 #Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 #Javascript
JS中获取数据库中的值的方法
Jul 14 #Javascript
You might like
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
jquery处理json对象
2014/11/03 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
python操作oracle的完整教程分享
2018/01/30 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
python实现代码统计器
2019/09/19 Python
Pytorch之保存读取模型实例
2019/12/30 Python
医学院护理专业应届生求职信
2013/11/12 职场文书
统计系教授推荐信
2014/02/28 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
公司地址变更通知
2015/04/25 职场文书
烈士陵园观后感
2015/06/08 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
如何在python中实现ECDSA你知道吗
2021/11/23 Python
SQL SERVER触发器详解
2022/02/24 SQL Server