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垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
详解Vue的options
May 15 Vue.js
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中的escape函数
2013/06/29 PHP
关于php中一些字符串总结
2016/05/05 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
Python关于反射的实例代码分享
2020/02/20 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
面向对象编程OOP的优点
2013/01/22 面试题
银行介绍信范文
2014/01/10 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
工作说明书范文
2014/05/07 职场文书
社区工作者演讲稿
2014/05/23 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
Python List remove()实例用法详解
2021/08/02 Python
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技