zoukankan      html  css  js  c++  java
  • js判断屏幕分辨率的代码

    通过下面的代码判断分辨率

    <script language="JavaScript"> 
    <!-- Begin 
    function redirectPage() { 
    var wjbxue=screen.width;
    var hjbxue=screen.height;
    alert("经系统检测,你的屏幕分辨率为 " + wjbxue+"*"+ hjbxue + "by 脚本学堂 jbxue.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;}
  • 相关阅读:
    webstorm 2017 激活破解
    落在纸上的思考
    Mysql数据库备份脚本
    asp.net c# 打开新页面或页面跳转
    转正专业考试
    关于mysql-5.7.23-winx64.msi的安装
    win server 2012 R2 你需要先安装 对应于 KB2919355 的更新
    零碎
    按钮
    猪猪公寓——冲刺第一天
  • 原文地址:https://www.cnblogs.com/study100/p/3213564.html
Copyright © 2011-2022 走看看