Generally we can judge the resolution by the following code
Copy Code code as follows:
<script language= "JavaScript" >
<!--Begin
function Redirectpage () {
var wjb51=screen.width;
var hjb51=screen.height;
Alert ("detected by system, your screen resolution is" + wjb51+ "*" + hjb51 + "by cloud-dwelling community jb51.net");
}
End-->
</script>
JS to determine the browser resolution
Copy Code code as follows:
<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 ()"/>
Description: This JS code can be modified, changed to screen.width>=1024 screen.width=800 two kinds of situation
So I chose to use the following code:
Copy Code code as follows:
if (screen.width>=1440) {
Alert (' Wide screen can be loaded with ads ');
Some AD code
}
Using JS to determine different resolution calls different CSS style files
Recently looked at a website, found that the display of different resolution, style file calls are not the same, today wrote an example to study,
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Untitled Document </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)//Get the width of the screen
{
Sc.setattribute ("href", "css/c2.css"); Set CSS to introduce a style sheet path
d.innerhtml = "Your computer screen width is greater than 1024, my width is 1200px, the background color is now red." ";
}
else{
Sc.setattribute ("href", "css/c1.css");
d.innerhtml = "Your computer screen width is less than or equal to 1024, my width is 960px, the background color is now blue." ";
}
}
</script>
<body>
<div id= "D" ></div>
</body>
What's Inside C1.css
Copy Code code as follows:
*{margin:0; padding:0;}
div{width:960px height:400px; margin:0 auto; background:blue; color: #ffffff;}
What's Inside C2.css
*{margin:0; padding:0;}
div{width:1200px height:400px; margin:0 auto; background:red; color: #fff;}
