Home > Developer > JavaScript
Generally, we can use the following code to determine the resolution.
Copy codeThe Code is as follows:
<Script language = "JavaScript">
<! -- Begin
Function redirectPage (){
Var wjb51 = screen. width;
Var hjb51 = screen. height;
Alert ("after system detection, your screen resolution is" + wjb51 + "*" + hjb51 + "by script home jb51.net ");
}
// End -->
</Script>
Js determines browser resolution
Copy codeThe Code is 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 ()"/>
Note: This js code can be changed to screen. width> = 1024 screen. width = 800.
So I chose to use the following code:
Copy codeThe Code is as follows:
If (screen. width & gt; = 1440 ){
Alert ('advertising can be loaded on a wide screen ');
// Some advertisement code
}
Use JS to determine different resolutions and call different CSS style files
I recently read a website and found that different resolutions of the display and style files are called differently. Today I wrote an example to study it,
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<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) // obtain the screen width.
{
SC. setAttribute ("href", "css/c2.css"); // you can specify the path for css to introduce a style sheet.
D. innerHTML = "the screen width of your computer is greater than 1024. My width is pixel PX, and the background color is red now. ";
}
Else {
SC. setAttribute ("href", "css/c1.css ");
D. innerHTML = "your computer's screen width is less than or equal to 1024. My width is 960px, and the background color is blue now. ";
}
}
</Script>
</Head>
<Body>
<Div id = "d"> </div>
</Body>
</Html>
Content in c1.css
Copy codeThe Code is as follows:
* {Margin: 0; padding: 0 ;}
Div {width: 960px; height: 400px; margin: 0 auto; background: blue; color: # ffffff ;}
Content in c2.css
* {Margin: 0; padding: 0 ;}
Div {width: pixel PX; height: 400px; margin: 0 auto; background: red; color: # fff ;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
