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页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
对Layer UI 模块化的用法详解
Sep 26 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学习之整理字符串
2011/04/17 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
PHP实现递归的三种方法
2020/07/04 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
学生打架检讨书大全
2014/01/23 职场文书
学生手册评语
2014/05/05 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL