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的目的分析
Jan 05 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
Angular的MVC和作用域
Dec 26 Javascript
canvas知识总结
Jan 25 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
js核心基础之闭包的应用实例分析
May 11 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获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
vue内置指令详解
2018/04/03 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
Python遍历目录中的所有文件的方法
2016/07/08 Python
Python批量查询域名是否被注册过
2017/06/21 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
python 伯努利分布详解
2020/02/25 Python
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
教育局长自荐信范文
2013/12/22 职场文书
小学生作文评语集锦
2014/12/25 职场文书
先进教师个人总结
2015/02/11 职场文书
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers