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 相关文章推荐
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 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 htmlspecialchars加强版
2010/02/16 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
浅谈js中的bind
2019/03/18 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
音乐表演专业毕业生求职信
2013/10/14 职场文书
单位承诺书格式
2014/05/21 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python
MySQL存储过程及语法详解
2022/08/05 MySQL