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 相关文章推荐
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
AngularJS实现路由实例
Feb 12 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
js实现九宫格抽奖
Mar 19 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
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
十大“创意”战术!
2020/03/04 星际争霸
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python模拟三级菜单效果
2017/09/11 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
男方父母证婚词
2014/01/12 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
心理健康日活动总结
2014/05/08 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
2015年售票员工作总结
2015/04/29 职场文书
摩登时代观后感
2015/06/03 职场文书