Determine the reader's browser type and screen resolution, and automatically call different CSS

When designing a webpage, we have a headache: What is the resolution of our viewers? If we allow our viewers to better browse my webpage, this is a question we must think about before designing. Therefore, when designing a webpage, Leying first wanted to be compatible with the screen resolutions of most viewers. Here, there are several common headers:

1. Use hard lines to frame the webpage with a table. The resolution of the box should be in-pixels, and the remaining space can be a background image or blank space.
2. You can also use the auto-scaling method. This method is old and simple;

3. Use the automatic judgment method.

Today, let's talk about the third method: How to Determine the viewer's screen resolution and give readers different browsing content based on different resolutions:

Some code on the Internet that can automatically determine the type or version of your browser is integrated.

1. determine both the resolution and the browser to make the screen resolution of the browser type automatically call different CSS codes.

<Script language = "JavaScript">
<! --
If (window. Navigator. useragent. indexof ("MSIE")> = 1)
{
VaR ie1024 = "";
VaR ie800 = "";
VaR ie1152 = "";
VaR ieother = "";

Screenwidth (ie1024, ie800, ie1152, ieother)
} Else {
If (window. Navigator. useragent. indexof ("Firefox")> = 1)
{
// If the browser is Firefox
VaR firefox1024 = "";
VaR firefox800 = "";
VaR firefox1152 = "";
VaR firefoxother = "";

Screenwidth (firefox1024, firefox800, firefox1152, firefoxother)
} Else {
// If the browser is other
VaR other1024 = "";
VaR other800 = "";
VaR other1152 = "";
VaR otherother = "";
Screenwidth (other1024, other800, other1152, otherother)
}
}

Function screenwidth (css1, css2, css3, css4 ){
If (screen. width = 1024) & (screen. Height = 768 )){
Setactivestylesheet (css1 );
} Else {
If (screen. width = 800) & (screen. Height = 600 )){
Setactivestylesheet (css2 );
} Else {
If (screen. width = 1152) & (screen. Height = 864 )){
Setactivestylesheet (css3 );
} Else {
Setactivestylesheet (css4 );
}}}
}

Function setactivestylesheet (title ){
Document. getelementsbytagname ("Link") [0]. href = "style/" + title;
}
// -->
</SCRIPT>

For everyone to understand, here is a simple explanation:

Reference content var ie1024 = "";

VaR ie800 = "";

VaR ie1152 = "";

VaR ieother = "";

Fill in the quotation marks separately. When you use IE, the resolution is 1024*768,800*600,115 2*864.

VaR firefox1024 = "";

VaR firefox800 = "";

VaR firefox1152 = "";

VaR firefoxother = "";

Fill in the quotation marks separately. When you use Firefox (a popular browser) and the resolution is 1024*768,800*600,115 2*864, the CSS file name to be used.

VaR other1024 = "";

VaR other800 = "";

VaR other1152 = "";

VaR otherother = "";

Fill in the quotation marks separately. When you use other browsers, the resolution is 1024*768,800*600,115 2*864.

2. If the resolution is not determined, only the browser can automatically call different CSS based on the browser type.

<Script language = "JavaScript">
<! --
If (window. Navigator. useragent. indexof ("MSIE")> = 1)
{
// If the browser is IE
Setactivestylesheet ("default.css ");
} Else {
If (window. Navigator. useragent. indexof ("Firefox")> = 1)
{
// If the browser is Firefox
Setactivestylesheet ("default2.css ");
} Else {
// If the browser is other
Setactivestylesheet ("newsky.css ");
}
}

Function setactivestylesheet (title ){
Document. getelementsbytagname ("Link") [0]. href = "style/" + title;
}
// -->
</SCRIPT>

Explanation: (similar to the previous one)

If the browser is Internet Explorer, default.css is used.

If the browser is firefox, default2.css is used.

If the browser is another user, newsky.css is used.

Usage:

It's easy to put it in front of "