Web pages adapt to different browsers and resolutions

Last Update:2018-12-04 Source: Internet

Author: User

Tags blank page

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

After surfing the internet for so long, I have seen some websites with texts such as "Please use Internet Explorer 4.0 or a later browser to browse this website at a resolution of 800 × 600" on the homepage. However, you cannot always use 17 inch x 800 resolution for my 600 colors. Besides, Although Netscape 6.0 is not as good as IE 5.5, I 'd like to taste it! Oh, it turns out your web page is so ugly in Netscape! No wonder ....... After some research, I have found a solution to this problem. Don't you believe it? Let's look at it!
First, you need to create the following HTML files:
Index.html -- the homepage of a website to identify the browser.
Change-ie.html and change-nc.html -- a page that identifies resolution.
Index-ie.html and index-nc.html indicate webpages that support two browsers and can be viewed at 800x600 resolution.
1024-ie.html and 1024-nc.html represent web pages that support both browsers at 1024x768 resolution. Let's get started!
　　
<Strong>
Browser Problems
</Strong>
　　
We use Dreamweaver's "check browser" function. Press F8 to open the behaviors Panel (Figure 1), click the "+" button on the panel, and select "check browser" in the pop-up menu. The 2 dialog box is displayed. Select "go to URL" in the drop-down box after Netscape Navigator, and select "go to alt URL" in the drop-down box after Internet Explorer ". Click the browser behind URL and ALT urlto select change-nc.htmland change-ie.html. That is to say, when the web page detects that the browser is Netscape 4.0, it automatically enters change-nc.html. If Internet Explorer 4.0is used for uploading, it will automatically enter change-ie.html. In this way, the webpage can access different pages based on different browsers.

A blank page may flash in front of visiting friends. Although the time is short, it seems that there is something missing. This is just as if you have no progress bar when installing the software. Therefore, the corresponding information must be displayed on the page. Add the following code between <body> and </body>! (Code //... Is the comments to the Code, the same below)
<Script language = "JavaScript">
VaR nav = navigator. appname // browser name
VaR ver = navigator. appversion // browser version
Document. Write ("your browser is detected :″);
Document. Write ("<font size = 3 color = Red>"); // you can specify the font size and color of the browser name.
Document. Write (NAV );
Document. Write ("</font> ″);
Document. Write ("<font size = 3 color = blue>"); // you can specify the font size and color of the browser version.
Document. Write (VER );
Document. Write ("</font> ″);
Document. Write ("is entering the page. Please wait... ″);
</SCRIPT>
　　
<Strong>
Resolution Problems
</Strong>

Resolution resolution is not available in Dreamweaver. We can only manually add a piece of JavaScript code. First, add the following code to

<Script language = JavaScript>
<! --
Function redirectpage (){
VaR url800x60020.″index-ie.html "; // define the two pages. This example assumes that index-ex.htmland 1024-ie.htmlare in the same directory as change-ie.html.
VaR url1024x76820.4101024-ie.html ″;
If (screen. width = 800) & (screen. height = 600) // Add screen here. width, screen. the value of height can detect more resolutions.
Window. Location. href = url800x600;
Else if (screen. width = 1024) & (screen. Height = 768 ))
Window. Location. href = url1024x768;
Else window. Location. href = url800x600;
}
// -->
</SCRIPT>
Then go to the <body…> Add onload = "redirectpage ()″
Finally, add the following code between <body> and </body> to display the webpage's work information:
<Script language = JavaScript>
<! --
VaR W = screen. Width
VaR H = screen. Height
Document. Write ("the system has detected that your resolution is :″);
Document. Write ("<font size = 3 color = Red> ″);
Document. Write (W + "×" + H );
Document. Write ("</font> ″);
Document. Write ("is entering page conversion. Please wait... ″);
// -->
</SCRIPT>
Okay. All the work is done. Can you try it?

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More