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和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
jQuery ajax应用总结
Jun 02 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
js下将字符串当函数执行的方法
2011/07/13 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
loading动画特效小结
2017/01/22 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
在Python中移动目录结构的方法
2016/01/31 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
django的model操作汇整详解
2019/07/26 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
董事长岗位职责
2013/11/30 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
马云的职业生涯规划之路
2014/01/01 职场文书
教师党员思想汇报
2014/01/06 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
病假条格式范文
2015/08/17 职场文书
初三语文教学反思
2016/03/03 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python