由于现在的很多用户的分辨率问题,导致很多广告会遮挡内容或者对于不同分辨率的用户不同的 CSS 样式,就可以参考下面的代码
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一般我们可以通过下面的代码判断分辨率
- <script language="JavaScript">
- <!-- Begin
- function redirectPage() {
- var wjb51=screen.width;
- var hjb51=screen.height;
- alert("经系统检测,你的屏幕分辨率为 " + wjb51+"*"+ hjb51 + "by phperzphperz.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;
- }
来源: