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 相关文章推荐
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 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模板,主要想体现一下思路
2006/12/25 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
tensorflow训练中出现nan问题的解决
2018/02/10 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
党员创先争优活动总结
2014/05/04 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
2016七夕情人节感言
2015/12/09 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
tree shaking对打包体积优化及作用
2022/07/07 Java/Android