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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
基于js实现数组相邻元素上移下移
May 19 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学习的路线图
2013/07/10 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python中encode()方法的使用简介
2015/05/18 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
常见的python正则用法实例讲解
2016/06/21 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
python绘制动态曲线教程
2020/02/24 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
法国体育用品商店:GO Sport
2019/10/23 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
研究生求职推荐信范文
2013/11/30 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
测绘工程专业求职信
2014/07/15 职场文书
放射科岗位职责
2015/02/14 职场文书
环保守法证明
2015/06/24 职场文书
优秀志愿者感言
2015/08/01 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
PyTorch的Debug指南
2021/05/07 Python
python基础学习之递归函数知识总结
2021/05/26 Python