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 相关文章推荐
文本框回车提交与禁止提交示例
Sep 27 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
javascript实现画板功能
Apr 12 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
ArrayList类(增强版)
2007/04/04 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
django orm模块中的 is_delete用法
2020/05/20 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
七年级生物教学反思
2014/01/30 职场文书
期末自我鉴定
2014/02/02 职场文书
预备党员承诺书
2014/03/25 职场文书
考试诚信承诺书
2014/05/23 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL