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类中获取外部函数名的方法与代码
Sep 12 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
angular2模块和共享模块详解
Apr 08 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
学习jQuey中的return false
2015/12/18 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python 基于wx实现音乐播放
2020/11/24 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
七年级生物教学反思
2014/01/30 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
专职安全员岗位职责
2015/04/11 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
如何利用python创作字符画
2022/06/25 Python